jQuery Plug-in: Touch Swipe Events

I have just created a cool little jQuery plug-in that I wanted to share.  This plug-in simplifies detection of touch swipe actions on mobile & touchscreen devices by doing all the heavy lifting for you.  It has parameters to set thresholds for minimum distance the swip must travel as well as minimum time the swipe must take to be considered a swipe event.

Example Usage

Using the plug-in is the same an any other jQuery plug-ing.  Just load jQuery, then load the plug-in and you're ready to use it in your code.

Loading the plug-in

<script type="text/javascript" src="jquery-1.11.0.min.js" />
<script type="text/javascript" src="touch.js" />

Calling the plug-in

<script>
$(document).ready(function(){
  $('#touchsurface').onswipe({threshold:25}, function(event){
    if(event.dir == 'left'){
        //Do something for left swipe
    }else if(event.dir == 'right'){
        //Do something for right swipe
    }
  }
});
</script>

Getting the plug-in

The code is available on the Hazaar CMS Project Snippets website.

Leave a reply

Fill in your details below or log in: