New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

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

Comments

Projects
None yet
3 participants
@rsammons

rsammons commented Mar 21, 2012

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="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script> <script> $(function () { $('[data-role=header],[data-role=footer]').fixedtoolbar({ tapToggle: false }); }); </script>

Main

Page 2

Thanks,

@toddparker

This comment has been minimized.

Show comment
Hide comment
@toddparker

toddparker Mar 22, 2012

Contributor

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

Contributor

toddparker commented Mar 22, 2012

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

This comment has been minimized.

Show comment
Hide comment
@rsammons

rsammons Mar 22, 2012

Not a problem Todd, needed something to do during a deployment anyhow. Done and saved
http://jsbin.com/ucuvip/4/

Thanks
Rick Sammonsrick

rsammons commented Mar 22, 2012

Not a problem Todd, needed something to do during a deployment anyhow. Done and saved
http://jsbin.com/ucuvip/4/

Thanks
Rick Sammonsrick

@ghost ghost assigned scottjehl Mar 22, 2012

@scottjehl

This comment has been minimized.

Show comment
Hide comment
@scottjehl

scottjehl Apr 3, 2012

Contributor

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.

Contributor

scottjehl commented Apr 3, 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:

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

@scottjehl scottjehl closed this in 94c0aeb Apr 3, 2012

@rsammons

This comment has been minimized.

Show comment
Hide comment
@rsammons

rsammons 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.

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