javascript finger slide detection

Question

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 implement this?

Rampageous

Answer 1

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/

Kurdistan

ha no problem, this was pretty fun actually, I think I am going to write up a big blog post about it, but glad you enjoyed it – Kurdistan

I broke this script in like 2 seconds while on the computer with a mouse. I think you need a return false or stop propagation somewhere...I was clicking like crazy and it got stuck in the "green" position and no longer worked. – Inkberry

are "touchstart" and "touchend" really necessary? – Mccraw

also, in the 'touchmove', is there a way to find out direction of movement? – Mccraw