DESIGNED DEVELOPED DELIVERED

Mob: 07760 392284edward@ee-web.co.uk

ee-web thinks... a bit

Go on, make my day ... leave a comment

Using two javascript libraries…

February 18th, 2011 by Edward

I had developed a very simple jQuery application for a joomla site. Naturally enough I was importing the the jQuery thus:

<script type="text/javascript" src="<?php echo $this->baseurl;?>/templates/<?php echo $this->template;?>/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="<?php echo $this->baseurl;?>/templates/<?php echo $this->template;?>/js/homeAnim.js"></script>

and all was well.

However, my client wanted to use the wonderful yootool carosel which uses the mootool library. I have had great success with this joomla module so imagine my surprise when it didn’t work.

Turned out to be a conflict between the jQuery and mootools librarys – to do with the scope of variables, and how they jQuery uses the $.

Some google time later… edit the index.php header like this:

<script>
jQuery.noConflict();
</script>

<jdoc:include type="head" />

In other words, set jQuery to load before the mootools library. I did this but putting it before the call to the type=”head” in the header – I had seen posts about editing other files, but this seemed to work – might have been something to do with earlier versions of joomla??? You then need to set jQuery to the noConflict() mode.

You will then need to edit you jQuery calls and remove the $ and replace with jQuery thus:

jQuery(document).ready(function() { ...
jQuery(selector).click(function(){...

rather than what you’d expect:

$(document).ready(function() { ...
$(selector).click(function(){...

and all works fine!

I checked this out in IE7 and 8, FF, Chrome, Safai and Opera.

categories

Edward owns and runs ee-web design and has been building websites for over 12 years. He is passionate about... most things really

Was this post helpful or interesting? Spread the news.

Leave a comment

*


tag