Home/ Questions/Q 7037081
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T01:30:03+00:00

I’m building a web page that will be viewed on mobile devices (Blackberry specifically).

  • 0

I’m building a web page that will be viewed on mobile devices (Blackberry specifically). I have navigation drop down of sorts implemented as a <select> in the upper left corner of the page. Rather than require the user to click on the drop down directly I’d like to have so that the user can click/tap anywhere on the page the select drop down in the upper left corner opens. The page has no other links or clickable objects other than the select drop down in the upper left.

Is this even possible? From what I’ve found so far it seems that it’s impossible to programmatically open a <select> drop down, but I figured I’d throw this specific case out there.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Since it’s not possible to fake key presses with JavaScript (and rightfully so for security reasons), the closest thing is to change the size of the <select> element (change it from a drop down control to a list box control and back).

    enter image description here

    enter image description here

    Demo, Code (pure JS, no library)

    When the user selects an option by clicking (or tapping) it, the click event handler ‘closes’ the list box by setting its size back to 1, after which it converts back to a normal drop down control. I have only tested this in (non-mobile) Chrome, let me know if it works on Blackberry or not.

    Edit:

    I have created a small jQuery plugin that wraps behavior and configurability into a more comprehensible control. I have tested this on Safari Mobile on iOS 4 and it behaves just like a regular drop down does in that browser, except it can be opened programmatically.

    Demo, Code (jQuery 1.7)

    It works like this:

    $("select").openable({ triggers: $("#trigger") });

    Clicking on any trigger will open the selection UI.

    I have also added a handler for the key up event to catch Enter, Esc and Space to ‘close’ the list box. This mimics the drop down control’s selection mechanism on desktop browsers.

    Of course, on a desktop browser this will change the layout of your page, as it’s different from the native drop down control. You will have to come up with a CSS solution for that (something with position: absolute and z-index probably). But on iOS the selection UI isn’t rendered on the page, so it’s not a problem.

    Again, haven’t tested this plugin on BlackBerry…

    • 0