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.