Question

I’m loading a CSS file dynamically using a little bit of randomization:

 var cookie = $.cookie('necgroupcolour', { path: '/' });

    if (cookie == null) {
        var rnd = Math.floor(Math.random() * 3);

        $.cookie('necgroupcolour', rnd, { path: '/' });
    }

    switch ($.cookie('necgroupcolour', { path: '/' })) {
        case "0":
            $('head').append('<link rel="stylesheet" type="text/css" href="/css/purple/HomeMaster.css" />');
            break;

        case "1":
            $('head').append('<link rel="stylesheet" type="text/css" href="/css/blue/HomeMaster.css" />');
            break;

        case "2":
            $('head').append('<link rel="stylesheet" type="text/css" href="/css/green/HomeMaster.css" />');
            break;

        default:
            $('head').append('<link rel="stylesheet" type="text/css" href="/css/purple/HomeMaster.css" />');
    }

This works fine in Firefox, Safari, Chrome, but not in IE8 or lower.

When running this through Fiddler and checking the source you can see that no CSS file is getting loaded.

Any ideas how I could solve this?

Answer 1

Maybe try put this code in head and use document.write. ugly, but will work….