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

Popular posts from this blog

monitor web browser programmatically in Android? -

Shrink a YouTube video to responsive width -

wpf - PdfWriter.GetInstance throws System.NullReferenceException -