Swipe detection for android-ipad device using jQuery mobile

Here is the most simple script to detect the browser swipe feature using jQuery mobile for android and iPad devices. of course, we can work around the same example in regular browsing as well…

First, you need to download or add jquery mobile CDN, to your current page.
You can use the jquery live method to bind the DOM element, as of jquery 1.7 use the “on” method instead of “live”, which needs to be swapped for. Here, I am using the body element itself. Use jquery’s swipeleft and swiperight events to produce the desired effect, like slide transition, etc.. for now, I would just alert when an event occurs.

$('body').live('swipeleft swiperight',function(event){
  if (event.type == "swiperight") {
       alert("swipped right side");       
  }
  if (event.type == "swipeleft") {
        alert("swipped left side");
  }
  event.preventDefault();
});

If you would want the page to be moved to left or right like that of the iPad, then here is an additional code.

$('body').live('swipeleft swiperight',function(event){
  if (event.type == "swiperight") {
      jQuery.mobile.changePage("#page2",{transition:'slide'});       
  }
  if (event.type == "swipeleft") {
      jQuery.mobile.changePage("#page1", {transition:'slide'});
  }
  event.preventDefault();
});

Please share, comment, and subscribe if it was helpful.

You may also read jQuery to export HTML table data into Excel sheet