CODEWITHSUNDEEP
javascriptjquery
sushibrain
sushibrain

Reputation: 2790

Uncaught TypeError: Cannot read property 'contains' of null

I'm currently working on a project, where I'm using the following slider in the overal site:

S3Slider

For the particular page I'm currently working on I'm also making use of Walter Zorns' Drag&Drop image library. (Link Here)

Now when I start to make use of the SET_DHTML function, which is required for using the D&D library, my slider starts throwing errors:

Uncaught TypeError: Cannot read property 'contains' of null

The line number given, sends me to the following line:

if($(itemsSpan[currNo]).css('bottom') == 0) {

Which lies in the following piece of code:

   s3Slider = function(id, vars) {       

    var element     = this;
    var timeOut     = (vars.timeOut != undefined) ? vars.timeOut : 2000;
    var current     = null;
    var timeOutFn   = null;
    var faderStat   = true;
    var mOver       = false;
    var items       = $("#sliderContent .sliderTopstory");
    var itemsSpan   = $("#sliderContent .sliderTopstory span");

    items.each(function(i) {

        $(items[i]).mouseover(function() {
           mOver = true;
        });

        $(items[i]).mouseout(function() {
            mOver   = false;
            fadeElement(true);
        });

    });

    var fadeElement = function(isMouseOut) {
        var thisTimeOut = (isMouseOut) ? (timeOut/2) : timeOut;
        thisTimeOut = (faderStat) ? 10 : thisTimeOut;
        if(items.length > 0) {
            timeOutFn = setTimeout(makeSlider, thisTimeOut);
        } else {
            console.log("Poof..");
        }
    }

    var makeSlider = function() {
        current = (current != null) ? current : items[(items.length-1)];
        var currNo      = jQuery.inArray(current, items) + 1
        currNo = (currNo == items.length) ? 0 : (currNo - 1);
        var newMargin   = $(element).width() * currNo;
        if(faderStat == true) {
            if(!mOver) {
                $(items[currNo]).fadeIn((timeOut/6), function() {
                 /* This line ->   */if($(itemsSpan[currNo]).css('bottom') == 0) {
                        $(itemsSpan[currNo]).slideUp((timeOut/6), function( ) {
                            faderStat = false;
                            current = items[currNo];
                            if(!mOver) {
                                fadeElement(false);
                            }
                        });
                    } else {
                        $(itemsSpan[currNo]).slideDown((timeOut/6), function() {
                            faderStat = false;
                            current = items[currNo];
                            if(!mOver) {
                                fadeElement(false);
                            }
                        });
                    }
                });
            }
        } else {
            if(!mOver) {
                if($(itemsSpan[currNo]).css('bottom') == 0) {
                    $(itemsSpan[currNo]).slideDown((timeOut/6), function() {
                        $(items[currNo]).fadeOut((timeOut/6), function() {
                            faderStat = true;
                            current = items[(currNo+1)];
                            if(!mOver) {
                                fadeElement(false);
                            }
                        });
                    });
                } else {
                    $(itemsSpan[currNo]).slideUp((timeOut/6), function() {
                    $(items[currNo]).fadeOut((timeOut/6), function() {
                            faderStat = true;
                            current = items[(currNo+1)];
                            if(!mOver) {
                                fadeElement(false);
                            }
                        });
                    });
                }
            }
        }
    }

    makeSlider();

};

Why is this error being thrown?

Thanks.

Upvotes: 4

Views: 18720

Answers (1)

Mike S.
Mike S.

Reputation: 951

I think your problem lies in these two lines:

var currNo = jQuery.inArray(current, items) + 1
currNo = (currNo == items.length) ? 0 : (currNo - 1);

If jQuery doesn't find the item in the array, it's going to send you a value of -1 (on the top line) which will then be changed to 0 because you added 1. Now, if currNo is 0 on the second line, it's going to change it back to -1, which will return you undefined. Maybe try and change it to do this instead:

var currNo = jQuery.inArray(current, items);
if (currNo === items.length - 1) {
    currNo = 0;
}

I'm not positive this is the problem, but I can see this becoming an issue if it's not the problem you're currently having.

Upvotes: 4

Related Questions