Monday, November 22, 2010

jQuery Mobile - Swipe Up, Down, Left, Right

jQuery Mobile natively provides us with the ability to capture the swipeleft and swiperight. It does not however offer us swipeup and swipedown out of the box. Adapting what the jQuery team has done for swipeleft and swiperight, we are able to create and capture those events in the same manner. See the following code to implement swipeup and swipedown:
Note: I have now moved the plugin to GitHub so if anyone wants to collaborate, they are more than welcome.

39 comments:

  1. great!!! thanks a lot!!!!!!!!!!

    ReplyDelete
  2. how do i make jquery mobile 'swiperight' transition content from the left ?

    ReplyDelete
  3. Super nice to have this! Thanks for sharing!

    ReplyDelete
  4. Nice, but haven't managed to get it to work on Safari desktop; whereass the swipe does.

    ReplyDelete
  5. <div class="hi >
    here my swipe Content.....
    </div>

    How can i use this script in my coding

    ReplyDelete
  6. Hey there, I tried adding your code to my project but it keeps returning "Uncaught TypeError: Object [object Object] has no method 'swipedown'"

    Any ideas here? I would kill for this functionality but writing it myself is a bit out of my league at the moment.

    I'm calling it like this:

    (I tried .swipeup, .swipedown and .swipeupdown)

    $('html').swipeupdown(function() {
    console.log('swipe up, go down');
    });

    ReplyDelete
  7. Sadly I can't get this to work either. I'm using jQuery 1.6.2, and my error console says the swipeup and swipedown functions don't exist. I get the same error if I put this code into its own .js file or include it into the js file calling it. Switching to an earlier version of jQuery (1.4.2) just breaks jQuery Mobile.

    Is there a demo of this working anywhere?

    ReplyDelete
  8. Aha! Got you, cryptic jQuery Mobile!!!

    $("body").live('swipeup',function() {
    alert("swiped up");
    });

    ReplyDelete
  9. Hi, i used your code but it doesn't seem to work on my Samsung Galaxy with Android 2.3.3. It works perfectly on web browser like Chrome (that simulates the mobile environment), but in mobile borwser it doesn't work.
    Any idea?

    ReplyDelete
  10. Ok i reply to myself, i made it work, it was not a problem with your code, i only placed it in the wrong place :).
    Thank your for your great work :)!!!

    ReplyDelete
    Replies
    1. I have the same problem, can you help me? What am I doing wrong?

      Delete
  11. Amazing, works perfect. This should be included with the jquery mobile base.

    ReplyDelete
    Replies
    1. Hey can u plz send me example what you have done

      Delete
  12. Hello, sounds all great. Is there a live working example somewhere?
    It's not working for me right now.

    ReplyDelete
  13. Hello guy....

    How Do I use this exemple with swipeleft and swiperight?

    ReplyDelete
  14. hi there,

    tried the above code but can't get it working. Really need to add a swipe down like in a native app in android or IOS notification

    ReplyDelete
  15. Hi,
    Where am I supposed to put the code? I can't figure it out.
    Thanks

    ReplyDelete
  16. This works great! Thanks so much! I am using jQuery Mobile 1.01 and have this in a js file included after it. Worked first go using:
    $("#PullTab").live('swipedown',function() {
    alert("Swiped Down");
    });

    ReplyDelete
  17. Hi,

    How do I use this? Is there any demo?

    ReplyDelete
  18. is this working with the latest jquery mobile 1.1.0?

    ReplyDelete
    Replies
    1. Yes, I'm using it with jqm 1.1.0; it works fine.

      Delete
  19. i use this function, and its work fine for swipeup and swapdown.
    but my overflow in list not working.
    have you the suggestion?

    ReplyDelete
  20. This is fantastic stuff!!!!

    ReplyDelete
  21. nice! thank you!

    ReplyDelete
  22. where I have to use this code to work swipe up and down?

    ReplyDelete
  23. I had problem using this snippet as a separate js file, so -

    1. downloaded the latest http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.js
    2. searched in the file where following code is
    $.each({
    scrollstop: "scrollstart",
    taphold: "tap",
    swipeleft: "swipe",
    swiperight: "swipe",

    3. right before the $.each() is the code to register for swipeleft and swiperight. So go ahead and add the above code from this blogpost - except the last 12 lines starting from the comment. Add this before the $.each() code in original .

    4. modify the $.each() to also include the swipeupdown events as also shown below -
    $.each({
    scrollstop: "scrollstart",
    taphold: "tap",
    swipeleft: "swipe",
    swiperight: "swipe",
    swipedown: "swipeupdown",
    swipeup: "swipeupdown"
    }, function( event, sourceEvent ) {

    $.event.special[ event ] = {
    setup: function() {
    $( this ).bind( sourceEvent, $.noop );
    }
    };
    });

    5. Thats it!! The up/down swipe now works!

    Thanks to @blackdynamo for the above feature, now the main question is why is it not part of jquerymobile itself :-)

    ReplyDelete
  24. Awesome, thanks a lot!
    I was actually surprised this functionality isn't availble in jQueryMobile.

    ReplyDelete
  25. It actually worked to handle swipeup when I wanted to hide some low priority content, but then moving down and up on the page on iPhone didn't work at all.

    I tried even to disable the binding once the content I want is hidden, and I see it disables it - but it still preventing moving around the page. Didn't mention this on Safari and Mozilla on Desktop in Mobile emulator mode, but on iPhone the page just stays, the only way to go up and down is to swipe with 4 fingers.

    var bannerHidden = false;

    $("#mainpanel").bind('swipeup',function(){
    if (!bannerHidden )
    {
    $("#bannerPanel").trigger( "collapse" );
    bannerHidden = true;
    }
    else
    $("#mainpanel").unbind('swipeup');
    });

    Anybody else has the same issue?

    ReplyDelete
  26. this script doesn't work on mobile android and iphone...

    ReplyDelete
  27. Hi there, I'm wondering what sort of license you use for code on your site. MIT to match jQuery?

    ReplyDelete
    Replies
    1. There is no license on code placed directly in one of my blog entries. Use however you wish.

      Delete
    2. Unless a license is otherwise specified of course.

      Delete
  28. Very easy to use. Thanks so much.

    For those asking how to get his code to work, just copy and paste to a js file. Link to file. use swipeup/swipedown in the same fashion as jQuery mobile's swipe/swipeleft/swiperight.

    ReplyDelete
  29. very useful, is this compatible with phonegap

    ReplyDelete
  30. Will this still work with JQM 1.4?

    ReplyDelete
  31. i placed js file after jqm 1.4.2 file but only run left and right event, up and down still not run,
    please help me.

    ReplyDelete