Jquery length not working on IE8

Question

Why I´m doing it wrong? It is not loading the amin.css and not even removing the adminNotes.css

if(($(".AdminNoteContainer").length <= 0)){
         $("head").append($('<link rel="stylesheet" href="css/main.css" />'));
         $('head *[href*="css/adminNotes.css"]').remove();
    };

That should work, but why not just `if ( ! $(".AdminNoteContainer").length ){...` — adeneo, Sep 13 '13 at 18:16
See this answer: http://stackoverflow.com/a/1184960 IE is such a horrible browser that appending (or possibly removing) a `` tag doesn't affect the page. You need to use the (IE ONLY) `document.createStyleSheet` to load in your new CSS. As for removing an old stylesheet, I'm not sure if you can. — gen_Eric, Sep 13 '13 at 18:18
possible duplicate of [Dynamically loading css stylesheet doesn't work on IE](http://stackoverflow.com/questions/1184950/dynamically-loading-css-stylesheet-doesnt-work-on-ie) — adeneo, Sep 13 '13 at 18:19
Class names are case sensitive, make sure they match exactly. — nullability, Sep 13 '13 at 18:20
Nooo it;'s not duplicate.. Please tell me that you validated your css against http://jigsaw.w3.org/css-validator/ To me it seems like your css are not upto the mark and browser does not recognize it as css — Akshay Khandelwal, Sep 13 '13 at 18:21
@AkshayKhandelwal - of course it is, the OP's syntax for appending stylesheets doesn't work in IE8 — adeneo, Sep 13 '13 at 18:22

score 3 · Answer 1 · answered Sep 13 '13 at 18:29

Your problem is not with the .length (though I don't know why you have <= 0, you can just simply do === 0 or even better if(!$(".AdminNoteContainer").length)), it's with how you're appending the CSS.

IE 8 (and even 9 I think) doesn't let you append <link> tags after the page is rendered. You need to use an IE specific method to add CSS. document.createStyleSheet.

I like to make a getStyleSheet method that will check for the right method of appending CSS. This will use document.createStyleSheet if it's there, if not it'll append a <link> tag.

$.getStyleSheet = function(url){
    if(document.createStyleSheet){
        document.createStyleSheet(url);
    }
    else{
        $('<link />', {
            type: 'text/css',
            rel: 'stylesheet',
            href: url
        }).appendTo('head');
    }
};

Then you can simply do:

if(!$(".AdminNoteContainer").length){
    $.getStyleSheet('css/main.css');
    $('head *[href*="css/adminNotes.css"]').remove();
}

the thing is i can remove the other stylesheet i will need to think in a different approach thanks — alexisdwd, Sep 13 '13 at 18:38

Jquery length not working on IE8

1 Answers1