Geek Answers Handbook

JQuery Mobile and fixed footer

I have a jQuery mobile app wrapped in PhoneGap. I am trying to use a fixed footer and header and have some problems with the footer. If I have content with an length of X, and then after clicking the content is smaller, the footer will move up and not stick to the bottom of the screen. If I click on the screen, it will return to its place.

Any ideas why this is happening?

My footer:

<div data-role="footer" data-position="fixed" data-id="footer_main"> <div data-role="navbar"> <ul class="navbar"> <li><a href="#home" data-icon="home" class="search">Home</a></li> <li><a href="#bycity" data-icon="search" class="search2">City</a></li> </ul> </div><!-- /navbar --> </div><!-- /footer -->

This problem will happen on Android and iPhone in much the same way (iPhone, perhaps even more).

BTW - I am using jQuery mobile "jquery.mobile-1.0b2" and PhoneGap 1.0

+4
source share
4 answers

Try adding a class to the footer:

 <div class="footer" data-role="footer" .....>

And add the following function to the click event:

 $('.footer').trigger('create');

It should look something like this:

 $('.class').click(function() { $('.footer').trigger('create'); });
0
source

I have a problem too. My navigation is hidden and will be displayed when the user clicks the show-navigation-button.

The problem is that JQM computes and animates for the footer position the instad attribute of using the position: fixed; bottom: 0;

I am sure there is a reason for their choice. But I do not know what it is. And I did not find any function to rearrange the header of the footer. $('.footer').trigger('create') ; .. does not work for me.

0
source

you can set footers at the bottom by adding CSS properties to it.

 bottom:0; position:absolute !important; top: auto !important; width:100%;
0
source

add style = "position: absolute" to the footer as follows:

 <div data-role="footer" data-position="fixed" style="position: absolute">
0
source

More articles:


All Articles