Take the 2-minute tour ×

I am trying to develop an iPhone app using PhoneGap and jQuery Mobile. This app has a Fixed Footer.

The main problem I'm facing right now is that the built-in page transition changes THE WHOLE PAGE, requiring me to copy/paste the footer code in every page.

Obviously, this is not the way to do it. Any small change in the footer has to be duplicated 10+ times (for 10+ pages).

My question is as follows: how can I load just the "content" part of the page (with a slide transition) so I wont have to have to footer code in all of my pages?

share|improve this question
add comment

2 Answers

up vote 5 down vote accepted

That functionality is not yet available in jQuery Mobile. You can turn on the touchOverflowEnabled option for "real" fixed-footers and fixed-headers on iOS 5 devices but not for any other devices.

In order to achieve true fixed toolbars, a browser needs to either support position:fixed or overflow:auto. Fortunately, this support is coming to mobile platforms so we can achieve this with web standards. In jQuery Mobile, we have added a global feature called touchOverflowEnabled that leverages the overflow:auto CSS property on supported platforms like iOS5. When enabled, the framework wraps each page in a container with it's own internal scrolling. This allows us to position the toolbars outside the scrolling body so they truly stay fixed in place at all times.

Source: http://jquerymobile.com/demos/1.0/docs/toolbars/bars-fixed.html

You can however setup your footers in a programmatic manor rather than hard-coding each page:

//bind an event handler to the `pagecreate` event for all `data-role="page"` elements
$(document).delegate('[data-role="page"]', 'pagecreate', function () {

    //append a footer to this page (`pagecreate` is only called once per page added to the DOM so you don't have to worry about appending multiple footers to a single page
    $(this).append('<div data-id="my-fixed-footer" data-position="fixed" data-role="footer">{THE HTML FOR YOUR FOOTER GOES HERE}</div>');

Here is a demo: http://jsfiddle.net/vNqaG/ (Notice there are no hard-coded footers in the HTML pane)

share|improve this answer
add comment

If you're using a database in the web application, you can simply add the footer html into the database and load it with PHP every page. You'd have to hard-code the PHP into every page at first, but after that all it takes to change the footer is just a quick editing of the database. Look up MySQL/PHP.

share|improve this answer
Storing HTML in the database is not a good idea. A database is for data, not an HTML view. Over time, this can create a mess that is difficult to maintain because your different concerns are not separated and compartmentalized. –  ROFLwTIME Feb 15 '13 at 16:04
add comment

Your Answer


