Your Customers are Mobile, you will be too …

In this tutorial we will be teaching you how to add the same header and footer to every page of your jQuery Mobile App from an external file. We will be doing this with just a few simple lines of code and by creating a few small HTML files.

The advantages of handing our header and footer in seperate files should be immediately obvious to most of us. Any changes we make to our header or footer files will change instantly on all of our pages. This saves us a lot of time as our mobile applications get bigger and bigger as a job progresses. We no longer have to hunt down and change every footer or header reference one by one manually.

jQuery Mobile: Dynamically Add Footer or Header to every page

Dynamically load the Footer.HTML file

Our first in creating our new footer is to create the separate file for our footer. Create a new html file and call it footer.html . In the head of this HTML document we need to make sure we have links to all the same sources files as our main index.html uses. This will ensure that there is no confusion and every is using the one set of files.  This will making debugging easier if something goes wrong.

Our HTML file should look something like this.

<head>
   <meta charset="utf-8">
   <title>jQuery Mobile Web App</title>
   <link href="../jquery-mobile/jquery.mobile-1.0a3.min.css" rel="stylesheet" type="text/css"/>
   <script src="../jquery-mobile/jquery-1.5.min.js" type="text/javascript"></script>
   <script src="../jquery-mobile/jquery.mobile-1.0a3.min.js" type="text/javascript"></script>
   <script src="/phonegap.js" type="text/javascript"></script>
</head>

 

Then Inside our body tags of this file we now build everything that goes inside our footer exactly as we would if we were putting it on the bottom of a page. As mine is only going to have a navbar with its own specail class that is what I will put in there.

<body> 

    <div data-role="navbar" data-iconpos="top" class="nav-glyphish-example ui-navbar ui-mini" >
       <ul>
          <li><a href="#home" data-theme="b" data-icon="myhome" data-iconpos="notext"></a></li>
          <li><a href="#drinkslist" data-theme="b" data-icon="recipeslist" data-iconpos="notext"></a></li>
          <li><a href="#random" data-theme="b" data-icon="randomdrink" data-iconpos="notext"></a></li>
          <li><a href="#shopping" data-theme="b" data-icon="shoppinglist" data-iconpos="notext"></a></li>
          <li><a href="#search" data-theme="b" data-icon="mysearch" data-iconpos="notext"></a></li>
       </ul>
    </div>
</body>

notice my only div is the data-role=”navbar” div. We will be using this shortly. Any properties we would normally apply to the navbar div in an index file we apply to this navbar div. Like I have with the data-icon-position property.

Once we have done this we will now save the file as footer.html and return to our index.html file. In the head of our index.html file we are going to paste this simple little snippet of code.

<script type="text/javascript">
   $('[data-role=page]').live('pageshow', function (event, ui) {
      $("#" + event.target.id).find("[data-role=footer]").load("footer.html", function(){
         $("#" + event.target.id).find("[data-role=navbar]").navbar();
      });
   });
 </script>

Each time a page is loaded it will look for a div that is data-role=”footer”. If one is present for that page it will then load the footer.html file. And it will then display the div with the data-role=”navbar”.

So just like any other page with a footer the last div is:

<div data-role="footer" class="nav-glyphish-example ui-footer ui-bar-a" data-position="fixed" id="footerDiv">

</div>

But as you can see we now just leave it empty. All changes to the footer are done the footer.html or else they will simply be over written by this file.

Dynamically Load the Header.HTML file

The process is pretty much the same for the header.html as it was for the footer file.

Again we create a blank html file and save it as header.html. We then ensure the head of this file is the same as it was for our footer.html file.

<head>
   <meta charset="utf-8">
   <title>jQuery Mobile Web App</title>
   <link href="../jquery-mobile/jquery.mobile-1.0a3.min.css" rel="stylesheet" type="text/css"/>
   <script src="../jquery-mobile/jquery-1.5.min.js" type="text/javascript"></script>
   <script src="../jquery-mobile/jquery.mobile-1.0a3.min.js" type="text/javascript"></script>
   <script src="/phonegap.js" type="text/javascript"></script>
</head>

And inside our body tags of this file we create our header as we would normally in the header of the individual pages.

<body>
    <div data-role="header" data-backbtn="false">
        <h1><img src="images/layout/header.png" width="255" height="40" alt="Polytechnic cocktails" align="left">
            <a href="#home" data-rel="back"><img src="images/layout/arrowl.gif" class="myarrow"></a>
        </h1>
    </div>
</body>

Make sure the div inside the body tags that contains your header has the data-role=”header” property in it. Any other properties you want on your header is also able to be applied to this div. Once you have created your header save the file and return to your index.html page. I n the head of your file find the code you added. Should look like this.

<script type="text/javascript">
   $('[data-role=page]').live('pageshow', function (event, ui) {
      $("#" + event.target.id).find("[data-role=footer]").load("footer.html", function(){
         $("#" + event.target.id).find("[data-role=navbar]").navbar();
      });
   });
 </script>

And add this:

$('[data-role=page]').live('pageshow', function (event, ui) {
       $("#" + event.target.id).find("[data-role=header]").load("header.html", function(){
          $("#" + event.target.id).find("[data-role=header]").header();
       });
   });

You should now have this:

<script type="text/javascript">
   $('[data-role=page]').live('pageshow', function (event, ui) {
      $("#" + event.target.id).find("[data-role=footer]").load("footer.html", function(){
         $("#" + event.target.id).find("[data-role=navbar]").navbar();
      });
   });
   $('[data-role=page]').live('pageshow', function (event, ui) {
       $("#" + event.target.id).find("[data-role=header]").load("header.html", function(){
          $("#" + event.target.id).find("[data-role=header]").header();
       });
   });
 </script>

At the beginnning of each page make sure you put your header code and it will now load it dynamically every time a page is loaded.

<div data-role="header" data-backbtn="false">

 </div>

For a further tutorial on how to change the active states on each of your footer buttons please see my Part 2 tutorial

JQUERY MOBILE: DYNAMIC FOOTER ACTIVE BUTTONS WITH CSS

Hope you all found this useful. Feel free to leave comments.

3 Responses to jQuery Mobile: Dynamically Add Footer or Header to every page

  • This seems not working in my end, although I have followed everything. I think.

    • If your cutting and pasting please ensure you did not accidently copy and paste the html from my site with it. This WILL prevent it from working and I have seen it happen a few times for some reason.

      I am looking into what is causing this.

  • hi stephen,
    for it worked for the footer but not for the header. The method .header() does not exists (jqm 1.3.1).
    If found another (crazy?) way for the header
    * create, dinamically, a temporary page including data-role=header tags
    * as soon the tmp page as been generated, I’ve extracted the header and injected it into my target page.

    work fine for now, little bit tricky way to solve the problem.

    In all the case, thanks for your posting.

Leave a Reply

Please buy me a Coffee

Help a starving student to drink more coffee

Follow us on: