Geek Answers Handbook

JQuery Mobile Persistent Navbar - Flicker

I have a problem with jQuery mobile persistent navigator. I am developing a mobile application using phonegap for deployment on iOS and Android. I have a navigator to go from one page to another. (footer / navigator is fixed).

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

Navigation works, the panel is saved when rendered in a browser such as chrome or safari. But when I load the application into the Android emulator or iOS emulator, clicking the link on the navigation bar makes the whole screen white for a second, and then appears again. (Type of flicker)

Can anyone help with this?

Here is my code for the footer: (a.html, b.html ... is 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 -->

Thanks!

+4
source share
3 answers

I get it. This is a combination of what you said and what I had.

So, to stop the jQuery footer from loading when loading on 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>

Data-id = "f1" must match on both pages so that jquery mobile knows that this is the same footer that was on the previous page, so it won’t display it again.

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

+5
source

The same problem here (I tried to fix it for more than 3 hours, no luck, I tried a lot of things that I found on the Internet, but no luck).

If you delete the entire footer and add a button in the content area, the transition suddenly works like a charm. Thus, one way would be to fake the navigator through the buttons from the content area that you place at the bottom of the page ... Not very nice though.

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

I use this with custom-scripting.js:

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

Link to it through:

 <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 someone else found a solution for using navbar without flickering?

+1
source

Without using the navigation bar in the footer, it stops flickering (tested on iPhone4 iOS5). That way you can use the footer but not use the navbar inside it :-)

But note: 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 this helps :-)

0
source

More articles:


All Articles