combining js scripts from a js newb [closed]

Question

I've got a small .js file on my wp site where I have been adding in all of my small js scripts. It works perfectly, but I am stuck trying to figure out how to add in another script. So far jslint does not complain about my current file and says it is ok.

my script:

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;
});
};
}

The script I want to add in starts like this:

jQuery(document).ready(function($) {
var gallery = $('#thumbs').galleriffic({
    delay:                     3000, // in milliseconds
 });
});

Where I keep getting stuck, is that I am finding a lot of scripts that start with the jQuery(document) part. When I try to add scripts that begin like that then everything breaks.

I'm guessing this is a really stupid question, but what do I need to change in the new addon script so that it will play nice with my current file?

thank you for your help and time on this one. Trying hard to learn js though it's a slow process here.

Answer 1

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.