jquery first run load issue, works fine after refresh

Question

I have an issue that the first time whenever the file loads the script doesn't seem to load fully (after clearing cache and cookies). refreshing the page again makes the script run nicely. this happens each time I clear my cache, so essentially it doesn't load on first run.

I don't know how I can verify if my Jquery is not creating unnecessary issue. http://jsfiddle.net/Lp6SX/1/

jQuery(document).ready(function ($) {
$(window).load(function () {

    var fitem = 0;
    var litem = 0;
    var mitem = 0;

    function mycarousel_initCallback(carousel) {
        jQuery('.productbox').bind('click', function () {
            clearInterval(pt);
            clearInterval(nt);

            $('#mycarousel-prevpause').hide();
            $('#mycarousel-nextpause').hide();
            $('#next').show();
            $('#prev').show();

            var clickedId = jQuery(this).parent().attr('jcarouselindex');
            var totaldiff = 0;
            console.log(clickedId + "==>" + mitem);
            if (clickedId == mitem) {
                var c_buy = jQuery(this).parent().attr('data-byitnow');
                //alert("as"+c_buy);
                window.open(c_buy, '_blank');
                window.focus();
                //window.open =c_buy;  
            }

            if (clickedId > mitem) {
                totaldiff = clickedId - mitem;
                //console.log('clickedId '+totaldiff);
                if (totaldiff > 0) {
                    carousel.stopAuto();
                    carousel.options.scroll = totaldiff;

                    carousel.next();

                }
            } else {
                totaldiff = mitem - clickedId;

                if (totaldiff > 0) {
                    carousel.stopAuto();
                    carousel.options.scroll = totaldiff;

                    carousel.prev();

                }
            }


            return false;
        });

        jQuery('.jcarousel-scroll select').bind('change', function () {
            carousel.options.scroll = jQuery.jcarousel.intval(this.options[this.selectedIndex].value);
            return false;
        });

        jQuery('#mycarousel-next').bind('click', function () {
            $('#mycarousel-prevpause').hide();
            $('#mycarousel-nextpause').hide();
            $('#next').show();
            $('#prev').show();
            clearInterval(pt);
            clearInterval(nt);
            carousel.stopAuto();
            carousel.options.scroll = 5;
            carousel.next();
            return false;
        });

        jQuery('#mycarousel-prev').bind('click', function () {
            $('#mycarousel-prevpause').hide();
            $('#mycarousel-nextpause').hide();
            $('#next').show();
            $('#prev').show();
            clearInterval(pt);
            clearInterval(nt);
            carousel.stopAuto();
            carousel.options.scroll = 5;
            carousel.prev();
            return false;
        });

        jQuery('#mycarousel-prevpause').bind('click', function () {
            clearInterval(pt);
            clearInterval(nt);
            $('#prev').show();
            carousel.stopAuto();
            $(this).hide();
            $('#mycarousel-nextpause').hide();
            return false;
        });

        jQuery('#mycarousel-nextpause').bind('click', function () {
            clearInterval(pt);
            clearInterval(nt);
            $('#next').show();
            carousel.stopAuto();
            $(this).hide();
            $('#mycarousel-prevpause').hide();
            return false;
        });

        jQuery('#prev').bind('click', function () {
            $('#mycarousel-prevpause').show();
            $('#mycarousel-nextpause').hide();
            $('#next').show();
            carousel.stopAuto();
            continue_prev(carousel);
            $(this).hide();
            return false;
        });

        jQuery('#next').bind('click', function () {
            $('#mycarousel-nextpause').show();
            $('#mycarousel-prevpause').hide();
            $('#prev').show();
            carousel.stopAuto();
            continue_next(carousel);
            $(this).hide();
            return false;
        });
    };
    var nt;
    var pt;

    function continue_next(carousel) {
        clearInterval(pt);
        nt = setInterval(function () {
            carousel.options.scroll = 1;
            carousel.prev();
        }, 2000);
    }

    function continue_prev(carousel) {
        clearInterval(nt);
        pt = setInterval(function () {
            carousel.options.scroll = 1;
            carousel.next();
        }, 2000);
    }

    function mycarousel_reloadCallback(carousel) {
        //console.log('Carousel reloaded'+fitem+"==>"+litem);
        makeCenterActive();
    };

    /**
     * This is the callback function which receives notification
     * when an item becomes the first one in the visible range.
     */
    function mycarousel_itemFirstInCallback(carousel, item, idx, state) {
        //console.log('Item #' + idx + ' is now the first item');
        fitem = idx;
    };

    /**
     * This is the callback function which receives notification
     * when an item becomes the first one in the visible range.
     */
    function mycarousel_itemLastInCallback(carousel, item, idx, state) {
        //console.log('Item #' + idx + ' is now the last item');
        litem = idx;
        makeCenterActive(carousel);
    };

    function makeCenterActive(carousel) {
        //console.log('Carousel reloaded'+fitem+"==>"+litem);

        mitem = ((litem - fitem) / 2) + fitem;
        var middleItemId = $('.jcarousel-item-' + mitem + '').attr('id');
        //console.log('Middle Item'+mitem+"==>"+middleItemId);


        $('.activeBox').each(function () {
            //$(this).animate({height: "75px",width:"75px",marginTop:"0px"}, '200').removeClass('activeBox');
            $(this).removeClass('activeBox');
            //$(this).transition({ scale: 1 });
            $(this).transition({
                height: "109px",
                width: "135px",
                marginTop: "0px"
            });
            $(this).children().children('img').transition({
                "max-width": "105px",
                "max-height": "105px"
            });
        });

        $('.jcarousel-item-' + mitem + '').each(function () {
            //$(this).animate({height: "98px",width:"89px",marginTop:"-10px",marginLeft:"0px"}, '200').addClass('activeBox');
            //$(this).animate({width: "89px !important", height: "105px !important"}, 'slow');
            $(this).addClass('activeBox');
            //$(this).transition({ scale: 1.3 });
            $(this).transition({
                height: "140px",
                width: "140px",
                marginTop: "-17px",
                marginLeft: "0px"
            });
            $(this).children().children('img').transition({
                "max-width": "105px",
                "max-height": "105px"
            });

        });


        var c_time = $('#' + middleItemId + '').attr('data-timeremain');
        var c_buy = $('#' + middleItemId + '').attr('data-byitnow');
        var c_price = $('#' + middleItemId + '').attr('data-price');
        $('#timeremain').html('Current' + c_time);
        $('#byitnow').html('<a href="' + c_buy + '">Price :</a>');
        $('#price').html(c_price);
        //carousel.reload();
    }

    // Ride the carousel...
    jQuery(document).ready(function () {
        jQuery("#mycarousel").jcarousel({
            scroll: 1,
            auto: 1,
            wrap: 'circular',
            initCallback: mycarousel_initCallback,
            reloadCallback: mycarousel_reloadCallback,
            itemFirstInCallback: mycarousel_itemFirstInCallback,
            itemLastInCallback: mycarousel_itemLastInCallback,
            // This tells jCarousel NOT to autobuild prev/next buttons
            buttonNextHTML: null,
            buttonPrevHTML: null
        });
    });

})
});

It is for modifying a carousel slider. can anyone check the code and see if you spot any issue with it?

Thanks for your time.

Answer 1

You have this code structure:

 $(window).load(function(){

    // code part 1 here ..

    jQuery(document).ready(function (){ 

        // code part 2 here .. 

    });
 });

inside the window.load() part. That doesn't make sense I think, you just need one. You can wrap everything in just document-ready callback like so:

jQuery(document).ready(function(){
    // code part 1 here .. 
    // code part 2 here .. 
});

Hope that helps!

Answer 2

First of all you are missing some closing brackets. You also put $(window).load() inside jQuery(document).ready() so it won't be run, and then another jQuery(document).ready() inside these two so again it won't be run. You should use only 1 statement like this:

jQuery(document).ready(function() {
    ...
});

and put everything inside it (vars, function declarations and jQuery $(..) operations).

And I think you should decide to unify naming conventions and use only jQuery or $ dollar sign, not both at once.