CODEWITHSUNDEEP
jquery-mobile
Xavier
Xavier

Reputation: 8362

Calculate swipe distance in jQuery-mobile

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 across the screen?

$('.cmButtons').live('swipeleft',function(){
    console.log("swiped left");
});

Upvotes: 8

Views: 12252

Answers (3)

Jasper Moelker
Jasper Moelker

Reputation: 1450

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

Upvotes: 9

jocull
jocull

Reputation: 21095

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.

Upvotes: 2

Phill Pafford
Phill Pafford

Reputation: 85308

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

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.

Upvotes: 2

Related Questions