Question

I’m working on wordpress template. On xhtml files I had no problems with jquery, but now under wordpress no-conflict mode, my codes give errors.

How do I rewrite this into no-conflict?

//Fade in and out animation on hove buttons - meteo, and slide pagination balls
$(window).load(function() {
    $("ul.slidebtns li a").hover(function() {
        divW = ($(this).next("div").width() / 2) - ($(this).outerWidth() / 2);
        $(this).next("div").css({marginLeft: -divW }).animate({ opacity: "show" }, "fast");
    }, function() {
        $(this).next("div").animate({opacity: "hide"}, "fast");
    });

    $("#tempicon img").hover(function() {
            var $img = $(this);
            var $labelDiv = $img.next("div");

            var halfOfLabelDivsWidth = $labelDiv.width() / 2;
            var imgMiddle = $img.position().left + ($img.width() / 2);

            $labelDiv
                .css({
                    left: imgMiddle - halfOfLabelDivsWidth
                })
                .animate({ opacity: "show" }, "fast");
        }, function() {
            $(this).next("div").animate({opacity: "hide"}, "fast");
    });
});

Do I’ve to change ALL $ signs into jQuery? I tried to rewrite only parts like:

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

and

$("ul.slidebtns li a").hover(function() {
jQuery("ul.slidebtns li a").hover(function() {

but it still errors out on $(this) for example…

Answer 1

Wrap your code in an aliasing closure:

(function ($) {
    ...all your code here...
}(jQuery));

This will allow you to use $ within the closure as a reference to the jQuery factory function.

If you’re not willing to wrap everything in a closure (you’d have to watch out for var statements for example, as they might need to belong to a different context), you’d need to change every usage of $ to jQuery.

Additionally, you’re using $(window).load, which is usually unnecessary (unless you actually need images to have loaded). Instead you should be listening to the document.ready event. The long form is:

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

But it’s typically used in the aliasing shorthand form of:

jQuery(function ($) {
   ...code...
});