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 : http://www.myreoforeclosures.com/_menutestfromcode.html (prototype.js commented out)

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.

Answer 1

I suspect that the reason jQuery.noConflict() doesn't work is that the menu code continues to use $ to refer to jQuery functionality. All that noConflict() does is to unbind the $ global name from jQuery.

If you've got any code that expects $ to mean "jQuery", then it has to be changed to use jQuery instead. Otherwise, it'll pick up the Prototype $ which is of course a very different thing.

edit — ok I finally got your page to load (I think my network was having issues), so I see that you're using "$j" pretty consistently. Thus I don't think that the $ issue in the menu code is a problem, but I'll leave the comment here because it's still true that noConflict() isn't magic.

edit again — I would go with Patrick's suggestion to try Prototype 1.4.2.