JQueryMobile Fading NavBar

Question

Does anyone know how to stop a fixed navbar from fading and exiting with each scroll. I am using jquerymobile 1.0.1 with the following code, but I cannot resist how the navigation bar disappears and disappears:

<div data-role="footer" data-id="foo1" data-position="fixed"> <div data-role="navbar"> <ul> <li><a href="footer-persist-a.html" class="ui-btn-active ui-state-persist">Friends</a></li> <li><a href="footer-persist-b.html">Albums</a></li> <li><a href="footer-persist-c.html">Emails</a></li> <li><a href="footer-persist-d.html">Emails</a></li> <li><a href="footer-persist-e.html">Emails</a></li> </ul> </div><!-- /navbar --> </div><!-- /footer --> 

I do not want the fix to "switch." I would like it to remain 100% visible in 100% of cases. Thoughts?

Answer 1

Good for JQM 1.1, you actually set "tap-toggle" = "false" on the footer.

 <div data-role="footer" data-position="fixed" data-tap-toggle="false"> ... </div> 

I like to do this to disable tapToggle on every page, as well as every fixed toolbar, header or footer:

 $(document).on('pageinit','[data-role=page]', function(){ $('[data-position=fixed]').fixedtoolbar({ tapToggle:false }); }); 

That way, I don’t have to enter the tap-toggle = "false" data again and again.

Then, if you are using JQM 1.0.1:

 $('[data-role=page]').live('pageinit', function(){ $.mobile.fixedToolbars.setTouchToggleEnabled(false); }); 

Answer 2

This is a common complaint among users of JQM 1.0.x. Their developers switched the dynamically positioned behavior that you refer to in their latest version. Starting with JQM 1.1, they use true fixed toolbars that do not disappear. Soon a stable version of JQM should be installed. Until then, you could use version 1.1-rc1

There is one solution in older versions of JQM, but this only works on ios 5:

 $(document).bind("mobileinit", function(){ $.mobile.touchOverflowEnabled = true ; }); 

Answer 3

You can add the data-tap-toggle="true" attribute to the data-role="footer" element to disable the tap-to-fade functionality:

tapToggle boolean

default: true

Enabling or disabling the ability of the user to switch the visibility of the toolbar using click on the screen (or click, for mouse users). This option is also used as a data attribute: data-tap-toggle = "true" "

$ ("[data-role = header]"). fixedtoolbar ({tapToggle: true}); Note. The behavior was previously configured as follows, but from version 1.1 this syntax is no longer supported:

$. mobile.fixedToolbars.setTouchToggleEnabled (false);

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

This should make your toolbar stay in place all the time.