Manipulate positioning of jQuery Mobile Footer

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).

Solution 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!

Solution 2

In the docs it is stated:

In situations where the footer is a global navigation element, you may want it to appear fixed in place between page transitions. This can be accomplished by using the persistent footer feature included in jQuery Mobile.

To make a footer stay in place between transitions, add the data-id attribute to the footer of all relevant pages and use the same id value for each. For example, by adding data-id="myfooter" to the current page and the target page, the framework will keep the footer anchors in the same spot during the page animation.

PLEASE NOTE: This effect will only work correctly if the header and footer toolbars are set to data-position="fixed" so they are in view during the transition.

So the same applies to the header. Instead of trying to move the footer, fix the header to be persistent.

I found an example here, under Making footers and headers persistent.

Solution 3

I don't think this is possible, at least not by using the JQM footer. The documentation doesn't reveal any attributes you can set which would change the position and JQM is actively managing the position on the <div> itself. It's modifying it directly as something like style='top: -1304px' and it changes values every time you scroll or change screens. So, you can't even change it by modifying the CSS. JQM will always win, since it's modifying the inline styles.

I think the main reason that you're stuck is that JQM is giving you an assumed page layout. Your common navigation controls are supposed to be at the bottom of the screen and the top of the screen should display something different on every page, with possibly a back button. That's how they envisioned it and, thus far, they haven't developed any other layout possibilities.

You may be able to accomplish your goal by taking an entirely different approach, but we'd need a clearer definition of your goal first.

Best of luck to you. Hopefully, your stakeholders like having the fixed elements at the bottom of the screen.

Solution 4

Add the following css to your page or to the bottom of the css file.

Please note I have not tested this code on mobile devices..

 <style type="text/css">
    .ui-header {
        position: fixed !important;
        top: 0 !important;
        z-index: 99;
    }
    .ui-content {
        margin-top: 35px;
    }
</style>

Solution 5

This worked for me.

Inside each page div, include a div with data-role "footer", as below.

<div data-role="page" id="something">
   <div data-role="footer" data-position="fixed" data-id="navFooter" 
      role="contentinfo" style="position:absolute;bottom:0;">
      <div data-role="navbar" role="navigation">
          ...
      </div>
   </div>
</div>

The inline style, in my app, prevented the navbar from being pushed down when content is added to the middle of the page, using something like this:

$('#contentDiv').append('<p>some html</p>');

It's unfortunate that the navbar must be repeated in each page div.

View more solutions