How to change transition effect based on android version?

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!

score 2 · Accepted Answer · edited May 23 '17 at 12:12

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

score 0 · Answer 2 · answered Apr 17 '12 at 14:37

I am wondering if Jasper or Nelson actually tried Jasper's solution. I had the same problem today and I still have it, because I run into this fundamental problem:

You can only set the data-transition attribute dynamically in the mobileinit event, because (as it seems) once jQueryMobile has dolled up all your pages, you can change the data-transition attribute all you want but it won't have any effect.
Setting attributes only makes sense once all elements have been loaded, so you need to bind with $(document).ready(), but this event fires way after mobileinit.

So with these two problems in place, there seems to be no solution possible other than hacking into jQueryMobile code. Or am I missing something?

How to change transition effect based on android version?

2 Answers2