Skip to content
This repository has been archived by the owner on Oct 8, 2021. It is now read-only.

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

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

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

rsammons opened this issue Mar 21, 2012 · 5 comments
Assignees
@scottjehl
Labels
Priority: High
Milestone
1.1

Comments

@rsammons
Copy link

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
Copy link
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

@rsammons
Copy link
Author

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
Copy link

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.

@rsammons
Copy link
Author

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.

@rsammons
Copy link
Author

rsammons commented Apr 3, 2012

http://jquerymobile.com/demos/1.1.0-rc.1/docs/toolbars/bars-fixed-options.html

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

@scottjehl scottjehl

Labels
Priority: High
Projects
None yet
Milestone
1.1
Development

No branches or pull requests
3 participants
@scottjehl @toddparker @rsammons