How to keep same header/footer across pages in jQueryMobile?

Question

Is there an easy method to keep the same header/footer while navigating jQueryMobile pages? The only solutions I came across so far relies on injecting it dynamicly on page-change, but this screws up the transitions, and just clones the elements, I need the original.

So is there an officially supported way? I find it strange that I seem the only one struggling with this problem?

Answer 1

The easiest way is to add a "data-id" attribute to the headers and footers on all pages. To make the header/footer "persistent", use the same data-id across all pages.

<div id="page1">
 <div data-role="header" data-id="main-header"></div>
 ...
 <div data-role="footer" data-id="main-footer"></div>
</div>

<div id="page2">
 <div data-role="header" data-id="main-header"></div>
 ...
 <div data-role="footer" data-id="main-footer"></div>
</div>

You'd also want to fix the headers and footers either with css or data-position="fixed".

Hope this helps.

Answer 2

A built in solution for your problem doesn't exist. jQuery Mobile doesn't have a solution that will share a header and footer among loaded pages.

The only thing you can do is dynamical inject them or have them from the beginning. In your case you are doing it at the wrong time. If you want to correctly add a header and footer you need to do it during the correct page event.

A working example: http://jsfiddle.net/Gajotres/xwrqn/

Swipe to change pages and see how it works (I didn't want to bother with adding buttons on every page).

$(document).on('pagebeforecreate', '#article2, #article3', function(){ 
    $('<div>').attr({'data-role':'header','data-theme':'b','data-position':'fixed','data-id':'footer'}).append('<h3>Article</h3>').appendTo($(this));
    $('<div>').attr({'data-role':'footer','data-theme':'b','data-position':'fixed','data-id':'footer'}).append('<h3>Article footer</h3>').appendTo($(this));    
});

If you do it during the pagebeforecreate this will trigger ONLY once when page is created for a first time. Dynamic content will be added and because pagebeforecreate is triggered before content markup is enhanced you will not need to worry about header and footer styling.

Notice a attribute 'data-id':'footer' added to every header and footer, because of it only content will animate during the page transition, header and footer will look the same. Also, jsFiddle has a bug, when you swipe through pages they will jump 1-2px. This will not happen in a real life example.