About Me

My photo

one who looks outside, dreams
one who looks inside, awakens!!

Get FREE updates!! subscribe!!

Delivered by FeedBurner

Like it? Follow up!! :)

Oct 12, 2013

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.ofcourse, we can work around the same example in regular browsing as well...

First , you need to download and add jquery mobile kit , 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, am using 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 a 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 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();
    });

pretty simple ha? , feedback are welcome..

Please subscribe for more cool code.

check out other links for cool stuff.... :)