Running jQuery Alongside Other Libraries

When designing the eleven2 forum, I came across a huge problem. Our whole header runs on jQuery to control the login bar that drops down on click, then phone number hover over effect and of course our whole dropdown navigation menu. And the thing is, our forums run on Invision Power Board, which runs the javascript libraries prototype and scriptaculous.

The two instant clashed, and screwed up much of the forums effects when toggling submenu’s, writing replies, toggling the sidebar etc, so I looked for a way to make jQuery work around other scripts, and the answer, jQuery NoConflict.

Before Adding NoConflict

This is my code that I was using before I added jQuery NoConflict…

$(document).ready(function(){
    $('div.login').click(
	    function() { $('#login-bar').slideToggle(200); });
});

Adding jQuery NoConflict

I added the beginning $.noConflict(); line to the top of my jQuery code. Now I have to replace any instance of $(document) with jQuery(document), because most javascript libraries use $ symbols as variable names, so replacing this with jQuery will let jQuery run alongside other libraries without clashing!

$.noConflict();

jQuery(document).ready(function($){
    $('div.login').click(
	    function() { $('#login-bar').slideToggle(200); });
});

I then went ahed and added the rest of my jQuery code in, replacing all the $ symbols with jQuery…

$.noConflict();

jQuery(document).ready(function($){
    $('div.login').click(
	    function() { $('#login-bar').slideToggle(200); });
});

jQuery(document).ready(function($){
    $('#main-nav > li').hover(
	    function() { $('ul', this).slideDown(200).css('visibility', 'visible'); $(this).addClass('selected'); },
		function() { $('ul', this).slideUp(200); $(this).removeClass('selected'); });
});

jQuery(document).ready(function($){
    $('div.phonehold').hover(
	    function() { $('a.phone').css('display', 'none'); $('a.phone2').css('display', 'block'); },
	    function() { $('a.phone').css('display', 'block'); $('a.phone2').css('display', 'none'); });
});

If you want to find out more about jQuery NoConflict, go to the jQuery website…

http://api.jquery.com/jQuery.noConflict/