Question

I building website using following script. Sometime this javascript crash sometimes not. Weird thing is when I add alert box at third line after sliderLeft define, script never crash. Someone please help with this.
I am using same function twice for different output.

Even I remove Second similar function I am still getting error. Please help me with this.

$(window).load(function() {             
    var sliderLeft=$('#thumbScroller .container').position();
    //alert(sliderLeft);
 //   padding=$('#outer_container').css('paddingRight').replace("px", "");
    var sliderWidth=$(window).width()
    $('#thumbScroller').css('width',sliderWidth);
    var totalContent=0;
    $('#thumbScroller .content').each(function () {
        totalContent+=$(this).innerWidth();
        $('#thumbScroller .container').css('width',totalContent);
    });
    //alert(sliderLeft);
    $('#thumbScroller').mousemove(function(e){
        if($('#thumbScroller  .container').width()>sliderWidth){
            var mouseCoords=(e.pageX - this.offsetLeft);
            var mousePercentX=mouseCoords/sliderWidth;
            var destX=-(((totalContent-(sliderWidth))-sliderWidth)*(mousePercentX));
            var thePosA=mouseCoords-destX;
            var thePosB=destX-mouseCoords;
            var animSpeed=600; //ease amount
            var easeType='easeOutCirc';
            if(mouseCoords==destX){
                $('#thumbScroller .container').stop();
            }
            else if(mouseCoords>destX){
                //$('#thumbScroller .container').css('left',-thePosA); //without easing
                $('#thumbScroller .container').stop().animate({left: -thePosA}, animSpeed,easeType); //with easing
            }
            else if(mouseCoords<destX){
                //$('#thumbScroller .container').css('left',thePosB); //without easing
                $('#thumbScroller .container').stop().animate({left: thePosB}, animSpeed,easeType); //with easing
            }
        }
    });
    $('#thumbScroller  .thumb').each(function () {
        $(this).fadeTo(fadeSpeed, 0.6);
    });
    var fadeSpeed=200;
    $('#thumbScroller .thumb').hover(
    function(){ //mouse over
        $(this).fadeTo(fadeSpeed, 1);
    },
    function(){ //mouse out
        $(this).fadeTo(fadeSpeed, 0.6);
    }
);
});
$(window).resize(function() {
    //$('#thumbScroller .container').css('left',sliderLeft); //without easing
    $('#thumbScroller .container').stop().animate({left: sliderLeft}, 400,'easeOutCirc'); //with easing
    $('#thumbScroller').css('width',$(window).width());
    sliderWidth=$(window).width();
});

I just remove second function as per suggestion, but still not work
removed few lines and script crash and doesn’t display any error

Answer 1

You have 2 $(window).load(function() {...}); function definitions.

Try combing them into 1 $(window).load(function() {...}); call.