I simply can't find anything in the docs or anywhere on how to detect a simple pinch-zoom Gesture on a touchdevice with jQuery Mobile? I would also considering using another library or anything. I just want to detect if the user is trying to scale the content on the website.
So I don't need to handle a pinch gesture on an element of the site but on the site itself. I just want to listen for a pinch gesture on my website.
Any idea how to do that?
thank you
The vendor support varies and iOS the only platform whereto use multi-touch Javascript events reliably.
http://developer.apple.com/library/ios/#DOCUMENTATION/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html#//apple_ref/doc/uid/TP40006511-SW8
From Apple's own documentation.
Related
I need some help. I am trying to work on a mobile web page. What i'm trying to do is "capture" when the user does a zoom in/zoom out action. That is, when they put two fingers on screen and separate or close their fingers together. I looked at jquery mobile and didn't see it.
So specifically can I attach a javascript function to a pinch/zoom event in a mobile device?
Any help would be greatly appreciated.
hammer.js https://hammerjs.github.io/ is one of the best javascript library for such problems..
Zepto is a jquery compatible library for mobile and provides handlers for pinch events. Unfortunately, they are listed as iOS only. (See "Touch Events")
Synopsis:
$('some selector').pinch(function(){ ... });
$('some selector').pinchIn(function(){ ... });
$('some selector').pinchOut(function(){ ... });
Touchy is a jQuery plugin that provides support for pinch, drag, swipe, longpress, rotate. It works on any browser that implements touchstart, touchmove and touchend. Future versions will also support IE10.
How to test touch events without having any touch based screen / device?
I have Windows 7 PC and my monitor is not touch based.
You can use google chrome. Open console by pressing F12 or inspect any element, in right-bottom corner click on gear icon, then go to "overrides" where you can enable "Emulate touch events". Your mouse clicks will be like touches.
Notice: unbind/remove any pc's click events like onclick,onmousedown,.click and .ect because in this mode will works both of touch and click events.
If it's still actual, you can use this library to test touch events. It's used to test touch for Hammer.
One possible way is to install the Android SDK and use the browser in the emulator. I'd advise an Android 2.x image as emulation is a bit slow, especially the 3.x and 4.0 images.
Hammer.js library can simulate touch events on desktop devices.
http://eightmedia.github.com/hammer.js/
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.
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.
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.