Search code examples
jquery-mobilefootersticky-footer

jquerymobile image stick to bottom

I want to have an image that stick to the bottom center of the screen. I know I can use <div data-role="footer"> to do it. However the footer has a visible horizontal line on top which I want to get rid off. Any idea how to do it?

Solution

  • The easiest way to do this is to use the built-in jQM footer, which has the data-position="fixed" attribute to make it stick to the bottom. I'm unfamiliar with this horizontal line you say the footer has, but it'll be easy to get rid of just by overriding the default jQM stylesheet. You can view/test-edit the CSS styles using Firebug in Firefox, or the built-in developer tools in any browser.

    It should look something like this:

    .ui-footer {
    /* Use !important to ensure the target style will be overridden! */
    border: none !important; 
}

    And the HTML:

    ... <!-- rest of page -->
<div data-role="footer" data-id="fixedFooter" data-position="fixed" data-tap-toggle="false">
    <img src="path/to/image.png" />
</div>