Loading CSS with Javascript Safari

Question

I use this code below to load CSS files.

var i, a;
   for(i=0; (a = document.getElementsByTagName("link")[i]); i++){
    if(a.getAttribute("title") == description){
        a.disabled = false;
        if(document.createStyleSheet) {
            try { document.createStyleSheet(a.href); } catch (e) {}
        }
        else {
        alert(a.href);
            var css;
            css         = document.createElement('link');
            css.rel     = 'stylesheet';
            css.type    = 'text/css';
            css.media   = "all";
            css.href    = a.href;
            document.getElementsByTagName("head")[0].appendChild(css);
        }
    }
    else if(a.getAttribute("title") != "default"){a.disabled = true;}
    }

Any reason why this should fail on Safari but works on IE, Chrome and Firefox??

Added:

I'm using:

    <script type="text/javascript">
        $(document).ready(function(){dynamicLayout();})
        $(window).resize(function() {dynamicLayout();})
    </script>

to call dynamicLayout,

and when changing the width of the viewport (safari browser window) it just refuses to switch to the right css file. But works fine in mozilla/ie/chrome....

Sooo, don't know whats going on here. I always get trouble with jsfiddle for some reason, doesn't want to save and sometimes crashes my browser :-/ so sorry about that..

Hope this helps, if not just keep asking and I'll provide as much info as possible! =]

Answer 1

Well, I'm not sure why it isn't switching to the correct CSS file, but in my experience loading/changing CSS files can have a lot of quirks between browsers. IMO this is a much better solution for what it sounds like you are trying to do.

Basically I'm adding a class to the document body that says which width/size/aspect you want the page to use. Then in the CSS you just create multiple styles for few elements that need to change based on size/aspect/etc and prefix those styles with the CSS class they should use. Then you can use just one CSS file, and the transition will be more seamless.

CSS

.wide #myDiv { width: 1000px; }
.tall #myDiv { width: 400px; }

JavaScript

var updateLayout = function(){
    // logic for determining if the page is tall/wide or whatever your CSS selections criteria is based on
    if (wide) {
        $("body").addClass("wide").removeClass("tall");
    } else {
        $("body").addClass("tall").removeClass("wide");
    }
};

$(document).ready(updateLayout)
$(window).resize(updateLayout)

Answer 2

function dynamicLayout(){
var winWidth = $(window).width();
var winHeight = $(window).height();


changeLayout("default");

if (winWidth < 1148){
    changeLayout("thin");
}
if (winHeight < 810){
    changeLayout("tiny");
}
if ((winWidth < 1148) && (winHeight < 810)){
    changeLayout("thintiny");
}

}

function changeLayout(description){ var i, a;

for(i=0; (a = document.getElementsByTagName("link")[i]); i++){ if(a.getAttribute("title") == description){

        a.disabled = false;
        if(document.createStyleSheet) {
            try {document.createStyleSheet(a.href); } catch (e) {}
        }

        else {

            var css;
            css         = document.createElement('link');
            css.rel     = 'stylesheet';
            css.type    = 'text/css';
            css.media   = "all";
            css.href    = a.href;
            document.getElementsByTagName("head")[0].appendChild(css);
        }
    }

    else {
        if( (a.getAttribute("title") != "default") &&
            (a.getAttribute("title") != description)) {

            a.disabled = true;
        }
    }

} }

Code above works great.

Turns out, Safari 5.something had a bug in it which made it impossible to insert css the way using script above. New version came out couple of days ago and now it's working fine =]..

Hope this helps anyone.