JQuery Mobile Fixed Toolbar and Footer Bar disappears?

Add data-tap-toggle="false" to the element

or

Add this to Javascript

$("[data-role=header]").toolbar({ tapToggle: false });

Older versions of jQuery use .fixedtoolbar().

jQuery Mobile Docs - Events


I had problems with jquery mobile iscroll in my project. Perhaps some of the libraries I was using were interfering with each other (I am using knockout and jquery.templates along with a bunch of other things). A solution that worked for me was the jquery mobile scrollview. Demos can be viewed here.

http://jquerymobile.com/test/experiments/scrollview/

And the code is here

https://github.com/jquery/jquery-mobile/tree/master/experiments/scrollview/

you need to include

  • jquery.easing.1.3.js
  • jquery.mobile.scrollview.js
  • jquery.mobile.scrollview.css
  • scrollview.js

I've used this recently on a jquery mobile project and it works really well on iphone 3gs. On my old android HTC magi, it doesn't work that well but none of jquery mobile works well on that device. Note that the scrollview is under experiments and has not been added to the main jquery mobile project.

If you have no luck with iScroll or jquery mobile scrollview, the wink toolkit is another option.

http://www.winktoolkit.org/tutorials/119/

Like iScroll, I was not able to get this to work with my particular project but I don't think I really tried that hard.


<div data-role="footer" data-tap-toggle="false"
     data-theme="c" id="footer" data-position="bottom" >
    <h4 align="center" >copyright 2012 @KoshWTF</h4>
    <p>&nbsp;</p>
</div> 

P.S you can do that for the header as well if you got any problems with it as well. cheers