jQuery.noConflict() examples

 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2 /jquery.min.js"></script>

 

 

 

 

 

<script type='text/javascript'>

$(window).load(function(){

$(document).ready(function(){

      $('#imgSmile').width(200);

      $('#imgSmile').mouseover(function()

      {

         $(this).css("cursor","pointer");

         $(this).animate({width: "500px"}, 'slow');

      });

   $('#imgSmile').mouseout(function()

     {   

         $(this).animate({width: "200px"}, 'slow');

      });

  });

});  

</script>

 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/j query.min.js"></script>

 

<script type='text/javascript'>

 var jq152 = jQuery.noConflict();

</script>

 

<script type='text/javascript'>

jq152(window).load(function(){

jq152(document).ready(function(){

      jq152('#imgSmile').width(200);

      jq152('#imgSmile').mouseover(function()

      {

         jq152(this).css("cursor","pointer");

         jq152(this).animate({width: "500px"}, 'slow');

      });

   jq152('#imgSmile').mouseout(function()

     {   

         jq152(this).animate({width: "200px"}, 'slow');

      });

  });

});  

</script>

 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2 /jquery.min.js"></script>

 

 

 

 

 

<script type='text/javascript'>

 

$(window).load(function(){

$(document).ready(function(){

      $('#imgSmile').width(200);

      $('#imgSmile').mouseover(function()

      {

         $(this).css("cursor","pointer");

         $(this).animate({width: "500px"}, 'slow');

      });

   $('#imgSmile').mouseout(function()

     {   

         $(this).animate({width: "200px"}, 'slow');

      });

  });

});

 

</script>

 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2 /jquery.min.js"></script>

 

<script type='text/javascript'>

 jQuery.noConflict();

</script>

 

<script type='text/javascript'>

(function($) {

$(window).load(function(){

$(document).ready(function(){

      $('#imgSmile').width(200);

      $('#imgSmile').mouseover(function()

      {

         $(this).css("cursor","pointer");

         $(this).animate({width: "500px"}, 'slow');

      });

   $('#imgSmile').mouseout(function()

     {   

         $(this).animate({width: "200px"}, 'slow');

      });

  });

});

})(jQuery);

</script>

 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2 /jquery.min.js"></script>

 

<script type='text/javascript'>

 

$(window).load(function(){

$(document).ready(function(){

      $('#imgSmile').width(200);

      $('#imgSmile').mouseover(function()

      {

         $(this).css("cursor","pointer");

         $(this).animate({width: "500px"}, 'slow');

      });

   $('#imgSmile').mouseout(function()

     {   

         $(this).animate({width: "200px"}, 'slow');

      });

  });

});  

</script>

 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jq uery.min.js"></script>

 

<script type='text/javascript'>

jQuery.noConflict();

jQuery(window).load(function(){

jQuery(document).ready(function(){

      jQuery('#imgSmile').width(200);

      jQuery('#imgSmile').mouseover(function()

      {

         jQuery(this).css("cursor","pointer");

         jQuery(this).animate({width: "500px"}, 'slow');

      });

   jQuery('#imgSmile').mouseout(function()

     {   

         jQuery(this).animate({width: "200px"}, 'slow');

      });

  });

});  

</script>

 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2 /jquery.min.js"></script>

 

<script type='text/javascript'>

 

$(window).load(function(){

$(document).ready(function(){

      $('#imgSmile').width(200);

      $('#imgSmile').mouseover(function()

      {

         $(this).css("cursor","pointer");

         $(this).animate({width: "500px"}, 'slow');

      });

   $('#imgSmile').mouseout(function()

     {   

         $(this).animate({width: "200px"}, 'slow');

      });

  });

});  

</script>

 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2 /jquery.min.js"></script>

 

<script type='text/javascript'>

var $j = jQuery.noConflict();

$j(window).load(function(){

$j(document).ready(function(){

      $j('#imgSmile').width(200);

      $j('#imgSmile').mouseover(function()

      {

         $j(this).css("cursor","pointer");

         $j(this).animate({width: "500px"}, 'slow');

      });

   $j('#imgSmile').mouseout(function()

     {   

         $j(this).animate({width: "200px"}, 'slow');

      });

  });

});  

</script>

Many JavaScript libraries use $ as a function or variable name just as jQuery does. In jQuery's case, $ is just an alias for jQuery, so all functionality is available without using $. If we need to use another JavaScript library alongside jQuery, we can return control of $ back to the other library with a call to noConflict() in jQuery. In a similar way we can use two different jQuery releases and also prevent a conflict.

Below are four examples of using jQuery noConflict(). The scripts on the left side of the page are all the same. On the right side are the modified scripts with additions/substitutions shown in red.

Your scripts will be different to these examples, but the principal is the same. You may need to insert lines as shown below, and as on three examples change every $ sign to a variable. Only change jQuery scripts to noConflict. Leave Mootools and js.prototype scripts as they are. Make sure your scripts function individually before changing anything, and ask if you need help.

Example 1

This shows a variable $j being assigned within the script, and all the $ signs in the script are replaced by $j

Example 2

This shows the $ being replaced by jQuery which is also assigned within the script.

Example 3

This shows a variable jq152 being assigned outside the script, and all the $ signs in the script are replaced by jq152. Useful if you are using two jquery libraries. The listing needs to be exactly as shown below. i.e call the first library 1.5.2, list the no conflict script, list the script. Next list the call for the second library, list the no conflict script, list the script. If the second library used jquery 1.7.1 you could use the variable jq171 which down the line would help you identify which script is used with which library.

Example 4

This assigns the noConflict statement outside of the script and the $ in the script is not changed. This works well with a number of plugins.