I would like to know if there's any way to detect that a pinch zoom event has taken place. I could achieve it by using this event binding for iOS
$(document).bind('gesturechange',function(event){
zoomAdjust();
});
Is there any such event for android devices?
There is a great js ready for this called Hammer JS
There is also another great jQuery plugin called TouchSwipe.
Related
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.
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.
Does anyone know of a JS framework that has drag and drop functionality and is compatible with mobile (iOS) and regular browsers?
I currently have a web-based app and it is a hassle to make its drag'n'drop functionality work on iOS... I wish there was one that would do it for both...
Here's two built in jQuery:
http://www.stevefenton.co.uk/cmsfiles/assets/File/mobiledragdrop.html
http://code.google.com/p/jquery-ui-for-ipad-and-iphone/
There is also the jquery mobile framework (which does not have drag and drop nativly):
http://jquerymobile.com/
I'm a big fan of Sencha Touch.
Here's there drag and drop demo - http://dev.sencha.com/deploy/touch/examples/dragdrop/.
Note: Tested on my iPhone 4 in Safari.
JQuery Mobile is trying to support a large variety of platforms
And here is a specific plugins for Drag and Drop
Try dojo. It works pretty well and it is a relatively mature toolkit. http://dojotoolkit.org/
Check out SproutCore. It's a framework created by former Apple engineers and is used by Apple in MobileMe and iCloud web apps. It has SC.Drag which works with both mouse and touch events.
interact.js is a standalone and lightweight drag-and-drop, resize and multi-touch gesture javascript module. It works on iOS, Android, Chrome, Firefox, Opera and IE9+ with support for interacting with HTML and SVG elements. Something to note in advance is that it's up to the developer to respond to drag events but I think that's a good thing.
To allow the whole page to be panned by dragging, you could use:
// make an Interactable of the document body element
interact(document.body)
// make a draggable of the Interactable
.draggable({
// on(drag)move
onmove: function (event) {
x += event.dx;
y += event.dy;
// translate the document body by the change in pointer position
document.body.style.translate = 'translate(' + x + 'px, ' + y + 'px)';
}
})
http://www.kendoui.com/ this should work. Has d'n'd too, even though it's still in Beta.
zepto (smallest, iOS 4+, Android 2.2+, webOS 1.4.5+)
jquery, jquerymobile, jqtouch
prototype
sencha, senchatouch
You can use jquery UI for drag and drop and an additional library that maps touch events to their mouse event analogs.I think this should solve your problem:
https://github.com/yeco/jquery-ui-touch-punch
To add touch events, just include the jquery.ui.touch-punch.min.js
script after your jquery.ui scripts.
DEMOS:
http://furf.com/exp/touch-punch/
I'm not sure if its exactly what you're looking for, but you could try PhoneGap or maybe XUI.
If you are building web apps for ios you must try jquery mobile.
hi there i use this jquery plugin:
https://github.com/LuvDaSun/jdrag
It provides some drag events
let me know if you find any bugs, the code is quite new!
This is still in alpha: http://prettydiff.com/jsgui
It is persistent even after you close or refresh your browser and it will work in any modern browser. Furthermore it is not a framework. You can use this without other frameworks and you can customize it to do what you want.
Hey! Just checkin in to see if there's a function similar to js onmousemove (jquery mousemove) for touch phones? Seems like jQuery mobile doesn't have it and I'm pretty new to all this with mobiles.
/tn
Check the jQuery UI for iPad and iPhone project. It supports Android too.
jQuery:
$(element).bind('touchmove', function(){
});
in jQuery-less javascript, it is ontouchmove.
If you want to convert your current mouse events over to touch, just add this 'touch punch' plugin:
http://touchpunch.furf.com/
This is very close to what I was looking for:
http://swipejs.com/
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.