Question

I can’t make this little thing work. Don’t know what’s the problem, but my array elements can’t get defined, alert always gives me back NaN. Tried to alert the jQuery selectors, they’re working perfectly. What’s the problem?

        var sldr                                = $("#slider img"),
            count                           = sldr.length-1,
            containerHeight         = $("#slider").css('height'),
            images                          = new Array(),
            imgHeights                  = new Array(),
            imgWidths                       = new Array(),
            imgSlices                       = new Array(),
            choosenSlice                =   '',
            slicer                          = '';


        var i=0;
        for (i=0;i<=count;i++){
            images[i]               = $("#slider img:eq("+i+")");
            imgHeights[i]       = $("#slider img:eq("+i+")").attr('height');
            imgWidths[i]        = $("#slider img:eq("+i+")").attr('width');
            imgSlices[i]        = (Math.round(imgHeights[i]/containerHeight))-1;
            alert(imgSlices[i]);
        }

Answer 1

If the ‘height’ or ‘width’ attribute isn’t set on one of the images, or isn’t a number, then trying to divide with it might result in a NaN result.

Try converting those values to a number using parseInt:

mgHeights[i]       = parseInt($("#slider img:eq("+i+")").attr('height'));
imgWidths[i]       = parseInt($("#slider img:eq("+i+")").attr('width'));