Multi Page Head and Footer (fixed) with tapToggle: false #3875

rsammons opened this Issue Mar 21, 2012 · 5 comments


None yet

3 participants


First off Great Job. I think you have an excellend product and I'm using both on my personal project and for mobile project at work.

But.. Always a but.. I recently added a second page with fixed header and footer.. I had already set the tapToggle to false at start up for the first page. Anyhow when I navigate to the second page I noticed the footer was missing, but if I refreshed the page it would appear. After repeating the error and searching the html element, I noticed that the class ui-footer-fixed is getting assigned to the header. If I refresh teh page I see that the header gets assigned (correctly) ui-header-fixed. But if I then navigate back to the first page the fixed header on that page is now assigned the class ui-footer-fixed. When each of the headers is assigned ui-footer-fixed it obviously has some display issues. I've been able to recreate this and here is the html.

<title></title> <script src=""></script> <script src=""></script> <script> $(function () { $('[data-role=header],[data-role=footer]').fixedtoolbar({ tapToggle: false }); }); </script>


Page 2



Mind creating a test page using latest? Pasting code into the issue isn't formatted correctly (you can wrap code blocks in ``` for better formatting).

Template here:


Not a problem Todd, needed something to do during a deployment anyhow. Done and saved

Rick Sammonsrick

@scottjehl scottjehl was assigned Mar 22, 2012

Hi @rsammons

I took a look at your demo and fixed things up to be more inline with how we'd recommend doing this.

Basically, when each page is created, the page plugin is going to auto-init any toolbars that page contains, so you don't need to call fixedtoolbar() on anything yourself. Instead, you can bind to mobileinit and set the global tapToggle option to false.

Here's the head of your page with that in place:

   <script src=""></script>
    $(document).bind( "mobileinit", function () {
     $.mobile.fixedtoolbar.prototype.options.tapToggle = false;
   <script src=""></script>

Here's a demo showing that working:

That said, I think what was going on before was that the toolbars in the second page were being initialized before their parent page, and as a result, you were seeing some unexpected results. I'll look into that further, but the above solution should get you what you need.

@scottjehl scottjehl pushed a commit that closed this issue Apr 3, 2012
scottjehl check the data role to see if it's a header or footer, not the class …
…from the page sections plugin. This allows for a looser order of calling the page sections and fixedtoolbar plugins on an element, which is a small improvement, and fixes #3875 in the process.
@scottjehl scottjehl closed this in 94c0aeb Apr 3, 2012
rsammons commented Apr 3, 2012

Actually that binding to mobileinit was never firing, what seems to have corrected it was the static setting data-position="fixed".

I can work with that, but this page says to use a selector to set the property and it seems that setting the property dynamically still causes the issue to happen.

Thanks for the work around, like I said. I can work with that for now.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment