fnagel / jquery-ui

A fork of jQuery UI: WIP branches, legacy Selectmenu Widget (branch: selectmenu) and an accessible version of jQuery UI Tabs (outdated, branch: tabs accessability)
Other
588 stars 141 forks source link

mobile device support #73

Closed ghost closed 10 years ago

ghost commented 13 years ago

Great plug-in! I appreciate all the hard work that you, and the Filament Group before you, have put into this.

I'm using selectmenu on a web site, and in addition to testing across several different browsers, I decided to test on my Motorola Droid X smart-phone. The select list opens when I click on it, but the scroll bars are missing: there is no way to scroll the list.

Should selectmenu be limited to "standard" browsers on "standard" computing devices, or can you think of a solution for mobile devices? thank you...

fnagel commented 13 years ago

Thanks for your contribution and nice to hear you like our work. Please post some real work examples if possible: https://github.com/fnagel/jquery-ui/issues#issue/60

This should be fixed soon, but is hard to test and fix. I will test asap on my Android phone. Some idea how to fix this problems or to force phones to use the original select?

ghost commented 13 years ago

Test Link:
http://jquery-ui.googlecode.com/svn/branches/labs/selectmenu/index.html

Click on the second demo labeled: Default: "popup" Style with maxHeight set. On my Android device, the scroll bar does not show up. No big deal in this example, since all the options are visible, but with a longer select list, there is no way to scroll to see the rest of the options.

ghost commented 13 years ago

Ideas on how to get around this:

  1. Can jquery detect whether or not a browser can or can't show the scroll bar? I don't know. Perhaps the jQuery.support function can? http://api.jquery.com/jQuery.support/
  2. I like the way google does it. Go to google.com from a mobile device.
    They can obviously detect that you're on a mobile device since they give you an even more basic version of their home page.

At Google, I see the following "links" across the top: Web, Images, Places, News, more

Click on "more" - a long list of options will appear.

I would love it for selectmenu to somehow detect (based on browser) if it needs to display the entire list - OR perhaps just give me the option to ALWAYS display the ENTIRE list.

  1. Final option: add scroll buttons at the bottom and top of the list. Pressing the button automatically scrolls to the next several items in the list.
fnagel commented 13 years ago

Please do not use the demos at google svn because the are outdated -- more than a year outdated! Use this one: http://jsfiddle.net/fnagel/hsn95/32/embedded/result/

Afaik jQuery.support does not support mobile devices yet, but there is jquery mobile. It should contain JS function for that.

I would like the normal selectmenu button, but if you click on it the normal selectmenu is activated, which shows a OS dialog (at least in Android). This way accessibility and usability should be perfect. What do you think?

ghost commented 13 years ago

I agree: ideal situation is to keep the selectmenu button, but clicking on it shows the Android-type select list. Can you figure out how to make that happen?

If not... or if not quickly... I'd like an option to force the entire select list to display, without a scrollbar, even if it's a long list. At least then I know that it will work.

ghost commented 13 years ago

Short term solution - since me creating a mobile version of my web application is not an option right now:

if ( !( navigator.userAgent.match(/Android/i) ) ) { $(".jqDDB").selectmenu({ transferClasses: true, style: "dropdown", width: 145 }); }

http://stackoverflow.com/questions/3514784/best-way-to-detect-handheld-device-in-jquery

fnagel commented 13 years ago

I would like to cover all mobile devices: Android, iPhone, BB, Win and others

@sirMixAlot Thanks for you link!

if( navigator.userAgent.match(/Android/i) ||
 navigator.userAgent.match(/webOS/i) ||
 navigator.userAgent.match(/iPhone/i) ||
 navigator.userAgent.match(/iPod/i)
 ){
 // some code
}

Needs further investigation but comes for sure in next version. I would need somebody to test in BB and Win phones!

fnagel commented 12 years ago

Changed to v1.4 as Im not able to allocate time for testing this. Any help is appreciated.

chadedrupt commented 12 years ago

I use a method like this for iOS detection if its of any help

function isiOS() { 
      return ((navigator.platform.indexOf("iPhone") != -1) || 
                (navigator.platform.indexOf("iPod") != -1) || 
                (navigator.platform.indexOf("iPad") != -1));
 }

if (isiOS() == false) {
            $('select').selectmenu();
        }
fnagel commented 12 years ago

Ahh ok, so you do not init Selectmenu when iOS is involved, just like teh snippet above for Android.

I would prefer a solution which shows the styled button but uses the native select menu instead of the generated menu list.

Anyway, thanks for your contribution.

fnagel commented 12 years ago

Ive tested a little and have no idea how to open a native select dialog by Java-Script. I found some sources arguing its not possible, like: http://stackoverflow.com/questions/6097240/javascript-on-ios-opening-an-html-select-element

Any ideas?

My current thought would be to implement a option with a callback. A boolean return configures if the selectmenu widget is created.

fnagel commented 12 years ago

Any feedback on this issue?

fnagel commented 12 years ago

Ok, this seems possible. See http://jquerymobile.com/demos/1.1.1/docs/forms/selects/

fnagel commented 10 years ago

This won't happen for this legacy branch. Closed.