I've got a site utilizing a "widget" (from http://healcode.com) which includes the scriptaculous (http://script.aculo.us/) javascript library. Problem would be that the site I am building is using blogging platforms so there is the classic jQuery versus scriptaculous conflict.

I understand that I have to run jQuery in .noConflict() mode however i should be obtaining the syntax wrong.

After I assign the $ to jQuery .noConflict the following, still it shuts lower the scriptaculous functions:

var $ = jQuery.noConflict();

$(document).ready(function () {

    //#nav-main dropdown effects                

    $('#nav-main ul li').hoverIntent(function () { 
        $(this).find('.dropdown').stop(true,true).slideDown('900'); }, 

}); // end document.ready

I understand that i'm setting the $ to jQuery in .noConflict() mode and that i think that scriptaculous (which loads using a widget within the primary body, therefore AFTER jQuery) is attempting to re-assign the $ to scriptaculous.

How do i assign the $ to jQuery in ways the later-loaded scriptaculous library will not conflict? I have already attempted, the next without results (the next code causes scritaculous to operate, but jQuery to fail):

jQuery(document).ready(function () {

    //#nav-main dropdown effects                

    jQuery('#nav-main ul li').hoverIntent(function () { 
        jQuery(this).find('.dropdown').stop(true,true).slideDown('900'); }, 

}); // end document.ready


The debug console output for that above code is:

Uncaught TypeError: Object #<HTMLDocument> has no method 'ready' (anonymous function) therefore the document.ready fails since it is designated to jQuery, that is in some way not loading correctly...


Can anybody offer other experience? Each of the two (during the time of this update) solutions published below do nothing at all to deal with the problem I am battling with. Possibly they're technically correct, but they don't address my problem.


It has finally been solved, scroll to my response to discover how...

I discovered the answer VERY surprising!

To begin with, while using $j = jQuery.noConflict(); mode didn't work.

Second, calling jQuery.noConflict(); in the mind didn't work.

The technique that did work was that one: http://codeimpossible.com/2010/01/13/solving-document-ready-is-not-a-function-and-other-problems/

Oddly, the Coda Slider 2.0 plugin doesn't instantly do noConflict therefore it switched out that Additionally towards the problems in the above list, I desired to wrap that wordpress plugin in .noConflict(); too. Shout the the writer from the blog publish, unsure why other noConflict(); calling techniques did not work, but I am glad I discovered the publish.

Setting jquery back to $ does not do anything whatsoever.

Either assign jquery to another variable:

var j$ = jQuery.noConflict();

Or don't assign it to anything:


Do this:

   <script src="url to jquery"></script>

   <script type="javascript">jQuery.noConflict()</script>

   <script src="url to scriptaculous"></script>