What is the easiest way to disable the wheel selector that appears on mobile Safari when a user activates a <select> element?
I have styled the <select> and <option> elements myself, and I would prefer that the user interacts directly, rather than with the scroll supplied by the browser.
You can't disable the wheel selector on mobile Safari.
Generally speaking you could probably preventDefault() on click and touch events on the <select>, however it's not clear how you would then make it actually usable. So, you may want to avoid using a select element at all once you detect an iOS device.
You could employ some widget collection such as this one. It can be used to implement dropdown menus or any other kind of menu, and does not open the big wheel thing on the bottom.
As of 2022 this is no longer an issue. Hooray! They finally got rid of the wheel selector. In iOS Safari the select element is now a normal list, similar to Android. I've been waiting years for this issue to be addressed, the wheel selector was awful UX and is finally gone. iOS Safari is actually a good browser now.
Related
I got event listener to the scroll and everything works fine with desktop browsers(when scrolling starts - the event fired straight away) and chrome browser in mobile(chrome latest version + android version 5.0), but with other mobile browsers(ff, android browser) this works differently, and after googling for some I found the reason: it's because the scroll event is not fired until the scrolling action comes to a complete stop(releasing the finger from the screen).
My question is there some workaround for this, perhaps some best practice, so it will fire normally(as for desktop) and without dramatically performance changes?
*JS solution only(no for jquery).
You can use iScroll. It does not depend on jQuery and achieves what you want ( firing scroll events on mobile platforms ~continuously ) among other things.
You can refer to this answer for how to implement this using iScroll.
I agree the answer of Mohit Bhardwaj and I just want to say some important thing about iScroll.
The iScroll runs depend on css3 translate and the js event such as touchMove, touchStart and touchEnd. You can just think it handle the whole scroll system in your page or the element container you set it to handle.
One thing you should know, if you want to listen the scroll event in iScroll, you must import the iscroll-probe.js, and set the probeType param with 2 or 3. Otherwise you would not get the scroll event.
The iScroll version 5 is good, I use it in a lot of project. You can see it docs and code
here
When running http://ichord.github.io/At.js/ page in IE10, it works correctly in a sense it returns focus to textarea after selecting suggestion from autocomplete list. It also works when I use on screen keyboard and touch input (on surface rt or simulator).
When I try to run the same code as WinJs app, it works for mouse/keyboard selection, but when I select item using touch it doesn't return focus to textarea, which is really frustrating.
Is it known bug? Are there any known workarounds to it?
What it interesting it also doesn't hide on screen keyboard.
Our website makes use of the overLIB library to show "more information" about clickable links on mouseover. The result is that on iOS devices, the first click will result in the mouseover text appearing, while the second will activate the link.
What is the easiest way to keep the mouseover text for non-iOS browsers, while bypassing it for users using iOS, so that for iOS, the links are activated on the first click?
If you want an easy solution, you can use something like Modernizr as described here: What's the best way to detect a 'touch screen' device using JavaScript?. Then, you can bind your overLIB events to the non-touch classes, etc. This way, you can address all touch device users and not just iOS users. Of course, if you want just iOS users, you can always UA sniff ( http://www.quirksmode.org/js/detect.html ), though its not recommended.
However, you then still have the problem that you're loading the overLIB script(s) for users who don't need it. I think the best way to avoid this depends on the rest of your stack.
Another thing to think about is the purpose of the hover tips. If they are useful on your desktop site for helping users to learn about where they're going without making the investment of a click, why aren't they useful on your touch device site? I know that hover is clunky on touch devices, but I think they're common enough since there's no alternative yet. I'd bet that touch device users understand the flow. The only example that comes to mind is Seamless.com - when you select a menu item from a restaurant, you get a "hover" description and then it requires a second click to select the item.
I realize that this is an old question - answering for the Googlers. :)
Another solution is to use .mousemove() instead of .mouseover().
iOS ignores the .mousemove() event and triggers a click on the first touch.
Greetings,
http://marijn.haverbeke.nl/codemirror/jstest.html works on Safari on PC, but not on an Ipad. Which is a shame, since I wanted to use it for an app. My question is not only why does it not work, but how should I go about analyzing things that break on Ipad Safari ?
T.
CodeMirror2 works mostly fine on an iPad;
You can add text, remove text and move the cursor around.
You can however not hilite words and cut / copy / paste (as of today 2012-06-27).
The editor in CodeMirror is actually an iframe, and not a native text input form element. The problem here I suspect is that the browser on the iPad does not know if the keyboard should be activated because some DOM element has key events bound to it.
To do that, Safari would have to analyze the source code to deduce key bindings and when should the keyboard be activated - which sound hugely problematic to me.
perhaps it used an iframe in the past, but I have codemirror on my website now and I see no iframes at all contained inside it.
this is almost one year later though, so perhaps now the situation has changed.
In the iPhone or Android, if you have a JQuery Slider, it doesn't quite work (touchscreen will move the screen instead of drag the slider.)
You may need to write this from scratch. Luckily, #ppk has coded up an example of drag and drop for iPhone.
Listen for touch events and move the slider accordingly. These events also work on Android as it also uses WebKit.
You can use this library http://touchpunch.furf.com/
This provides touch events for all the jquery ui elements.
I found sample code online which converts touch events to mouse events. I tested this with jquery-ui's slider and it worked nicely!
Link to source
You can do this for iphone, android and windows phones via jquery+javascript. Windows phone with IE has one flaw, I have not been able to get it to snap to div sections.
I used this to wire up http://code.google.com/p/jquery-ui-for-ipad-and-iphone/ the slider. Works like a charm, just be sure to replace the code that works against specific dom elements. Then add $('#sliderdiv').addTouch (). Works on IPhone, but doesn't work for Android. According to quirksmode touch events don't work on Android.