Your Customers are Mobile, you will be too …

div id page

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. Continue reading

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. Continue reading

Please buy me a Coffee

Help a starving student to drink more coffee

Follow us on: