CODEWITHSUNDEEP
javascriptjqueryhtmlswipe
SNos
SNos

Reputation: 3470

Jquery - recognise Swipe Up and Down

I am using the jQuery function from this link in order to recognise 'swipe down' and 'swipe up' events.

The function is working fine if I use just swipedown or up however, I cannot find out how to recognise both direction inside one function. For example:

$("body").on("swipeupdown",function(){

  if (swipeUp == true) {

  alert("SwipedUp");
  }

if (swipeDown == true) {

  alert("SwipedDown");
  }

});

Any Idea how to implement this?

I have also tried the code below it works however, it counts the swipes and shows a lot of alert windows overtime i swipe.

$("body").on("swipeupdown",function(){


  $("body").on("swipedown",function(){

  alert("down");

  });

  $("body").on("swipeup",function(){

  alert("up");

  });


});

Upvotes: 0

Views: 5265

Answers (1)

Twisty
Twisty

Reputation: 30893

So you can catch more info about the event using this:

$(function(){
// Bind the swipeHandler callback function to the swipe event
    $( "body" ).on( "swipe", swipeHandler );

    // Callback function references the event target and adds the 'swipe' class to it
    function swipeHandler( event ){
       console.log( event );
    }
});

Working Example: http://jsfiddle.net/Twisty/be5z0vko/

This will give you a object and you can find ways to determine which direction the swipe was. For example, the event.swipestart and event.swipestop contain coords, so you can use those to determine the direction.

Also look here: http://developingwithstyle.blogspot.com/2010/11/jquery-mobile-swipe-up-down-left-right.html In-depth but would be much more precise if you need it.

Upvotes: 1

Related Questions