Swipe detection for android-ipad device using jQuery mobile

Caution: Audio may begin with Music!!

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 on method instead if live, which needs to be swapped for. Here, I am using the body element itself. Use jquery’s swipeleft and swiperight event 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 iPad, then here is 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.

Click to rate this post!
[Total: 2 Average: 5]
Shares

Recommended Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Pin It on Pinterest

Shares