MooTools and jQuery conflict problem in Internet Explorer, noConflict

When we use MooTools and jQuery together in our page, common problem we found is that some functionality is not working properly for MooTools or jQuery

Sometimes it is hard to find out that the problem is in using both together

The solution is so simple. We have to say jQuery to not to conflict with other libraries.

You have to add jQuery.noConflict() to your jQuery code.

<p>jQuery sets this paragraph's color to red but MooTools sets the border color.</p>
<script type="text/javascript" src="jquery-1.3.js"></script>
<script type="text/javascript">
//no conflict jquery this makes possible to use both library together
jQuery.noConflict();
//jquery stuff
(function($) {
$('p').css('color','#ff0000');
})(jQuery);
</script>
<script type="text/javascript" src="moo1.2.js"></script>
<script type="text/javascript">
//moo stuff
window.addEvent('domready',function() {
$$('p').setStyle('border','1px solid #fc0');
});
</script>

jQuery is namespaced so the $ function is free for MooTools to take hold of. The jQuery code passes jQuery to itself and then we call the argument $, thus jQuery is contained, so to speak.

Obviously including two libraries within the same page is resource-consuming but if it’s acceptable to the project and allows you to implement plugins from each library quickly, this may be a great option for you.