ByteStork blog

After spending some time in JavaScript (and modifying my CSS a tad), I managed to add a semi-flexible global sitemap (on top).

I wanted something that could be easily attached to any site, with adding just a simple script.
Also, as I wanted it to work independent of jQuery, Dojo etc, it has to be vanilla JS.

Satisfying IE is still a pain in the ass, and it doesn’t help that one chose not to use jQuery and Dojo for simplifying cross-browser support.

One example is the function I have for putting CSS into the HTML page. I really didn’t want to add another stylesheet, to reduce the number of page loads.

However, IE didn’t like the:

styles.appendChild(document.createTextNode(css[key]));

Thus I was forced to find some way of making it accept it:

function bytestorkStyles()
{
    // Storing styles
    var css = [];
    css[0] = "div#bytestorkSiteMap { ..stuff here..} \n";
    css[1] = "div#bytestorkSiteMap ul { ..more stuff here...}"
    css[2] = "div#bytestorkSiteMap ul li { ..and so on.. }\n";

    // create style element
    var styles = document.createElement("style");
    styles.setAttribute('type', 'text/css');
    // the usual IE hack fix
    if(styles.styleSheet)
    {
        styles.styleSheet.cssText = '';
        for(key in css)
        {
            styles.styleSheet.cssText += css[key];
        }
    } else{
        for(key in css)
        {
            styles.appendChild(document.createTextNode(css[key]));
        }
    }
    //throw it into the head tag
    document.getElementsByTagName("head")[0].appendChild(styles);
}

Maybe not the cleanest code, but it helped me not having to put all the styles into the elements themselves. Perhaps a better solution would be a cacheable CSS file, but it’s not like this is gonna kill a computer.