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

I ran into the same problem and modified the jquery.bgpos.js like so and it now works in IE.

(function($) 
{   
    $.extend($.fx.step,
    {       
        backgroundPosition: function(fx) 
        {            
            if (fx.state === 0 && typeof fx.end == 'string') 
            {
                if(navigator.appName == 'Microsoft Internet Explorer')
                {
                    var start = $.curCSS(fx.elem,'backgroundPositionX');
                    start +=  ' ';
                    start += $.curCSS(fx.elem,'backgroundPositionY');
                }
                else
                {
                    var start = $.curCSS(fx.elem,'backgroundPosition');
                }
                start = toArray(start);
                fx.start = [start[0],start[2]];
                var end = toArray(fx.end);
                fx.end = [end[0],end[2]];
                fx.unit = [end[1],end[3]];
            }

            var nowPosX = [];
            nowPosX[0] = ((fx.end[0] - fx.start[0]) * fx.pos) + fx.start[0] + fx.unit[0];
            nowPosX[1] = ((fx.end[1] - fx.start[1]) * fx.pos) + fx.start[1] + fx.unit[1];
            fx.elem.style.backgroundPosition = nowPosX[0]+' '+nowPosX[1];

            function toArray(strg)
            {               
                strg = strg.replace(/left|top/g,'0px');
                strg = strg.replace(/right|bottom/g,'100%');
                strg = strg.replace(/([0-9\.]+)(\s|\)|$)/g,"$1px$2");
                var res = strg.match(/(-?[0-9\.]+)(px|\%|em|pt)\s(-?[0-9\.]+)(px|\%|em|pt)/);
                return [parseFloat(res[1],10),res[2],parseFloat(res[3],10),res[4]];
            }        
        }   
    });
})(jQuery);

Answer 2

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 3

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.