Question

I have some jQuery that sets the height and width of various divs.

jQuery(document).ready(function($) {
    var h = $(window).height();
    var w = $(window).width();
$('.slide') .css({'height': h});
$('.slide') .css({'width': w});
}); 

This has worked fine until recently i added a script to load userAgent specific css files, one for iPad, Android, and everything else. For some reason the two scripts wont run together. I can have EITHER the correct sized div, OR a multi platform website.

if(navigator.userAgent.match(/iPad/i)) {
document.write("<link type=\"text\/css\" *etc*>");}

else if(navigator.userAgent.match(/android/i)){
document.write("<link type=\"text\/css\" *etc*>");}

else {
document.write("<link type=\"text\/css\" *etc*>");
}

Any reason this last bit of script is stopping the first one from running?

Answer 1

My guess would be the following.

The jQuery.ready() function is called as soon as the dom structure is fully loaded, but before any external stylesheets are loaded. This means that there is a potential race condition between the code loading and applying the stylesheet and the code modifying the css.

You might try to call this fragment in the jQuery.onload().

var h = $(window).height();
var w = $(window).width();
$('.slide') .css({'height': h});
$('.slide') .css({'width': w});