I was having trouble with the demo from my jQuery plugin design pattern demo article, so I did a little research. I’d always had concerns with interoperability between the Prototype and jQuery toolkits, but never really fully understood why.

Fortunately, Chris Coyier has written an excellent article that touches on the subject. Basically, there is a conflict with the built-in dollar-sign operator that is used by both toolkits (having limited exposure to Prototype I was unaware of this).

Normally, with jQuery’s architecture, this isn’t an issue because the publicly exposed dollar-sign reference is encapsulated and is only accessed from within other self-contained plug-ins. But when you jQuery is called from outside a plug-in reference it will cause a conflict with Prototype.

The way around this is to assign a slightly customized handle when one instantiates their jQuery object and to do so by calling the “noConflict()” method when so doing. In Chris Coyier’s article, he uses $j, but one could use just about anything.

var $j = jQuery.noConflict();

$j("#the-example").addHoverFade();