JQuery Document Ready Conflicting With Window Onload?

I am trying to hack together a video gallery. I am using jQuery to make a slide out panel which is simple. I am also using jQuery for scrolling thumbnails. They both work beautifu

Solution 1:

The thumbnailScroller plugin seems to need to calculate the dimensions of the wrapper of the thumbs. In your case, the wrapper is initially not displayed and it may get the plugin confused.

You could try to hide the .panel element only after having executed the plugin.

jQuery.noConflict(); 
/* calling thumbnailScroller function with options as parameters */
(function($){
    $(document).ready(function(){
        $(".trigger").click(function(){
            $(".panel").toggle("fast");
            $(this).toggleClass("active");
            return false;
        });
    });
    window.onload=function(){ 
        $("#tS2").thumbnailScroller({ 
            scrollerType:"clickButtons", 
            scrollerOrientation:"horizontal", 
            scrollSpeed:2, 
            scrollEasing:"easeOutCirc", 
            scrollEasingAmount:600, 
            acceleration:4, 
            scrollSpeed:800, 
            noScrollCenterSpace:10, 
            autoScrolling:0, 
            autoScrollingSpeed:2000, 
            autoScrollingEasing:"easeInOutQuad", 
            autoScrollingDelay:500 
        });

        // Hide the .panel only now :
        $(".panel").hide();
    };
})(jQuery);

(You'll need to modify you CSS so that the .panel is initially displayed)

Solution 2:

The document.ready will get executed as soon as your dom/document is ready but window.load will be executed only after all objects(images/text) are loaded in momery.

i have faced the similer kind of problem where i was using document.ready for making scroller for my list of multiple images but as some of images were large in size so before loading those images the document.ready get fired and faced the issue..

so later on i changed it with window.load so now with window.load my scroller creation process will only get fired after when all images loads in memory properly..

hope this will help you to get solution..

Solution 3:

Why you are using 2 document.ready function in the same page . It will definitely make a conflict. Just avoid the script declaration at the begining and try.

You need only this much js code inside script tag. This will work for you.

jQuery.noConflict(); /* calling thumbnailScroller function with options as parameters*/
(function($){
    $(".trigger").click(function(){
       $(".panel").toggle("fast");
       $(this).toggleClass("active");
      return false;
    });


window.onload=function(){ 
    $("#tS2").thumbnailScroller({ 
    scrollerType:"clickButtons", 
    scrollerOrientation:"horizontal", 
    scrollSpeed:2, 
    scrollEasing:"easeOutCirc", 
    scrollEasingAmount:600, 
    acceleration:4, 
    scrollSpeed:800, 
    noScrollCenterSpace:10, 
    autoScrolling:0, 
    autoScrollingSpeed:2000, 
    autoScrollingEasing:"easeInOutQuad", 
    autoScrollingDelay:500 
    });
}
})(jQuery);

Solution 4:

First of all remove double click event binding for $(".trigger").click(...), only the second one is needed. Then try to move this binding after thumbnailScroller initialization inside window.onload, bacause window.onload fires much after DOM ready event. And remove (function($){ wrapping around window.onload as unnecessary. Try this:

$(window).load(function() {
    // Initialize scroller
    $("#tS2").thumbnailScroller({ ... });

    // Initialize panel
    $(".trigger").click(function() {
        $(".panel").toggle("fast");
        $(this).toggleClass("active");
        return false;
    });
});