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
//exclude: 'pre, code, .no-emoticons'
To solve the conflicts once and for all, just replace the whole code snippet shown earlier with the following down below.
var $j = jQuery.noConflict();
// Use jQuery via $j(…)
//exclude: ', pre, code, .no-emoticons'
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. :)