Question

according to jquerymobile page transitions docs the flip effect is only supported in last version of android, how can I make the following button:

<a href="#ngame" data-role="button" data-transition="flip" data-rel="dialog">New game</a>

use the ‘flip’ effect only in android 2.3.4+ and ‘fade’ effect on prior versions ?

I’m using phonegap in my project if that helps.

Thank you!

Answer 1

Step one would be to get the version of the device from the phonegap API (http://docs.phonegap.com/phonegap_device_device.md.html#device.version).

Step two is to parse this into an integer or a float number and use that to decide whether or not to alter the dom:

var android_version = parseFloat(device.version);
if (android_version < 2.3) {
    $.each($('[data-transition="flip"]'), function (index, value) {
        $(value).attr('data-transition', 'fade');
    });
}

You will want to run this after the deviceready event fires as the device.version variable won’t be ready until then. Also, the flip effect will work on earlier version of Android OS, it just looks clunky as all it does it rotate the page like it’s doing a cartwheel rather than a three-dimensional flip.

–> Note: You can also get the Android OS Version number in a webapp by checking the navigator.userAgent string. I found the regex below from another Stackoverflow question: Get Android OS version from user-agent

[;(\s]Android (\d+(?:\.\d+)+)[;)] matched against the navigator.userAgent string gives me the following output:

Android 2.3.3;,2.3.3