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

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.