Using jQuery noConflict () with script.aculo.us

Question

I have a website using a "widget" (from http://healcode.com ) that includes the script.aculo.us JavaScript library. The problem is that the site I'm building is on WordPress, so there is a classic jQuery vs script.aculo.us conflict.

I know that I need to run jQuery in .noConflict() mode, but I have to get the syntax wrong. When I assign $ jQuery .noConflict as follows, it still disables the script.aculo.us 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 know that I assign $ to jQuery in .noConflict() mode, and I assume that script.aculo.us (which is loaded through the widget in the main body, therefore AFTER jQuery) is trying to re-assign $ back to script.aculo.us.

How to assign $ jQuery so that the later loaded script.aculo.us library does not conflict? I already tried the following without any success (the following code causes script.aculo.us to work, but jQuery does not work):

 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

Debug console output for the above code:

Uncaught TypeError: Object #<HTMLDocument> has no method 'ready' (anonymous function) , so document.ready fails because it is assigned to jQuery, which somehow does not load properly ...

EDIT 2

Both of the 2 (at the time of the update) answers posted below do nothing to solve the problem I'm struggling with. They may be technically correct, but they do not affect my problem.

Answer 1

This worked for me, so that I can have jQuery and script.aculo.us / Prototype work well together. A loan is sent codeimpossible for this lifeguard!

Instead:

 jQuery(document).ready(function () { // Code to run on DOM ready }); // End document.ready 

Try the following:

 ( function($) { // Code to run on DOM ready } )( jQuery ); // End document.ready 

Answer 2

I found the solution VERY awesome!

First of all, using the mode $j = jQuery.noConflict(); does not work.

Secondly, a call to jQuery.noConflict(); led did not work.

The method that worked was as follows: http://codeimpossible.com/2010/01/13/solving-document-ready-is-not-a-function-and-other-problems/

Oddly enough, the Coda Slider 2.0 plugin does not automatically noConflict , so it turned out that IN ADDITION to the problems listed above, I needed to wrap this plugin in .noConflict(); . Shout out the author of the blog post, don’t know why other methods to call noConflict(); don't work, but I'm glad I found the message.

Answer 3

Assigning jQuery back to $ does nothing.

Or assign jQuery to another variable:

 var j$ = jQuery.noConflict(); 

Or do not assign him anything:

 jQuery.noConflict(); 

Answer 4

Try the following:

 <script src="url to jquery"></script> <script type="javascript">jQuery.noConflict();</script> <script src="url to scriptaculous"></script>