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-

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

Here's how I solved a similar issue:

        $(":mobile-pagecontainer").on("pagecontainerbeforetransition", function (event, ui) {
            $("#header").prependTo(ui.toPage);
            $("#control-panel").appendTo(ui.toPage);
        });

Keeps the same header/footer while navigating jQueryMobile pages. Injects it dynamicly on page-change, screws up the transitions, but doesn't clone the elements, gives the original.

Answer 3

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.