Question

I have a page called android.html with a button with an id of “detect”. When you click the button, a script checks to see what OS version you have on your android device by the us header. How would I change the script to apply a style if it is version 3.0 or higher and another style if it is version 2.9 and lower. Here is the hard part…I dont want to apply the css style to the android.html page, but to the playlist.html page that you will redirected to on the click of the button.

html

<div id="detect">button</div>

js

$('#detect').click(function() {
if (/Android (\d+(?:\.\d+)+)/.test(navigator.userAgent)){ 
 var version=new Number(RegExp.$1) 
 if (version>=3)
  //redirect to playlist.html using style1.css
 }
else
 //redirect to playlist.html using style2.css
});

Answer 1

Either append a query-string key/value pair to the redirect that lets the next page know which style-sheet to load, or just check the user-agent string when the next page loads.

$('#detect').click(function() {
    if (/Android (\d+(?:\.\d+)+)/.test(navigator.userAgent)){ 
        var version=new Number(RegExp.$1) 
        if (version>=3)
            window.location = 'playlist.html?style=1';
        } else {
            window.location = 'playlist.html?style=2';
        }
    }
});

Then on the playlist.html page:

if (window.locaion.search.indexOf('style=1') > -1) {
    $.getScript('style1.css');
} else if (window.locaion.search.indexOf('style=2') > -1) {
    $.getScript('style2.css');
}

This if/then check is pretty simple. A better way to do it would be to get the query-string parameters in an array, check for the style key, then load the corresponding value.