Question

I have an issue with Jquery mobile persistent navbar. I am developing a mobile app using phonegap to deploy on iOS and Android. I have a navbar to navigate from one page to another. (footer/navbar fixed).

Example on: http://jquerymobile.com/demos/1.2.0/docs/toolbars/footer-persist-a.html

The navigation works, the bar persists when rendered in a browser such as chrome or safari. But when I upload the app to the Android emulator or iOS emulator, clicking a link from the navbar makes the whole screen go white for a sec and then re-appears. (Kind of a flicker)

Can someone help with this?

Here’s my code for the footer: (a.html,b.html… are the name of my pages)

<div data-role="footer" data-id="foo1" data-position="fixed" data-tap-toggle="false">
    <div data-role="navbar">
        <ul>
            <li><a href="a.html" data-prefetch data-transition="slideup" class="ui-btn-active ui-state-persist" rel="external">Info</a></li>
            <li><a href="b.html" data-prefetch rel="external" >Friends</a></li>
            <li><a href="footer-persist-c.html" data-prefetch="true">Albums</a></li>
            <li><a href="footer-persist-d.html" data-prefetch="true">Emails</a></li>
        </ul>
    </div><!-- /navbar -->
</div><!-- /footer -->

Thank you !

Answer 1

I figured it out. It’s a combination of what you said and what I had.

So to stop the Jquery mobile footer from flickering when you upload to Android or iOS, you need to set the following properties in your div:

page1.html:

<div data-position="fixed" data-tap-toggle="false" data-role="footer" data-id="f1">
    <a href="page1.html">Page 1 NAV</a>
    <a href="page2.html">Page 2 NAV</a>
</div>

page2.html

<div data-position="fixed" data-tap-toggle="false" data-role="footer" data-id="f1">
    <a href="page1.html">Page 1 NAV</a>
    <a href="page2.html">Page 2 NAV</a>
</div>

The data-id=”f1″ has to match in both pages so that jquery mobile knows that this is the same footer that was on the previous page therefore it won’t render it again.

Let me know if you need help with this.
Regards,
Tony