10

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.

JeffS
  • 2,647
  • 2
  • 19
  • 24
  • What's wrong with the mentioned one? It works fine on my Android phone. – Henrik Ammer Sep 11 '12 at 20:17
  • I'm unable to get that technique to work inside of a JQuery Mobile page. – JeffS Sep 11 '12 at 20:19
  • 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? – Henrik Ammer Sep 11 '12 at 20:30
  • You create your own HTML pages, but, the issue is, there is more than one displayable page within a given HTML page. See here: http://jquerymobile.com/demos/1.1.1/docs/pages/multipage-template.html – JeffS Sep 11 '12 at 20:34
  • 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: http://jquerymobile.com/demos/1.1.1/docs/toolbars/bars-fixed.html – Jasper Sep 11 '12 at 20:47
  • 1
    @Jasper 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). – Henrik Ammer Sep 11 '12 at 20:48

3 Answers3

5

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();
});
Nick B
  • 7,639
  • 2
  • 32
  • 28
  • 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. – JeffS Oct 11 '12 at 00:15
  • This worked great for me. I just used margin-bottom instead of padding-bottom so I didn't have to increase my content size. – Joseph Astrahan Dec 07 '13 at 18:35
  • 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."(http://api.jquerymobile.com/data-attribute). – sealocal Nov 12 '14 at 19:27
4

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/

Jasper
  • 75,717
  • 14
  • 151
  • 146
  • This looks like it will work, however I won't have access to the actual code to test it on until tomorrow – JeffS Sep 12 '12 at 02:39
  • The only change I had to make was to use 31 instead of 30, to avoid an unnecessary scrollbar in some situations. – JeffS Sep 12 '12 at 12:29
  • 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. – JeffS Sep 12 '12 at 13:05
  • You may want to run something similar on `$(window).resize()`, and on `$("img").load()` – JeffS Oct 03 '12 at 14:26
4

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/

Community
  • 1
  • 1
Gelin Luo
  • 14,035
  • 27
  • 86
  • 139