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.
Subscribe to:
Post Comments (Atom)
great!!! thanks a lot!!!!!!!!!!
ReplyDeletehow do i make jquery mobile 'swiperight' transition content from the left ?
ReplyDeleteSuper nice to have this! Thanks for sharing!
ReplyDeleteNice, but haven't managed to get it to work on Safari desktop; whereass the swipe does.
ReplyDelete<div class="hi >
ReplyDeletehere my swipe Content.....
</div>
How can i use this script in my coding
Hey there, I tried adding your code to my project but it keeps returning "Uncaught TypeError: Object [object Object] has no method 'swipedown'"
ReplyDeleteAny 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');
});
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.
ReplyDeleteIs there a demo of this working anywhere?
Aha! Got you, cryptic jQuery Mobile!!!
ReplyDelete$("body").live('swipeup',function() {
alert("swiped up");
});
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.
ReplyDeleteAny idea?
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 :).
ReplyDeleteThank your for your great work :)!!!
I have the same problem, can you help me? What am I doing wrong?
DeleteAmazing, works perfect. This should be included with the jquery mobile base.
ReplyDeleteHey can u plz send me example what you have done
Deletethank you
ReplyDeleteHello, sounds all great. Is there a live working example somewhere?
ReplyDeleteIt's not working for me right now.
Hello guy....
ReplyDeleteHow Do I use this exemple with swipeleft and swiperight?
hi there,
ReplyDeletetried 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
Hi,
ReplyDeleteWhere am I supposed to put the code? I can't figure it out.
Thanks
noob coding
ReplyDeleteThis 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:
ReplyDelete$("#PullTab").live('swipedown',function() {
alert("Swiped Down");
});
Hi,
ReplyDeleteHow do I use this? Is there any demo?
is this working with the latest jquery mobile 1.1.0?
ReplyDeleteYes, I'm using it with jqm 1.1.0; it works fine.
Deletei use this function, and its work fine for swipeup and swapdown.
ReplyDeletebut my overflow in list not working.
have you the suggestion?
This is fantastic stuff!!!!
ReplyDeletenice! thank you!
ReplyDeletewhere I have to use this code to work swipe up and down?
ReplyDeleteI had problem using this snippet as a separate js file, so -
ReplyDelete1. 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 :-)
Awesome, thanks a lot!
ReplyDeleteI was actually surprised this functionality isn't availble in jQueryMobile.
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.
ReplyDeleteI 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?
this script doesn't work on mobile android and iphone...
ReplyDeleteHi there, I'm wondering what sort of license you use for code on your site. MIT to match jQuery?
ReplyDeleteThere is no license on code placed directly in one of my blog entries. Use however you wish.
DeleteUnless a license is otherwise specified of course.
DeleteVery easy to use. Thanks so much.
ReplyDeleteFor 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.
very useful, is this compatible with phonegap
ReplyDeletei have the same question with you?
DeleteWill this still work with JQM 1.4?
ReplyDeletei placed js file after jqm 1.4.2 file but only run left and right event, up and down still not run,
ReplyDeleteplease help me.
my issue was resolved. thanks
ReplyDeleteGreat
ReplyDelete$( ".img_main_wrapper_overview").on( "swipeupdown", swipebtmHandler );
function swipebtmHandler(event){
alert('Done');
}
Thank you , You are grate ;)
ReplyDeleteThanks for finally talking about > %blog_title% < Liked it!
ReplyDeleteAny one can suggest me how we intialise for this particular "div" for swipeup and swipedown.Thanks in advance
ReplyDeleteHi,
ReplyDeleteHow do I use this? Is there any demo?
BetMGM Casino App: Download Android App for $50
ReplyDeleteThis 남원 출장샵 simple, 광명 출장안마 legal mobile gambling app is powered by the BetMGM 상주 출장안마 platform. The Android version of the app is easy to download, while 하남 출장안마 the 전라남도 출장마사지 desktop version is
Thank You and that i have a super proposal: Who Repairs House Windows Near Me home renovation contractors near me
ReplyDelete