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.