swipe transition changepage jquery mobile -
i have problem jquerymobile, search answer many hours , nothing works :(
i have power making swipe left or right move next or previous item.
the above code works fine after while becomes insane.
i'm on "section a", swipe right , "section b", swipe left return "a", swipe right again , go "c" , once on "c" if swipe again carousel connects
i pass page c a, go b returns c etc ... , after decade of change, stops on page , swipe more effect totally crazy scrolling display
the next , prev urls
in html
<div data-role="page" data-dom-cache="false" class="actus-page" id="news" data-theme="a" data-next="http://wip17.kenjidev.com/n/39409" data-prev="http://wip17.kenjidev.com/n/39423" data-title="la vitalité de la traduction, levier décisif de la diversité éditoriale">
if put line loadpage, charge has infinite ajax pages (there on 50 000 items ..)
and js
$( document ).on( "pageinit", "[data-role='page'].actus-page", function() { var page = "#" + $( ).attr( "id" ), next = $( ).jqmdata( "next" ), prev = $( ).jqmdata( "prev" ); if ( next ) { //$.mobile.loadpage( next + ".htm" ); $( document ).on( "swipeleft", page, function() { console.log(next +' : ' + page + ' : ' + prev ); $.mobile.changepage( next , {transition: "slide"}); }); } if ( prev ) { $( document ).on( "swiperight", page, function() { console.log(prev +' : ' + page + ' : ' + next ); $.mobile.changepage( prev, { transition: "slide" , reverse: true } ); }); } });
thanks help
edit : solved
thanks omar help
finnally here code solve problems:
$( document ).on( "pageinit", ".actus-page", function() { var $page = $(this), page = "#" + $page.attr( "id" ), next = $page.jqmdata( "next" ), prev = $page.jqmdata( "prev" ); if ( next ) { $page.on( "swipeleft", function() { $.mobile.changepage( next , {transition: "slide"}); }); } if ( prev ) { $page.on( "swiperight", function() { $.mobile.changepage( prev, { transition: "slide" , reverse: true} ); }); }});
if each page has id, use below code navigate between pages in dom dynamically.
$(document).on('swipeleft swiperight', function (event) { if(event.type == 'swiperight') { var prevpage = '#' + $.mobile.activepage.prev('div[data-role="page"]')[0].id; $.mobile.changepage(prevpage, { transition: 'slide', reverse: true }); } if(event.type == 'swipeleft') { var nextpage = '#' + $.mobile.activepage.next('div[data-role="page"]')[0].id; $.mobile.changepage(nextpage, { transition: 'slide', reverse: false }); } });
Comments
Post a Comment