Facebook Style Navigation

[Kapow36]

Thanks Don, I just tested it and it works great.

Also, just a note for anyone else looking at this thread in the future....
None of this will work if you have "Render all pages in one HTML file (jQuery Mobile multi-page template)" selected in the App Settings.

[Maryna Brodina]

Hello! Events do not work because in builder events bind not just to component, but to container (mobilecontainer) also. That's why when it's out of the container - events stop working. The workaround is to bind all events manually (for example on Page Show event):
code$('[name="elemName"]').on({
click: function() {
//here should be code, that you usually paste in builder
}
});/code

where elemName - element name in builder.

[Kapow36]

Thanks, this works as well

[Kapow36]

There's still one thing that isn't working quite right. I've been creating a navigation panel, except whenever I navigate to a new page (after calling the close method on the panel), it glitches out on the next page. The panel on the next page won't call any events and when I close the panel, the panel from the last page opens.

It's a bit hard to describe because the situation is so unique, but in short what happens is that the panel breaks after you use to navigate to a new page.

[Maryna Brodina]

You can create code which will work no matter if you have "Render all pages in one HTML file (jQuery Mobile multi-page template)" checked or not. On page Load event run the following JS:

codevar panel = $(".side_panel");
if (panel.parent().attr('data-role') !== "page") {
var page = panel.parents('[data-role=page]');
panel.detach();

panel.attr({
"data-role":"panel",
"data-position": "left",
"data-display": "push",
"data-theme": "a",
"id": "myCoolestNavPanel"
});
panel.prependTo(page);
page.trigger( "create" );
}/code

Also add events handler (you can add it on Load event too)
code$('[name="elemName"]').off().on({
click: function() {
//here should be code, that you usually paste in builder
}
});/code

[Kapow36]

I just tested it, and this sample code still returns an error when all pages are rendered in one html file
code
Uncaught TypeError: Cannot read property 'options' of undefined
/code

It also gives an error when you navigate to a new page and click on the panel button (which calls the open method)
code
Uncaught Error: cannot call methods on panel prior to initialization; attempted to call method 'toggle'
/code

So far I've been loading my pages with this code...
code
//create panel
var panel = $(".side_panel");
if (panel.parent().attr('data-role') !== "page") {
var page = panel.parents('[data-role=page]');
panel.detach();

Code: Select all

     //set panel attributes 
     panel.attr({  
     "data-role":"panel",  
     "data-position": "left",  
     "data-display": "push",  
     "data-theme": "a",  
     "id": "myCoolestNavPanel"  
     });  
     panel.prependTo(page);  
     page.trigger( "create" );  
     } 

     //if forum item is clicked 
     $('[name="ForumItem"]').off().on({  
     click: function() {  

         $(".side_panel").panel("toggle");//close panel 
         Appery.navigateTo('Forum',{transition: 'slide',reverse: false});//navigate to page 
     }  
     }); 

     //if calendar item is clicked 
     $('[name="CalendarItem"]').off().on({  
     click: function() {  

         $(".side_panel").panel("toggle");//close panel 
         Appery.navigateTo('Calendar',{transition: 'slide',reverse: false});//navigate to page 
     }  
     }); 

     //if directory item is clicked 
     $('[name="DirectoryItem"]').off().on({  
     click: function() {  

         $(".side_panel").panel("toggle");//close panel 
         Appery.navigateTo('Directory',{transition: 'slide',reverse: false});//navigate to page 
     }  
     }); 

     //if admin item is clicked 
     $('[name="AdminItem"]').off().on({  
     click: function() {  

         $(".side_panel").panel("toggle");//close panel 
         Appery.navigateTo('Admin',{transition: 'slide',reverse: false});//navigate to page 
     }  
     }); 

     //if settings item it clicked 
     $('[name="SettingsItem"]').off().on({  
     click: function() {  

         $(".side_panel").panel("toggle");//close panel 
         Appery.navigateTo('Settings',{transition: 'slide',reverse: false});//navigate to page 
     }  
     }); 

/code

... and opening the panel with this...
code
$(".side_panel").panel("toggle");
/code

[doubletake]

Thank you. This works, with one note:

I had to use a different class on each page (e.g. .p1_side_panel, .p2_side_panel, etc.).

[Kapow36]

excellent, that fixed all of my issues, thanks Don and Marina

[Kateryna Grynko]

Hi,

The problem is that start page Load event is executed only one time when you run app. You can try running the code on Page Show event instead, it is executed every time you load the page.

[Kapow36]

I did fix it, but the problem was that I was closing the panel when I navigated to a new page. Apparently navigating to a new page automatically does that so it was unnecessary and was causing issues. Thanks for the response though! You've been awesome with the help!