Jquery Mobile Sticky Footer

Question

I want a footer in Jquery Mobile, that is not fixed, but is always at the bottom of the page.

Like this: http://ryanfait.com/sticky-footer/ (but in JQuery Mobile), not like like the standard JQuery Mobile Fixed footers.

So the footer should appear at the end of the content, or the bottom of the screen, whichever is lower.

Any ideas on how to approach this?

Edit:

The basic problem, is that I seem unable to get the div with data-role=content to actually take up the full height of the screen.

Hull

What's wrong with the mentioned one? It works fine on my Android phone. – Bimetallism

I'm unable to get that technique to work inside of a JQuery Mobile page. – Hull

I've never used jQuery Mobile so maybe a dumb question: You do create your own HTML pages and CSS to go with the page? Or is everything generated? – Bimetallism

You create your own HTML pages, but, the issue is, there is more than one displayable page within a given HTML page. See here: jquerymobile.com/demos/1.1.1/docs/pages/multipage-template.html – Hull

You should post specific HTML/JS/CSS that you are using. You should also explain what you want to be different from the standard jQuery Mobile fixed footer. The example in the documentation does the same think as the link in your question, you can test by using your developer tools to remove most of the content on this page: jquerymobile.com/demos/1.1.1/docs/toolbars/bars-fixed.html – Planimetry

@Planimetry Its not fixed he's after, but to the end of the page, be the end at where the content is or where the screen ends (like a fixed one). – Bimetallism

Answer 1

Basically you just need to check the height of each data-role="content" elements to make sure that with the header/footer/content-area that the vertical space in the view-port is used.

For example:

$(document).on("pageshow", ".ui-page", function () {
    var $page  = $(this),
        vSpace = $page.children('.ui-header').outerHeight() + $page.children('.ui-footer').outerHeight() + $page.children('.ui-content').height();

    if (vSpace < $(window).height()) {
        var vDiff = $(window).height() - $page.children('.ui-header').outerHeight() - $page.children('.ui-footer').outerHeight() - 30;//minus thirty for margin
        $page.children('.ui-content').height(vDiff);
    }
});​

This code will run each time a page is navigated-to.

Here is a demo: http://jsfiddle.net/aBVtJ/1/

Planimetry

This looks like it will work, however I won't have access to the actual code to test it on until tomorrow – Hull

The only change I had to make was to use 31 instead of 30, to avoid an unnecessary scrollbar in some situations. – Hull

Also, I have set the height of the content to auto before this method, and have the same function called on window resize, in the case of a desktop browser. If anyone is ever interested in my code, I can post it here. – Hull

You may want to run something similar on $(window).resize(), and on $("img").load() – Hull

Answer 2

I solved this using mostly CSS. The advantages of this over the accepted answer is it will handle cases where the page size changes after the page is shown (such as browser resize, orientation change, or even more simple cases like collapsible/accordian sections). It also has much less Javascript code, and no layout math.

CSS:

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

[data-role=page] {
  min-height: 100%;
  position: relative;
}

[data-role=content] {
  padding-bottom: 40px; /* based on how tall your footer is and how much gap you want */
}

[data-role=footer] {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 40px /* this can be configurable, or omitted, as long as the above padding-bottom is at least as much as the height of the footer is */
}

The absolute footer caused jQuery Mobile page transitions to show a flickering footer (particularly the "slide" transitions), so I added this small amount of Javascript:

$(document).live( 'pagebeforechange', function() {
  // hide footer
  $('[data-role=footer]').hide();
});

$(document).live( 'pagechange', function() {
  // show footer
  $('[data-role=footer]').show();
});

Kashmir

I'll give this a try tomorrow, I'm very partial to not using javascript to solve this, right now I listen to a whole bunch of different events, and do the layout math on that, in order to correctly react to orientation changes, window resizings, etc. – Hull

This worked great for me. I just used margin-bottom instead of padding-bottom so I didn't have to increase my content size. – Willhite

I could not get this CSS snippet to work. Perhaps because data-role="content" has been "Deprecated as of 1.4.0 and will be removed in 1.5.0."(api.jquerymobile.com/data-attribute). – Waterfall

Answer 3

Check out this SO:

jQuery Mobile has a native footer that supports a fixed, or 'sticky', position. An example and documentation can be found at http://view.jquerymobile.com/1.3.1/dist/demos/widgets/fixed-toolbars/

Harmony

this is the real solution here – Tenuous