Where to use jQuery.noConflict

Question

I have some code I was given in jQuery and I am really new to it. I need to use the jQuery.noConflict() method because I am using a Mootools framework as well. I just don't know where I should replace the $ symbols in the code for 'jQuery'. Any help would be greatly appreciated!

The code for it is at www.cshellarchitecture.com/test/js/flexibg.js

Answer 1

Some examples taken from your linked code file:

    var $window = $(window),
 $body = $('body'),
 imageID = "expando",
 tallClass = 'tall',
 wideClass = 'wide',
 $bgImage, $wrapper, img, url, imgAR;

    /**
            Are we dealing with ie6?
    */
    var ie6 = ($.browser.msie && parseInt($.browser.version, 10) <= 6);

Should be:

    var $window = jQuery(window),
 $body = jQuery('body'),
 imageID = "expando",
 tallClass = 'tall',
 wideClass = 'wide',
 $bgImage, $wrapper, img, url, imgAR;

    /**
            Are we dealing with ie6?
    */
    var ie6 = (jQuery.browser.msie && parseInt(jQuery.browser.version, 10) <= 6);

Answer 2

It's fairly simple—after you type jQuery.noConflict(); you should simply replace all $ instances with jQuery.

Alternatively, if you're used to relying on $ as a visual shorthand to discern when you are making calls to a framework, you can do $jq = jQuery.noConflict(); and then on use $jq instead of jQuery throughout your code. In your cased you'd replace $ with $jq in the code that's been provided to you.

Answer 3

jQuery docs for the noConflict() method say:

Run this function to give control of the $ variable back to whichever library first implemented it....By using this function, you will only be able to access jQuery using the 'jQuery' variable.

In which case, if you are running in no conflict mode, every call to jQuery via the "$" variable should be replaced with "jQuery".

Answer 4

Since you're structuring your code in a way something like the module pattern, you could do something like this:

var flexiBackground = (function($){ // notice the $ argument
  //$ === jQuery only within this scope...

})(jQuery.noConflict()); // call noConflict and pass the jQuery reference to $

By doing that, you will be able to reference to jQuery normally, by the $ identifier only inside the scope of the self-executing anonymous function assigned to flexiBackground.