How to solve Blogger’s jQuery conflicts with jQuery.noConflict in 5 minutes!

When bloggers that are using Blogger have more than one JavaScript library (jQuery, MooTools etc) on their blogs, sometimes they get weird conflicts and sometimes they don’t if they are very lucky!


Yesterday however was not the lucky day for one of my visitors. She had stumbled upon my pure CSS-based emoticons for Blogger tutorial blog post and wanted to have those similar emoticons on her blog. She had perfectly followed my installation instructions but to her dismay, those pure CSS-based (made possible jQuery) emoticons failed to appear on her blog and she came back to me for some answers. Today, I’m going to provide some for her! :)




Why sometimes we get conflicts with our jQuery plug-ins?


Let me quote something from jquery.com:


The jQuery library, and virtually all of its plugins are constrained within the jQuery namespace. As a general rule, "global" objects are stored inside the jQuery namespace as well, so you shouldn't get a clash between jQuery and any other library (like Prototype, MooTools, or YUI).

That said, there is one caveat: By default, jQuery uses "$" as a shortcut for "jQuery"

Yes, the culprit that caused all those weird conflicts is indeed ‘$’!


Thankfully, such conflicts can easily be resolved by calling upon the jQuery.noConflict() method. Let me show you an example.


How to solve Blogger’s jQuery conflicts with jQuery.noConflict


In my pure CSS-based emoticons for Blogger tutorial blog post, the JavaScript code snippet that causes conflicts to one of my visitors is the one shown down below.


<script type='text/javascript'>
$(document).ready(function(){
$(&#39;.post-body, .comments&#39;).emoticonize({
//delay: 500,
//animate: true,
//exclude: &#39;pre, code, .no-emoticons&#39;
});
})
</script>

To solve the conflicts once and for all, just replace the whole code snippet shown earlier with the following down below.


<script>
var $j = jQuery.noConflict();
// Use jQuery via $j(…)
$j(document).ready(function(){
});
</script>

<script type='text/javascript'>
jQuery(document).ready(function(){
jQuery(&#39;.post-body, .comments&#39;).emoticonize({
//delay: 500,
//animate: true,
//exclude: &#39;, pre, code, .no-emoticons&#39;
});
})
</script>

Pay attention to those marked in red and green. The one marked in green is where we call upon the assistance of the jQuery.noConflict() method and it is must be placed right AFTER you call upon your JavaScript libraries (in your Blogger template) and BEFORE the code snippet that is causing the conflicts. The ones marked in red are where we replaced those conflict-making ‘$’(you would understand better after comparing the BEFORE and AFTER versions) with ‘jQuery’.


To my visitor that is having problems with her pure CSS-based emoticons jQuery plug-in, you may now save your Blogger template and enjoy your new emoticons. :)


Even though the examples shown earlier are to help one of my visitors solve conflicts that are caused by her pure CSS-based emoticons jQuery plug-in, the lesson that you have learned here today can also help you resolve conflicts created by other jQuery plug-ins. I strongly recommend bloggers that are fond of using JavaScript libraries (jQuery) on their blogs to read and master other noteworthy techniques that they can also use to resolve conflicts between their jQuery plug-ins and other JavaScript libraries.

Subscribe via RSS or Email:

Related Posts


10 comments:

SOFTECHNOGEEK said...

i didn't face this problem but in future if it's happen i will be alert thanx

Beben Koben said...

Happy New Year 2012 my friend homebiss \m/

homebiss said...

Beben Koben,

Thanks but I do not celebrate the New Year. New Year celebrations are for Christians and I'm not a Christian. :)

Beben Koben said...

Are u a moslem!
Just appreciated master, not seriuosly...that is a changes times?

Social media tips said...

Really helpful article for me.. I am faced this type of problem past days. now i am got one good solution from you. Thanks - by www.itmashable.com

homebiss said...

Social media tips,

No problem. I'm glad it is helpful for you. :)

kewin said...

Thanks man,really appreciate this tips.Got problem when trying to add Google+ badge at my blog yesterday.This tips really help me to solve the problem.

Thanks again.

winlin said...

Nice blog I like it very light!!, but why you don't have a search box, how can we find tutorials in this blog, browsing page by page :) ?

homebiss said...

winlin,

Thanks for the compliment and I will keep your suggestion in mind. Thanks.

green-b said...

thank you so much it's helpin' me

Post a Comment

  • Commenters are encouraged to leave comments via OpenID but if you have problems in leaving one via OpenID, please refer to this excellent guide.
  • Comments that add tremendous value to the blog post will not only get approved but also will be personally tweeted (learn how!) by the blogger behind this blog, giving commenters the opportunity to get even more traffic and gain even more exposure to their sites or blogs.
  • Comments that have links in the bodies of comments will never be approved.
  • Preferably comments should be made in English but comments in other languages are also acceptable.