Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Using TouchSwipe plugin in jQuery

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 968
    Comment on it

    If you want to swipe on touch devices like iPad, iPhone, Android device etc there is a jQuery plugin that can be used for this purpose. It can read any single or multiple finger swipes on touch device and mouse 'drags' on the desktop browser.

    You can also set time and distance thresholds to distinguish between swipe gesture and slow drag. It provides page scrolling or page zooming that depends on configuration.
    It works as follows:

    • It can check swipes in four directions, "up", "down", "left" and "right"
    • It can check pinches "in" and "out"
    • It can detect both single or double finger touch events on device
    • It has click events on the touchSwipe object and also on its child objects
    • It has threshold that can be defined to check when a gesture is a swipe
    • It has swipe events triggered like "start","move","end" and "cancel"
    • It has end event that can be triggered when touch is released, or threshold matches
    • It has swiping and page scrolling by user
    • It can disable user input elements like Button, form, text etc from triggering swipes

    Installation:
    You can add this js file to your project:

    <script type="text/javascript" src="js/jquery.touchSwipe.min.js"></script>

    or run the following command to install:
    NPM

    npm install jquery-touchswipe --save

    Bower

    bower install jquery-touchswipe --save

    Using Plugin:

    $(function() {
      $("#test").swipe( {
        //Generic swipe handler for all directions
        swipe:function(event, direction, distance, duration, fingerCount, fingerData) {
          $(this).text("You swiped " + direction );  
        }
      });
    
      //Set some options later
      $("#test").swipe( {fingers:2} );
    });

    We can also add only particular handler that is only triggered in a particular direction: swipeLeft, swipeRight, swipeUp, swipeDown, that has passed these arguments; event, direction, distance, duration, fingerCount.
     

    $("#swipe").swipe({
      swipeLeft:function(event, direction, distance, duration, fingerCount) {
        //This only fires when the user swipes left
      }
    });

    Distance Threshold
    threshold is minimum distance, the default is 75px. It is to ensure gesture of swipe. If user has moved the finger less than this threshold then swipe handler will not work.
     

    $("#threshold").swipe({
      swipe:function(event, direction, distance, duration, fingerCount){
        $(this).text("You swiped " + direction + " for " + distance + "px" );
      },
      threshold:100
    });

    You can also restrict swipe according to the touch on 1,2,3 or all fingers.

    $("#fingers").swipe({
      swipe:function(event, direction, distance, duration, fingerCount){
        $(this).text("You swiped " + direction + " with " + fingerCount + " fingers" );
      },
      fingers:'all'
    });

     

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: