IE8 and jQuery null pointers

Question

hey guys: I've been building a website with some animated rollovers, where I animate the background image to give a colour fade effect. It works fine in FF3, Safari, chrome, but IE8 throws the "undefined is null or not an object" error.

Full text:

Message: 'undefined' is null or not an object
Line: 22
Char: 16
Code: 0
URI: http://www.philipdukes.co.uk/jquery.bgpos.js


Message: 'undefined' is null or not an object
Line: 22
Char: 16
Code: 0
URI: http://www.philipdukes.co.uk/jquery.bgpos.js

In my web page header I load jquery 1.3.2, then this bgpos library, found at the link in the error, then my homepage script.

Anytime I rollover the nav buttons, IE8 throws this error...

Any help would be appreciated: I know my code may not be the most stylish out there, so constructive criticism on that would also be welcome. I'd like to focus on this error though...

shearn89

Answer 1

Although I'm not completely sure why/how this can happen, there is only one explanation.

IE8 calls toArray(strg) in (jquery.bgpos.js) with undefined as parameter. Which IMHO can only happen if $.curCSS(fx.elem,'backgroundPosition') returns undefined or fx.end is undefined.

I suspect the call to curCss to be the culprit. Maybe IE8 returns undefined for background-position when no explicit value is set.

You can try inserting alert statements and check if the curCSS call or/and fx.end are undefined. To at least narrow down the problem.

Answer 2

Stepping through things, it almost seems like it's blowing up because

$(item).css({backgroundPosition: '0 -246px'});

doesn't exist in the else clause of your homepage script.

Edit: Just noticed that Jitter added above that "Maybe IE8 returns undefined for background-position when no explicit value is set." Try setting the backgroundPosition in the else and see what happens.

Answer 3

perfect! just added a selector to the document.ready to set the backgroundPosition and it worked