Response title
This is preview!
Move this topic
change pages by swiping left/right/up/down
in jQuery Mobile
•
1 year ago
Hi All,
is it possible with jquery mobile to handle swipe events in all 4 directions (left/right/up/down) ?
What i want to do is swipe may way through a couple of images. Only 1 image per page (fullscreen), swiping left/right gives me the next/previous image (page?), swiping up/down changes the category.
Any pointers in the right direction would be great!
Peter
8
Replies(9)
This is possible.
//on page create for context
<context>.bind("swipeleft", function(){
//navigate to next image
//$.mobile.changePage();
});
<context>.bind("swiperight", function(){
//navigate to previous image
//$.mobile.changePage();
});
jQuery provides the swipeleft and swiperight out of the box. You can handle swipeup and swipedown like i did above by adding the code from the post below.
http://forum.jquery.com/topic/jquery-mobile-swipe-up-down-left-right
//on page create for context
<context>.bind("swipeleft", function(){
//navigate to next image
//$.mobile.changePage();
});
<context>.bind("swiperight", function(){
//navigate to previous image
//$.mobile.changePage();
});
jQuery provides the swipeleft and swiperight out of the box. You can handle swipeup and swipedown like i did above by adding the code from the post below.
http://forum.jquery.com/topic/jquery-mobile-swipe-up-down-left-right
ok. swipeleft content comes in from the right and thats good
how can I make swiperight content come in from the left?
I added to this solution, so it works on any series of "internal" pages in a document (i.e. divs with data-role='page'). It also uses the 'slide' transition and reverses the direction for lef-to-right swipes.
- $('div.ui-page').live("swipeleft", function(){
- var nextpage = $(this).next('div[data-role="page"]');
- // swipe using id of next page if exists
- if (nextpage.length > 0) {
- $.mobile.changePage(nextpage, 'slide');
- }
- });
- $('div.ui-page').live("swiperight", function(){
- var prevpage = $(this).prev('div[data-role="page"]');
- // swipe using id of next page if exists
- if (prevpage.length > 0) {
- $.mobile.changePage(prevpage, 'slide', true);
- }
- });
Leave a comment on blackdynamo's reply
Maybe if you want to have a gallery like page, you can use this page
the paging example is the one I'm thinking its the one you should use.
Regards
Leave a comment on israel.valdez.89's reply
Re: change pages by swiping left/right/up/down
7 months ago
Regarding etherealtim answer... let's say you have 20 data-role="page" divs and you only want 10 of the 20 to be swipable, how would you declare just those 10? I have that problem right now, the swiping works great, but i have some "pages" that I don't want included in the swipe navigation.
Anyone ideas, anyone?
Re: change pages by swiping left/right/up/down
7 months ago
Programmatically.
Specify the transitions you want for specific pages in the code.
Re: change pages by swiping left/right/up/down
7 months ago
Hmm.. not quite sure I get it. I thought I could originally take $(this).next('div[data-role="page"]'); and attach the class that I also have on the div that has the data-role on it. So if I had 20 divs, all with data-role="page" attached, 10 of them had 1 class, and the other 10 had another class, I could differentiate the two int he swipe functions. But, all I got was fail :P Just like my scripting skills :P
Leave a comment on Briggs's reply
Re: change pages by swiping left/right/up/down
4 months ago
In my case the code not worked. I have a doubt where the position of the script inside the html. Can you help please?? Thanks
Leave a comment on gersoncfilho's reply
Re: change pages by swiping left/right/up/down
24 days ago
The code for the left-to-right transition appears to be incorrect.
Rather than this:
$.mobile.changePage(prevpage, 'slide', true);
(which did nothing for me; the transition was still right-to-left, though in response to a left-to-right swipe!)
Do this:
$.mobile.changePage(prevpage, {transition: 'slide', reverse: 'true'});
This worked properly for me.
Rather than this:
$.mobile.changePage(prevpage, 'slide', true);
(which did nothing for me; the transition was still right-to-left, though in response to a left-to-right swipe!)
Do this:
$.mobile.changePage(prevpage, {transition: 'slide', reverse: 'true'});
This worked properly for me.
Leave a comment on dankirshner1954's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic
Reply to praganitsch's question
{"z6081153":[14737000002265195],"z5381035":[14737000002751844],"z4784301":[14737000001663205],"z8251250":[14737000002958289],"z5453061":[14737000002115410],"z19060115":[14737000003327790],"z4771564":[14737000002109207],"z4702480":[14737000001506016],"z2963255":[14737000002752046,14737000002752303]}
Statistics
- 9 Replies
- 23626 Views
- 8 Followers
