Skip to content
This repository

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

Closed
rsammons opened this Issue March 21, 2012 · 5 comments

3 participants

rsammons Scott Jehl Todd Parker
rsammons

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.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">











Main











Page 2








Thanks,

Todd Parker

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: http://jsbin.com/ucuvip/edit

rsammons
Scott Jehl

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:

<head>
   ...
   <script src="http://code.jquery.com/jquery-1.7.2.js"></script>
   <script>
    $(document).bind( "mobileinit", function () {
     $.mobile.fixedtoolbar.prototype.options.tapToggle = false;
    });          
   </script>
   <script src="http://code.jquery.com/mobile/latest/jquery.mobile.js"></script>
</head>

Here's a demo showing that working: http://jsbin.com/ucuvip/10/

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.

Scott Jehl scottjehl closed this issue from a commit April 03, 2012
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.
94c0aeb
Scott Jehl scottjehl closed this in 94c0aeb April 03, 2012
rsammons

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
Something went wrong with that request. Please try again.