SnippetSpace SnippetSpace - 6 months ago 13
jQuery Question

javascript finger slide detection

Hey,
I'm trying to create a sliding checkbox like the one on the iphone.

I started with this script:

$('input[type=checkbox]').live('touchstart', function (e) {
down_x = e.originalEvent.touches[0].pageX;
$('input[type=checkbox]').live('touchmove', function (e) {up_x = e.originalEvent.touches[0].pageX;
if ((down_x - up_x) > 1) {$(this).change()}});
});


But it does not seem to work. Any idea on how to implant this?

Thanks a lot guys :)

Answer

this was a fun little problem

I got it working just fine, it even works with a mouse :)

I tested it on my Ipad and Iphone and it is pretty cool.

would not take much work to flip this into a plugin but this should work just fine for you

the trick with working with ios mobile events is these three events

$('.toggle_box').bind('touchstart',touch_start);
$('.toggle_box').bind('touchmove',touch_move);
$('.toggle_box').bind('touchend',slide_end);   

http://jsfiddle.net/samccone/ZMkkd/