jQuery Mobile: Use same header footer for all pages

Question

I\'m trying to implement some code that will create the headers and footers on all of my web pages instead of hard coding them. I tried this:

I had this in my \"main pag

Answer 1

Credit goes to mariachi.

http://forum.jquery.com/topic/jquery-mobile-fixed-header-and-footer-on-page-transition

I am just pasting his solution.

1.) Wrap your data-role="header" and put the id="constantheader-wrapper".

Mobile sidor

Use a div if you want to in the header wrapper, but try to have the full rendered header output like in this case, else it will loose the styling when you reload a page. NOTE! Put the header in your first page, then this method just add the header html to all the other pages.

2.) Put the function in file or inline script:

jQuery.fn.headerOnAllPages = function() {
    var theHeader = $('#constantheader-wrapper').html();
    var allPages = $('div[data-role="page"]');

    for (var i = 1; i < allPages.length; i++) {
        allPages[i].innerHTML = theHeader + allPages[i].innerHTML;
    }
};

3.) Call the function from document ready, for example:

$(document).ready(function() {
    $().headerOnAllPages();
});