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/
Related
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.
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.
Very simple jQuery doesn't work in Safari for iPhone and iPod touch. I make a simplified case:
$(function(){
$("#boto").click(function() {
$("#boto2").fadeOut("slow");
});
})
http://jsfiddle.net/vWfNj/
http://www.mig-marketing.com/proves2/3.html
It works in computers, it works in iPad but not in my iPod touch. I'm so surprised, I don't understand. Does jQuery needs anything special for Safari in iPhone?
The iphone doesnt have a click event, it has a touch event try this.
$('.class').bind('touchend', function () {
//Code
});
Edit : No idea what your comment means but here....
$(function(){
$("#boto").bind('touchend', function () {
$("#boto2").fadeOut("slow");
});
})
Be aware that on iOS 5, your #boto has to be inserted into the DOM before you attach event handlers to it. I had a similar problem a few days ago : jQuery events on iOS 5
try using .touch instead of .click as a touch event is fired when you click on Any touch supporting device.
I found out that the only problem is with the hosted jQuery library from Google. I don't understand why my iPod touch can download the page but not the jQuery library. I don't know if it is a problem in all iPhones and iPod touch...
Anyway If I download the jQuery library, it works fine. And of course the click function works in the iPhone.
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.
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.