Azharkamar.com

Solving jQuery Conflicts with other JavaScript Libraries

Tutorials
3 Nov 2010
3 comments

I was developing a page that for some reason had to use 3 different JavaScript libraries (jQuery, MooTools and Highslide) and got into so much problems. Largely because the different libraries were conflicting with each other.

So I found this thing that helped me: http://api.jquery.com/jQuery.noConflict

I just added the ‘$.noConflict();’ method and changed the ‘(function($ {‘ sign to ‘jQuery(document).ready(function($) {‘.

It solved all the conflicts for me. ;)

How to Add the noConflict() Script for jQuery

<script type="text/javascript" src="other_lib.js">
<script type="text/javascript" src="jquery.js">
<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>

Author - Azhar Kamar
3 Comments Revolving around this Article
  1. Jay

    This is what I am trying to figure out as animated jQuery background won’t work when there is the jQuery colorbox code

    $.noConflict();
    jQuery(document).ready(function($)
    {
    jQuery(‘#midground’).css({backgroundPosition: ‘0px 0px’});
    jQuery(‘#foreground’).css({backgroundPosition: ‘0px 0px’});
    jQuery(‘#background’).css({backgroundPosition: ‘0px 0px’});

    jQuery(‘#midground’).animate({
    backgroundPosition:”(-10000px -2000px)”
    }, 240000, ‘linear’);

    jQuery(‘#foreground’).animate({
    backgroundPosition:”(-10000px -2000px)”
    }, 120000, ‘linear’);

    jQuery(‘#background’).animate({
    backgroundPosition:”(-10000px -2000px)”
    }, 480000, ‘linear’);

    });

    $.noConflict();

    jQuery(function($)
    {
    //Examples of how to assign the ColorBox event to elements
    jQuery(“.group1″).colorbox({rel:’group1′});
    jQuery(“.group2″).colorbox({rel:’group2′, transition:”fade”});
    jQuery(“.group3″).colorbox({rel:’group3′, transition:”none”, width:”75%”, height:”75%”});
    jQuery(“.group4″).colorbox({rel:’group4′, slideshow:true});
    jQuery(“.ajax”).colorbox();
    jQuery(“.youtube”).colorbox({iframe:true, innerWidth:425, innerHeight:344});
    jQuery(“.iframe”).colorbox({iframe:true, width:”80%”, height:”80%”});
    jQuery(“.inline”).colorbox({inline:true, width:”50%”});
    jQuery(“.callbacks”).colorbox({
    onOpen:function(){ alert(‘onOpen: colorbox is about to open’); },
    onLoad:function(){ alert(‘onLoad: colorbox has started to load the targeted content’); },
    onComplete:function(){ alert(‘onComplete: colorbox has displayed the loaded content’); },
    onCleanup:function(){ alert(‘onCleanup: colorbox has begun the close process’); },
    onClosed:function(){ alert(‘onClosed: colorbox has completely closed’); }
    });

    //Example of preserving a JavaScript event for inline calls.
    jQuery(“#click”).click(function(){
    jQuery(‘#click’).css({“background-color”:”#f00″, “color”:”#fff”, “cursor”:”inherit”}).text(“Open this window again and this message will still be here.”);
    return false;
    });
    });

  2. Jay

    How did you get your conflicting jQuery to work. This is the code I am implementing.

    $.noConflict();
    jQuery(document).ready(function($)
    {
    jQuery(‘#midground’).css({backgroundPosition: ‘0px 0px’});
    jQuery(‘#foreground’).css({backgroundPosition: ‘0px 0px’});
    jQuery(‘#background’).css({backgroundPosition: ‘0px 0px’});

    jQuery(‘#midground’).animate({
    backgroundPosition:”(-10000px -2000px)”
    }, 240000, ‘linear’);

    jQuery(‘#foreground’).animate({
    backgroundPosition:”(-10000px -2000px)”
    }, 120000, ‘linear’);

    jQuery(‘#background’).animate({
    backgroundPosition:”(-10000px -2000px)”
    }, 480000, ‘linear’);

    });

    $.noConflict();

    jQuery(function($)
    {
    //Examples of how to assign the ColorBox event to elements
    jQuery(“.group1″).colorbox({rel:’group1′});
    jQuery(“.group2″).colorbox({rel:’group2′, transition:”fade”});
    jQuery(“.group3″).colorbox({rel:’group3′, transition:”none”, width:”75%”, height:”75%”});
    jQuery(“.group4″).colorbox({rel:’group4′, slideshow:true});
    jQuery(“.ajax”).colorbox();
    jQuery(“.youtube”).colorbox({iframe:true, innerWidth:425, innerHeight:344});
    jQuery(“.iframe”).colorbox({iframe:true, width:”80%”, height:”80%”});
    jQuery(“.inline”).colorbox({inline:true, width:”50%”});
    jQuery(“.callbacks”).colorbox({
    onOpen:function(){ alert(‘onOpen: colorbox is about to open’); },
    onLoad:function(){ alert(‘onLoad: colorbox has started to load the targeted content’); },
    onComplete:function(){ alert(‘onComplete: colorbox has displayed the loaded content’); },
    onCleanup:function(){ alert(‘onCleanup: colorbox has begun the close process’); },
    onClosed:function(){ alert(‘onClosed: colorbox has completely closed’); }
    });

    //Example of preserving a JavaScript event for inline calls.
    jQuery(“#click”).click(function(){
    jQuery(‘#click’).css({“background-color”:”#f00″, “color”:”#fff”, “cursor”:”inherit”}).text(“Open this window again and this message will still be here.”);
    return false;
    });
    });

  3. [...] This post was mentioned on Twitter by Javascript News, Azhar Kamar. Azhar Kamar said: Solving jQuery Conflicts with other JavaScript Libraries http://bit.ly/9JCY4X [...]

Write a Comment! NOW! :)

Current ye@r *