jQuery noConflict Tips


Some tips which i feel you need to know before using jQuery library:

1. You can use jQuery instead of $.

2. Predefined alias for jQuery: you can assign jQuery to any variable. With this you can load any versions of jQuery into your site.

<!– load jQuery 1.1.3 –>
<script type=”text/javascript” src=”http://code.jquery.com/jquery-1.1.3.js”></script>
<script type=”text/javascript” src=”jquery.dimensions.min.js”></script>

<!– revert global jQuery and $ variables and store jQuery in a new variable –>
<script type=”text/javascript”>
var jQuery_1_1_3 = $.noConflict(true);
</script>

<!– load jQuery 1.3.2 –>
<script type=”text/javascript” src=”http://code.jquery.com/jquery-1.3.2.js”></script>

<!– revert global jQuery and $ variables and store jQuery in a new variable –>
<script type=”text/javascript”>
var jQuery_1_3_2 = $.noConflict(true);
</script>

3. To use the $ variable even when an alias is mentioned
 Syntax:  (function($){//$ Code goes here})(jQuery_1_3_2);

(function($) {
 $(‘<button>Use jQuery 1.1.3</button>’)
  .click(function() {
   alert(‘Top: ‘ + $(this).offset().top + ‘\n’ +
    ‘jQuery: ‘ + $.fn.jquery);
  })
  .appendTo(‘body’);
})(jQuery_1_1_3);

4. Always ensure that jQuery’s noConflict method is called above any other javascript libraries. Or else the noConflict will be of no use and gives errors.

5. Finally to check if jQuery is defined:

 if(typeof (jQuery) == “undefined”) {//jQuery undefined} else {//jQuery defined}

Feel free to leave a reply here...

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s