Topic: TypeError Null value in Safari

I'm using the following bit of JavaScript to remove some non-AJAX form elements -- the idea being that if JavaScript is enabled (and thus AJAX manipulation is available), the elements are unnecessary and distracting.

It works fine in Firefox, but Safari gives a "TypeError - Null value" on line 14. That appears to be valid JavaScript -- is there some quirk of how Safari interprets it? Or maybe it's Firefox that's quirky and I've come to rely on it?

[code JavaScript]
var my_app = {

    // Turns off the move arrows and makes the header grabby (to afford drag and dropping)
    //  if JavaScript is enabled.
    prepCss : function ()
    {

        var theRules = new Array();
        if (document.styleSheets[0].cssRules)
            theRules = document.styleSheets[0].cssRules;
        else if (document.styleSheets[0].rules)
            theRules = document.styleSheets[0].rules;

        for (var i=theRules.length-1; i >= 0; --i)
        {
            var hiddenArrows = false;
            var madeGrabby = false;
           
            if (theRules[i].selectorText == '.item-move-link')
            {
                theRules[i].style.display = 'none';
                hiddenArrows = true;
            }
            else if (theRules[i].selectorText == '.item-header')
            {
                theRules[i].style.cursor = 'move';
                madeGrabby = true;
            }
                               
            if (hiddenArrows && madeGrabby)
            {
                break;
            }
        }
    }

}

my_app.prepCss();
[/code]

Re: TypeError Null value in Safari

Is Safari not creating the array correctly?

Can you use a [] declaration?

Toby Hede
===================================================
FiniteStateMachine - Software Development for Social Networks
===================================================

Re: TypeError Null value in Safari

The odd thing is, it works *some* of the time in Safari, but eventually it starts throwing that error and can't get out of it. Maybe variables are persisting or something and it's getting mad at a double declaration? Very strange.

I ended up with what is, I think, a cleaner solution to this problem anyway... I just set up extra styles for the given elements, but set them like this:

[code CSS]
/* the regular style */
.item-move-link {
   /* stylings... */
}

body.js-enabled .item-move-link {
   display: none;
}
[/code]

Then all my JavaScript has to do is apply the "js-enabled" class to the body element and all the inherited elements will switch over to their other style. Much cleaner.