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.
Related
I know there are lots of javascript plugins and libraries to allow users to pick emojis for text inputs, but windows and mac already have native emoji pickers (⊞ Win. or CTRL⌘Space), Is there a way for me to open these native emoji pickers when a user clicks in a text field instead of installing plugins in my website?
I already tried emulate button key press, but it didn't work at all.
Short answer is no.
In order to access any OS feature from javascript, you need a corresponding browser API to support.
AFAIK, there isn't an API for that. There's a discussion here which suggests adding <input emoji /> to standard but seems no traction gained.
Edit: Below is my original answer, revised. Comments pointed out I was focusing on the wrong aspect of the question, I totally agree.
However, the OP obviously has some wrong idea about what you can do in javascript to leverage browser ability. So I think it's still worth clarification.
You can't send arbitrary emulated keyboard event from js and hoping the OS will respond. Were it possible, it'd be a severe security issue on browser's part. Imagine open a website and it fires a series of keyboard event to your OS and wipes out your desktop (totally feasible through shortcuts).
You need to understand the runtime env inside the browser is basically isolated from the one of native OS. Whatever OS feature that's accessible to your javascript is totally up for browser vendors to decide. For security reason, they are super careful in making these decisions.
Also, make a distinction on "what browser can do", and "what browser allows you to do in js". Seeing Chrome has an "Emoji & Symbols" context menu item, doesn't necessarily mean it decides to grant you the same ability in js.
To further clarify why the emulated keyboard event is fundamentally different from the native one, I include a graph here. The blue arrow is how emulated keyboard event flows. The farthest place it can reach is the browser's internal event bus. It never got a chance to reach the OS event bus, so no way to notify native emoji picker.
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
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.
I'm the processing of redesigning a website that uses hover effect on a button (like button images changes when you put your mouse over it and when you click it, it goes to a different page).
Now that works fine if you're on a a desktop/laptop computer. But on a tablet, the hover/onmouseover effect does not work. On a tablet, when clicking the button image, it changes briefly and then immediately goes to a new page.
What are methods and techniques where a website can detect if a visitor comes from a tablet or not? Then would it be possible to switch to a tablet CSS version? Or, are there tablet framework (i.e. Modernizer?) that can help with this process?
Touch devices don't have a hover event and there is no way to emulate the user interaction that might initiate it. Make sure that there is no critical functionality assocaited with hover events (most just do highlighting) so there is no loss of functionality if the device doesn't have it. Browser sniffing by UA string is a flawed strategy - you must update it every time a new device comes along or the string changes for an existing device. Great if you're into high prices for maintenance, but not if you're the one paying for it.
You could identify the iPad (or mobile device) simply by checking the User-Agent parameter of the browser.
In PHP for example you could do something like:
if( strstr($_SERVER['HTTP_USER_AGENT'],'iPad') ) { // Add custom iPad CSS }
If you want to get it further you could use WURFL (http://wurfl.sourceforge.net/)
Does the iPhone browser have special events that I can hook into with Javascript? For instance, if the users slides to the left, I would like to perform a certain action. If there are events like this available, it would be nice to see a reference for all of them. ideally, there will someday be a standard for all touch-screen mobile browsers.
You can access multi-touch events and gestures, but there is a fair amount of under-the-hood plumbing you'll likely have to handle yourself. Here is Apple's guide:
https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html
As an example of what can be done with a MobileSafari web app, check out this article on Apple's in-house "PastryKit":
https://daringfireball.net/2009/12/pastrykit
Particularly, you can use Safari on Windows or Mac (if you enable the developer menu in the preferences and set the useragent to MobileSafari 3.x) and check out the way it works.
Another UI library to look at is jQTouch:
http://www.jqtouch.com/
jQTouch really does the thing.
http://jqtouch.com
http://code.google.com/p/jqtouch/wiki/CallbackEvents
Do you really mean "when the device orientation changes", perhaps? If so, you may want to bind to the onorientationchange event.
There's a useful reference of all on* events at Apple's Safari Reference Library.
Perhaps the onscroll, ontouchstart, ontouchmove, or similiar events are what you're looking for. All listed on the Safari HTML Reference page.