Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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.

share|improve this question
1  
I just answered this question, but does it really belong here, or should it have been closed as it's not really WordPress-related? –  Jan Fabry Nov 5 '10 at 9:04
    
I noticed something about your code that probably won't fix your problem, but it's good to know. The comma after "delay : 3000," shouldn't be there unless there's a second parameter. The last parameter shouldn't have a comma after it. It will work fine in most browsers, but if you plan on supporting ie7 that part of the script will break. –  eileencodes Nov 5 '10 at 13:22
add comment

closed as off topic by EAMann Nov 5 '10 at 21:41

Questions on WordPress Development Stack Exchange are expected to relate to WordPress within the scope defined by the community. Consider editing the question or leaving comments for improvement if you believe the question can be reworded to fit within the scope. Read more about reopening questions here.If this question can be reworded to fit the rules in the help center, please edit the question.

1 Answer

up vote 2 down vote accepted

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.

share|improve this answer
add comment

Not the answer you're looking for? Browse other questions tagged or ask your own question.