Navigate to Next Page on a template

[Bad Addy]

How would I set a template up, so when you swipe either left or right, the next page in the list shows, and the page before the current page shows ?

[Evgene Karachevtsev]

Hello Addy,

Could you please specify, what do you mean with "next page in the list"? What list of the pages are talking about?

[Bad Addy]

I have this code, but I cannot make it change the page to the next page in the stack or the previous one:

precode
$(document).on("swipeleft", '[name=mobilecontainer4]', function () {
console.log('swipe next page');
var nextpage = $(this).next('div[data-role="page"]');
if (nextpage.length > 0) {
$.mobile.changePage(nextpage, "slide", false, true);
}
});
$(document).on("swiperight", '[name=mobilecontainer4]', function () {
console.log('swipe last page');
var prevpage = $(this).prev('div[data-role="page"]');
if (prevpage.length > 0) {
$.mobile.changePage(prevpage, {
transition: "slide",
reverse: true
}, true, true);
}
});
/codepre

Any ideas ?/pre/pre

[Bad Addy]

I have debugged this and here is the code that works:

precode
$(document).on('swipeleft swiperight', function (event) {

Code: Select all

 //Check current page id 
 var activePage = $.mobile.pageContainer.pagecontainer("getActivePage"); 
 //Get div (page) id 
 activePage = activePage.attr('id'); 
 //Get number of page ie page1, page2, page3 page4 etc 
 var activePageNo = activePage.slice(4); 
 //Get current full URL 
 var activeURL = $(location).attr('href'); 
 //Remove div (page) ref from url 
 activeURL = activeURL.substr(0,activeURL.indexOf("#")); 

 //Set up new numbers for next and prev swipes 
 var np = parseInt(activePageNo)+1; 
 var pp = parseInt(activePageNo)-1; 
 //Set full div (page) ids  
 var prevPage = ''; 
 var nextPage =  'page' + np; 
 if(activePageNo > 0) { 
     prevPage = 'page' + pp; 
 } else { 
     prevPage = 'page0'; 
 } 

 if (event.type == 'swipeleft') { 
    if (nextPage) { 
        $.mobile.pageContainer.pagecontainer("change", activeURL + '#' + nextPage, { 
            transition: "slide" 
        }); 
    } 
 } 

 if (event.type == 'swiperight') { 
     if (prevPage) { 
         $.mobile.pageContainer.pagecontainer("change", activeURL + '#' + prevPage, { 
             transition: "slide", 
             reverse: true 
         }); 
     } 
 } 

});

/code/pre

This is using a template, and pages that appear in the work area. This code will work beyond mobile jQuey 1.5. changePage and activePage no longer work in 1.5.

NOTE: you need to ensure in App Settings :
Render all pages in one HTML file (jQuery Mobile multi-page template) IS ticked

[Alena Prykhodko]

Thank you for sharing the solution.