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'); }, 
            function(){
                $(this).find('.dropdown').stop(true,true).slideUp('500');
        });


}); // 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'); }, 
            function(){
                jQuery(this).find('.dropdown').stop(true,true).slideUp('500');
        });


}); // end document.ready

EDIT

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...

EDIT 2

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.

EDIT 3

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:

jQuery.noConflict();

Do this:


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

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

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