Question

I have a question that has been viewed, but with no answers or comments on the matter, so I thought I’d try to simplify my question. For those curious about my overall issue, please see the link: Persistent header in jQuery Mobile

Anyways, my question is how can I force the JQM footer to be at the top instead of the bottom? Here’s the code for the JQM footer. It persists fine across page transitions, but it is at the foot of the page and I need it at the head:

<div data-role="footer" data-position="fixed" data-id="navBar" id="navigationBar">
    <img src="images/bgheader.png" />
</div>

I’m already looking into rebuilding it with Sencha, but since I have a deadline of tomorrow, I don’t think that’s possible. This persistent header is the only thing missing at the moment (JQM headers don’t stay when the page transitions for some reason).

Answer 1

I had a similar issue.

In my case I wanted the footer stay exactly in the bottom of the page so I wrapped the footer div into a new div positioned where I need to.

Let the code speak for itself:

<style> 
.footer-wrapper {

    position: absolute;
    bottom: 0px;
    width: 100%;
}
</style>

then

<div class='footer-wrapper'>
    <div data-role='footer' >
        footer content blah blah blah
    </div>
</div>

In this way you can move the footer wrapper freely (as every other normal div, not managed by jQuery Mobile’s css) for example, in your case, you have to delete the bottom: 0px; attribute and change it in top: -header's height-px;

I hope it helps!