Search code examples
jqueryjquery-mobilefooter

jQuery-mobile Footer issue, again

I am aware of all the previous questions that asks the exact same thing.

I am not trying to change any original code, or to add any extra style in.

According to this page:

http://view.jquerymobile.com/1.3.0/docs/widgets/navbar/footer-persist-a.php

All I need to do is to copy the code given, and paste it into my HTML.

I done this:

<head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <!-- CSS -->
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
        <!-- CSS end -->

        <!-- Javascripts -->
            <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
            <script type="text/javascript" src="<?php echo base_url('Assets/js/defaults/jquery-mobile.js');?>"></script>
        <!-- Js End -->
    </head>

Here's the HTML

<div data-role="page">
    <div data-role="header">
        <div data-role="navbar">
            <ul>
                <li><a href="#" class="ui-btn-active">One</a></li>
                <li><a href="#">Two</a></li>
                <li><a href="#">Three</a></li>
            </ul>
        </div><!-- /navbar -->  
    </div>

    <div data-role="content">       
        <p>Some Content here</p>
    </div>

    <div data-role="footer" data-id="foo1" data-position="fixed">
        <div data-role="navbar">
            <ul>
                <li><a href="a.html">Info</a></li>
                <li><a href="b.html">Friends</a></li>
                <li><a href="c.html">Albums</a></li>
                <li><a href="d.html">Emails</a></li>
            </ul>
        </div><!-- /navbar -->
    </div><!-- /footer -->

</div>

And the footer is nowhere close to the bottom. It's hanging somewhere in the middle, in fact.

I am using the lastest jquery mobile.

Any ideas? enter image description here

Solution

  • You have to set the data-position="fixed" on your footer container data-role="footer".

    Your code will look like this:

    <div data-role="footer" data-position="fixed">
    <div data-role="navbar">
        <ul>
            <li><a href="#">One</a></li>
            <li><a href="#">Two</a></li>
            <li><a href="#">Three</a></li>
        </ul>
    </div><!-- /navbar -->
    <p style="text-align:center;">I'm the footer</p>
</div><!-- /footer -->

    Here is a working fiddle: http://jsfiddle.net/pV2S4/