Your Customers are Mobile, you will be too …

jQuery Mobile: Dynamic Footer Active Buttons with CSS

This tutorial is a follow on from JQUERY MOBILE: DYNAMICALLY ADD FOOTER OR HEADER TO EVERY PAGE in which we set up our footer so that it loads from a separate file (footer.html). Today we will show you how to set your app up so that even though this footer is being called from an external file we can still have an active state for our navbar buttons. This will done with very little modification to code. Most of the changes we make is in our CSS files only. So if you haven’t already taken a look at the above tutorial so that you have your footer coming in from an external file please do so now then return.

jQuery Mobile Dynamic Footer Active Buttons: The Icons

At the end of the last tutorial we had a footer file that had buttons who’s code should have looked something like this:

<a href="#firstaid" data-theme="a" data-transition="flip" data-icon="firstaid" data-iconpos="top">
 First Aid
</a>

This code as you can see has a custom icon called first aid. So for my app I want all the pages of my jQuery Mobile app that are in this section to display my icon differently to what I have currently set up. So in my CSS file I going to create a new class and call it “.firstaid”. Because I am currently trying to change the icon my new rule will be:

.firstaid .ui-icon-firstaid {

}

This CSS rule is now set up affect anything inside a div or other element with the class of “.firstaid” that also has a class of “.ui-icon-firstaid”. The second class is the custom class used to control my custom icon. This is the element we want to make change. Replace .ui-icon-firstaid with what ever icon you are using. So inside of this rule we make any changes we want to make to the icon.

.firstaid .ui-icon-firstaid {
 background-image:url(../images/firstaidactive.png);
 height: 20px;
 width: 20px;
 background-size:cover;
 -moz-border-radius:0px;
 -webkit-border-radius:0px;
 border-radius:0px;
}

For each icon we have in our bottom navigation we need to make a new class rule for it and the icon that changes. So my next rule might look something this:

.contact .ui-icon-contact {
 background-image:url(../images/contactactive.png);
 height: 20px;
 width: 20px;
 background-size:cover;
 -moz-border-radius:0px;
 -webkit-border-radius:0px;
 border-radius:0px;
}

Make sure you do one for every button you need an active state for. Once you have done this we just need to change the code in our index.html file that calls the footer. Currently it looks like this:

<div data-role="footer" data-position="fixed">
</div>

All we need to do now is give the footer div at the bottom of each page the class of the button we want to be active. So the footer div of all my apps first aid pages would look like this:

<div data-role="footer" data-position="fixed" class="firstaid">
</div>

Now when the footer is called on each first aid page it will see the footer needs to have the .firstaid class applied to it. When it does the icon rule now changes so the CSS will change the image being used for the icon of that button. If I apply the . contact class to a footer:

<div data-role="footer" data-position="fixed" class="contact">
</div>

The contact icon will now change while the first aid icon remains the default.

jQuery Mobile Dynamic Footer Active Buttons: The Backgrounds and Text

First we now need to open the footer.html file. Again we need to find each of these HTML anchor rules:

<a href="#firstaid" data-theme="a" data-transition="flip" data-icon="firstaid" data-iconpos="top">
 First Aid
</a>

For each of our button we need to give them an id. So they should now look like this

<a href="#firstaid" data-theme="a" data-transition="flip" data-icon="firstaid" data-iconpos="top" id="firstaid">
 First Aid
</a>

Each button must have its own individual id. For each of my buttons I have given them an id the same as their class by you can call them whatever you like. So go through all your buttons and give them an id each. Once you have done that what we need to do is create a new CSS rule that will govern the text and backgrounds for each button. This is a simple rule that will look a little like this:

.firstaid #firstaid,
.contact #contact,
{
    color: #060; 
}

From here on in for my app, the text of my active buttons will now turn green. Anything you put in this rule will apply to the active button. So place any background changes etc in this rule. This is the entire active button set up complete. Hope you enjoyed this tutorial and see you again soon.

2 Responses to jQuery Mobile: Dynamic Footer Active Buttons with CSS

  • obviously like your web-site but you need to test the spelling on several of your posts. Several of them are rife with spelling problems and I to find it very troublesome to tell the reality then again I will definitely come again again.

  • Awesome blog thanks for your time.

Leave a Reply

Please buy me a Coffee

Help a starving student to drink more coffee

Follow us on: