Question

I am including two JavaScript files in my html page. The first is: https://ajax.googleapis.com/ajax/libs/prototype/1/prototype.js

It is needed to create some hovercards (http://www.nickstakenburg.com/projects/prototip2/).

The second JavaScript is the latest jQuery. I need this to create some animation on the page.

When both JavaScript files are in the page my hovercards stop working. When I remove the jQuery file the hovercards are back.

Why is the jQuery stopping the prototype.js file from working? How can I resolve this so I can use both?

Answer 1

You could use noConflict() like this:

jQuery.noConflict();
(function($) { 
  $(function() {
    // more code using $ as alias to jQuery
  });
})(jQuery);
//code with the other library using $