jQuery Mobile and a fixed footer

I've got a jQuery mobile app wrapped in PhoneGap. I'm trying to use a fixed footer and header and having some trouble with the footer. If I have content with X length and then after a click the content is smaller - the footer would move up and n开发者_如何学Goot stick to the bottom of the screen. If I click on the screen it will go back to its place.

Any ideas why this happens?

My footer code is:

<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 issue would happen on Android and iPhone in pretty much the same way (iPhone maybe even more).

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

Try adding a class to your footer:

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

And add the following function to your click event:

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

Should look something like this:

$('.class').click(function() {

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

});

I have the same problem too. My Navigation is hidden, and will be shown, when user clicks show-navigation-button.

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

Im sure, that there is reason for their choice. But i dont't know what it is. And i found no function for repositioning the footer top-pos. $('.footer').trigger('create'); ..is not working for me.

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

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

add style="position: absolute" to footer div like this:

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