jQuery / prototype conflict

Question

I am using a jQuery hoverIntent.js script for a mega drop down menu system inspired by Son Tonaka's mega drop down w/CSS & jQuery sohtanaka.com/web-design/mega-drop-downs-w-css-jquery. My page includes a prototype.js script that is inserted by a 3rd party supplier (this is a real estate website that loads property search and lead management content). It loads last just before the tag. My menu script and jQuery calls are loaded at the top of the tag. Below I've included 2 links. The first link I've commented out the call to the prototype.js and the menu works fine. The second link has the call to the prototype.js and the drop down does not work.

1) Working drop down : www.myreoforeclosures.com/_menutestfromcode.html (prototype.js commented out)

***Note: Sorry for the lack of hyperlink above but this forum will only allow 1 hyperlink until I earn more reputation points. click the link below as this is the link that has the conflict. Remove the 2 from the URL to see the page where the prototype.js is commented out and the drop down works as intented.

2) Not working drop down: http://www.myreoforeclosures.com/_menutestfromcode2.html (with prototype.js working)

I've tried many variations of the jQuery noConflict() resolutions suggested at the jQuery website, but for the life of me, I cannot get the conflict resolved. I have reduced the above links to just the basics of the CSS and HTML to test the drop down.

Please note I am climbing a steep learning curve with Web 2.0/CSS/jQuery as this is my first attempt designing a website using these tools (vs table based websites previously).

Any help to get the jQuery and the prototype to work together would be greatly appreciated. I only have control of the jQuery script so any resolution has to be done to jQuery. I do not have any control over the prototype.js.

Thanks in Advance.

Regards

Mike

Answer 1

http://docs.jquery.com/Using_jQuery_with_Other_Libraries

Use the jQuery.noConflict() method.

Grz, Kris.

Answer 2

I see that you're using an older version of jQuery. You've got 1.3.2 instead of 1.4.2.

Not sure if it would make a difference, but perhaps try the latest release.

You can link to it directly from Google's CDN:

http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js

Answer 3

The menu seems to work for me at both URLs. (Firefox 3.6.4)

Edit: They seem to work for me, because my preferred browser is Firefox with NoScript. I didn't notice that the prototype library came from a different domain. =/

/headdesk

Answer 4

If that menu doesn't use prototype, you could redefine the $ variable to jQuery in a new block (via a self executing anonymous function).

(function ($) {
   // do stuff as usual
})(jQuery);