Jquery Mobile Persistent Navbar - Flickers

4
votes

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 !

3
jquery-mobile

3 Answers

5
votes

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

1
votes

Same problem here (I was trying to fix it for over 3 hours with no luck trying lots of stuff I found on the web but no luck).

If you remove the entire footer and add a button in the content area the transition works like a charm all of a sudden. So one workaround would be to fake the navbar via buttons from the content area you place at the bottom of the page... Not very pretty though.

<div data-role="content">
<h1>
    Page Nav and Dialog Example
</h1>
<a data-role="button" href="index2.html">Page Navigation</a></div>

I'm using this with a custom-scripting.js:

$(document).bind("mobileinit", function(){
  $.mobile.defaultPageTransition = 'none';
  $.mobile.defaultDialogTransition = 'none';
  $.mobile.useFastClick = true;});

Referencing it via:

<script type="text/javascript" src="jquery-1.8.3.js"></script>
    <script src="custom-scripting.js"></script>
    <script type="text/javascript" src="jquery.mobile-1.2.0.js"></script>

Maybe anyone else found a solution for using navbar without flickering?

0
votes

Without using the navbar in the footer it stops flickering (tested on iPhone4 iOS5). So you can use the footer but don't use navbar inside it :-)

But attention: If you use data-position="fixed" it will start to flicker again...

<div data-role="footer">
    <a data-role="button" href="#">Main</a>
    <a data-role="button" href="favorites.html">Favorites</a>
    <a data-role="button" href="more.html">More</a>
</div>

Hope it helps :-)