jQuery Conflicts

Question

I have several Jquery libraries and I keep getting conflicts between one or the other. I'm not entirely sure how to resolve these conflicts. I will post up the libraries I have. First I will post the javascript includes I have in my header and the exact order they are in:

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"> </script>
 <script type="text/javascript" src="scripts/javascript.js"> </script>
 <script type="text/javascript" src="scripts/prototype.js"></script>
 <script type="text/javascript" src="scripts/scriptaculous.js?load=effects,builder"></script>
 <script type="text/javascript" src="scripts/lightbox.js"></script>
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
 <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> 
 <script type="text/javascript" src="scripts/jquery.easing.1.3.js"></script>
 <script type="text/javascript" src="scripts/jquery.mousewheel.min.js"></script>

These are the libraries I am running; this is on the index.html and is for custom scrollbars:

<script>
$(window).load(function() {
mCustomScrollbars();
});
function mCustomScrollbars(){
$("#about").mCustomScrollbar("vertical",300,"easeOutCirc",1.05,"auto","yes","yes",15); 
$("#graph").mCustomScrollbar("vertical",300,"easeOutCirc",1.05,"auto","yes","yes",15); 
$("#int").mCustomScrollbar("vertical",300,"easeOutCirc",1.05,"auto","yes","yes",15); 
$("#arch").mCustomScrollbar("vertical",300,"easeOutCirc",1.05,"auto","yes","yes",15); 
$("#serv").mCustomScrollbar("vertical",300,"easeOutCirc",1.05,"auto","yes","yes",15); 
$("#contact").mCustomScrollbar("vertical",300,"easeOutCirc",1.05,"auto","yes","yes",15); 
}
$.fx.prototype.cur = function(){
if ( this.elem[this.prop] != null && (!this.elem.style || this.elem.style[this.prop] == null) ) {
 return this.elem[ this.prop ];
}
var r = parseFloat( jQuery.css( this.elem, this.prop ) );
return typeof r == 'undefined' ? 0 : r;
}
</script>
<script src="scripts\jquery.mCustomScrollbar.js"></script>

This is for the accordion menu located in the javascript include:

$(document).ready(function() {
$('.portfolio').click(function() {
 $('.accordionContent').slideUp('normal');
 if($(this).next().is(':hidden') == true) {
 $(this).next().slideDown('normal');
 } 
 }); 
$('.accordionContent').hide();
});
});

And last but not least the library that indicates which button on the menu to be highlighted (although I won't post all of it as it is long), also in the javascript include file:

$(document).ready(function() {
$('#about, #graph, #int, #arch, #serv, #contact').hide();
$('#about_button').click(function() {
$(this).removeClass("about").addClass("highlightabout");
$('#graph_button').removeClass("highlightgraph").addClass("graph");
$('#int_button').removeClass("highlightint").addClass("int");
$('#arch_button').removeClass("highlightarch").addClass("arch");
$('#serv_button').removeClass("highlightserv").addClass("serv");
$('#contact_button').removeClass("highlightcontact").addClass("contact");
$('#graph, #int, #arch, #serv, #contact, #box7').hide();
$('#about').show();
 }
$('#graph_button').click(function() {
$(this).removeClass("graph").addClass("highlightgraph");
$('#about_button').removeClass("highlightabout").addClass("about");
$('#int_button').removeClass("highlightint").addClass("int");
$('#arch_button').removeClass("highlightarch").addClass("arch");
$('#serv_button').removeClass("highlightserv").addClass("serv");
$('#contact_button').removeClass("highlightcontact").addClass("contact");
$('#about, #int, #arch, #serv, #contact, #box7').hide();
$('#graph').show();
});
});

As I understand it I am meant to include jQuery.noconflict() before all or one of these libraries?

Thank you for any help!

UPDATE: The jsfiddle to show my javascript work http://jsfiddle.net/hSRDn/

Answer 1

As you are using Prototype, which also defines $ you need to use jQuery.noConflict() as you already mentionend.

According to jQuerys documentation you have two choices:

After all libraries were included but before any jQuery code is written, use the noConflict() function:

<script type="text/javascript" src="other_lib.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
 $.noConflict();
 // Code that uses other library's $ can follow here.
</script>

This means, jQuery gives $ back to prototype. You need to use jQuery instead of $ then. For example:

<script type="text/javascript">
 $.noConflict();
 // Code that uses other library's $ can follow here.
 jQuery('#some-elemtent').hide(); // jQuery usage
 $('some-element').observe(....) // prototype usage 
</script>

Or, if you only use jQuery within a function scope (e.g. in a document load function) you can bind the $ to it like this:

<script type="text/javascript" src="other_lib.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
 $.noConflict();
 jQuery(document).ready(function($) {
 // Code that uses jQuery's $ can follow here.
 });
 // Code that uses other library's $ can follow here.
</script>

within this function the $ refers to the jQuery definition instead of prototype.

• user1164109: This helped so much. I have also realised there are other errors that were effecting my code. Thanks you very much!
• user1164109: I actually have run into one script that is not running again. I am not sure why. After reading your answer I used the last method to resolve the conflict within my javascript include but now the scrollbar script is conflicting, and this was the code that used the prototype. Am I doing something wrong. Should I update my question for you to understand the situation further?
• acme: Yes, that would help. Or even better: deploy it on jsbin.com and add a link in your post.
• user1164109: I have added the code in jsfiddle at the end of the original question, I couldn't really get it working in there though but it does demonstrate the layout of code that I am exactly working with. I have realised that the scrollbar does not work without jquery 1.4.2 but then including 1.4.2 will conflict with lightbox. Thanks for all your help so far.

Answer 2

First of all - use only one jQuery library. You do not need more than one. Second: really, think about reducing number of libraries. Third: $.noConflict() should be used just after including jQuery. After that dollar sign will not be an alias to jQuery - you will need to use jQuery instead of $

• acme: You are totally right, but maybe he is extending an existing application and need to include prototype therefore.