Jquery Mobile code for Flickering Navigation with PhoneGap

Question

I believe this post is the resolution to my trouble Flickering when navigating between pages . Specifically:

$(document).bind("mobileinit", function()
{
   if (navigator.userAgent.indexOf("Android") != -1)
   {
     $.mobile.defaultPageTransition = 'none';
     $.mobile.defaultDialogTransition = 'none';
   }
});

I am coming from the C# world and pretty much clueless as to jQuery mobile. I would like to add this snippet but not sure where. If it matters I think that I would add it to jquery.mobile-1.1.0.rc.1.js but then I don't know where in there, If that's the right file.

Answer 1

This code must be run after you include jQuery Core and before you include jQuery Mobile. The reason is that to run the code, jQuery must be present, but this event handler needs to be bound before jQuery Mobile initializes.

For example:

<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script>
$(document).bind("mobileinit", function()
{
   if (navigator.userAgent.indexOf("Android") != -1)
   {
     $.mobile.defaultPageTransition = 'none';
     $.mobile.defaultDialogTransition = 'none';
   }
});
</script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>

Documentation: http://jquerymobile.com/demos/1.1.0/docs/api/globalconfig.html

Also, the UA sniffing isn't necessary because jQuery Mobile tests the device for CSS 3D transform support and only uses the nice transitions on devices that support them. This is done for you in jQuery Mobile 1.1.0+, but the default fallback transition is fade so you'd have to change that default anyway.

Defining fallback transitions for non-3D support

By default, all transitions except fade require 3D transform support. Devices that lack 3D support will fall back to a fade transition, regardless of the transition specified. We do this to proactively exclude poorly-performing platforms like Android 2.x from advanced transitions and ensure they still have a smooth experience. Note that there are platforms such as Android 3.0 that technically support 3D transforms, but still have poor animation performance so this won't guarantee that every browser will be 100% flicker-free but we try to target this responsibly.

The fallback transition for browsers that don't support 3D transforms can be configured for each transition type, but by default we specify "fade" as the fallback. For example, this will set the fallback transition for the slideout transition to "none":

$.mobile.transitionFallbacks.slideout = "none"

Source: http://jquerymobile.com/demos/1.1.0/docs/pages/page-transitions.html

As a general observation I noticed that you put the if/then statement inside the event handler, you might as well put it outside so if it isn't an Android device the event binding/firing never has to occur.

For example:

<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script>
if (navigator.userAgent.indexOf("Android") != -1)
{
    $(document).bind("mobileinit", function()
    {
      $.mobile.defaultPageTransition = 'none';
      $.mobile.defaultDialogTransition = 'none';
    });
}
</script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>