Calculate swipe distance in jQuery-mobile

Question

I hope you are well today, I am trying to calculate the swipe distance (a touch gesture) on a mobile website, how would you work out how many pixels the user has swiped acro

Answer 1

Not sure if this helps but with Beta 2 they have released some additional swipe functionality

• http://jquerymobile.com/blog/2011/08/03/jquery-mobile-beta-2-released/

Configurable swipe event thresholds added

There were a number of hard-coded constants in the jquery.mobile.event.js swipe code. For developers who need to tweak those constants to allow a greater vertical displacement and still register a swipe, this new feature allows them to be adjusted. Thanks to mlitwin for contributing this.

• scrollSupressionThreshold (default: 10px) – More than this horizontal displacement, and we will suppress scrolling
• durationThreshold (default: 1000ms) – More time than this, and it isn’t a swipe
• horizontalDistanceThreshold (default: 30px) – Swipe horizontal displacement must be more than this.
• verticalDistanceThreshold (default: 75px) – Swipe vertical displacement must be less than this.

Answer 2

I would suggest the excellent jQuery TouchSwipe Plugin by Matt Bryson: http://labs.skinkers.com/touchSwipe/.

It has touch & swipe events for 4 directions and 1 or 2 fingers. And it has SwipeStatus with which you can get swipe distance: http://labs.skinkers.com/touchSwipe/demo/Swipe_status.html

Answer 3

I couldn't figure out how to get the distance on the fly from the method, so instead I just set a new global threshold on my page.

//Override the default horizontalDistanceThreshold of 30
$.event.special.swipe.horizontalDistanceThreshold = 200;

I'm using an older version of jQM (v1.0 still...) so this may have changed. It's easy to find in the source if you just start looking for swipe events.