combining js scripts from a js newb [closed]

The jQuery(document).ready event is called when the document DOM is ready to be manipulated. In earlier days we attached all our handlers to document.load, but this waits until all images are loaded too, and most of the time one doesn’t need that.

There are three equivalent ways of hooking into this event, and a fourth almost-equivalent:

// Long form
jQuery(document).ready(function() {
    // Your handler
});

// Short form
jQuery(function() {
    // Your handler
});

// Intermediate form (not recommended)
jQuery().ready(function() {
    // Your handler
});

// Classic event binding - will not be executed again if you hook it too late
jQuery(document).bind("ready", function() {
    // Your handler
});

You sometimes see $ used instead of jQuery. This is easy because it is shorted, but some other JS libraries use it also. To prevent overwriting others, jQuery can be executed in noConflict mode. This means that $ is not used, only jQuery is. But, the first argument to your ready handler will be the jQuery object itself. This means that you can write your handler like function($) {}, and you can use $ inside of your function.

So your code would become something like this:

jQuery(function ($) {
    function mycarousel_initCallback(carousel) {
        jQuery('.jcarousel-control a').bind('click', function() {
            carousel.scroll(jQuery.jcarousel.intval(jQuery(this).text()));
            return false;
        });

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

        // Next Button
        $('#mycarousel-next').bind('click',
        function() {
            carousel.next();
            return false;
        });

        // Prev Button
        $('#mycarousel-prev').bind('click',
        function() {
            carousel.prev();
        return false;
        });
    };

    // We are already in the 'ready' event handler, no need to hook into it again
    // Just add our code here!
    var gallery = $('#thumbs').galleriffic({
        delay:                     3000, // in milliseconds
    });
}

If you have more pure JavaScript questions, you might want to ask them on our “parent” site, Stack Overflow. They have lots of jQuery expertise there.

Related Posts: