JavaScript
Article

How to Use jQuery with Prototype

By Sam Deering

I came across a problem when trying to load two JavaScript libraries at the same time! (I do not recommend using more than one JavaScript library unless there is a very good reason to do so as it can increase loading times and the functions can get mixed up due to duplicate declarations etc…).

However, on this occasion I “needed” to use jQuery with Prototype to get this fancy Prototype tooltip window working. This is how I did it:

  1. Store jQuery and Prototype functions in different JavaScript files
  2. Include the jQuery files first
  3. Call the jQuery first

jQuery Code

jQuery(document).ready(function($) {
	//alert("js is working");
	//JQUERY CODE CALLS HERE
	$('a[href=#topbar]').click(function(){
		//etc...
	});
});

Prototype Code

document.observe('dom:loaded', function() {
  //alert("prototype is working");
  //PROTOTYPE CODE CALLS HERE
  $$('#page-wrapper a[rel]').each(function(element) {
			//etc...
		});
  });
});

HTML Code







More information on using jQuery with other libraries can be found here: http://docs.jquery.com/Using_jQuery_with_Other_Libraries

No Reader comments

Recommended

Learn Coding Online
Learn Web Development

Start learning web development and design for free with SitePoint Premium!

Get the latest in JavaScript, once a week, for free.