How to make jQuery work with mootools in Joomla?

Asked By avelyn 420 points N/A Posted on - 05/29/2011

I've been studying joomla recently. So far, I've learned a few things for the past few weeks. I've done building my own custom template which is built from scratch.

The only problem is when I put some jquery script. I do have a banner I want to animate it using a jquery script. After I've coded my desired jquery script for my banner I save the script on accessible folder (e.g. /media/system/js/) but when I run my script on a browser the script didn’t work. I'm sure that I coded the script correctly. I search through Google and find out that Joomla uses mootols as its default for javascript framework, and there are some issues of using jquery. It seems that jquery and mootols have conflict. 

There are tutorials over the net telling me to put additional script but I don't know how. Can someone provide me some sets of instruction on how to use jquery in joomla?  Instruction with an associate image for each set would be better.

• Status: Open
• Question Views: 1205
• Answer Count: 2
• Vote Up 21 Vote Down

• Answer Accepted: Yes
• Question Category: ProgScripting Languages

Best Answer by Ashley_bates

Go To Solution

Best Answer

Best Answer

Answered By Ashley_bates 0 points N/A #108282

How to make jQuery work with mootools in Joomla?

Hi Avelyn,

jQuery functions are typically 'housed' within its own namespace, so conflicts should not really arise UNLESS the functions are aliased the same. This type of 'confusion' tends to happen more often between jQuery and prototype.js because the use the same alias ($) by default. (note that while I discuss prototype vs jquery below, the principle is the same).

To give you a better idea here is the kicker: the last library loaded takes priority. Consider this:

<script type="text/javascript" src='lib/js/prototype.js'></script>
<script type="text/javascript" src='lib/js/jquery.js'></script>

Since jQuery is loaded last, calling $('.someClass').hide() will call the jQuery function and NOT the prototype since jQuery was the last one to bind the '$' as an alias.

jQuery provides a workaround this though: jQuery.noConflict();

so before calling any functions, put this statement: $j = jQuery.noConflict();

and it will make all jQuery functions use $j and revert $ to prototype.

 

Hope this helps

Ashley

About Ashley_bates

Questions
0

Answers
4

Best Answers
3

• Vote Up 0 Vote Down

• Posted on - 06/14/2011
• Question Category: ProgScripting Languages

Answered By jack466453 0 points N/A #108283

How to make jQuery work with mootools in Joomla?

To simply get JQuery to work with mootools, do the following within the view (mvc — default.php):

Code:
JHTML::_('behavior.mootools');

$document = &JFactory::getDocument();
$document->addScript( JPATH_SITE.'/media/system/js/jquery.js' );
$document->addCustomTag( '<script type="text/javascript">jQuery.noConflict();</script>' );

About jack466453

Questions
0

Answers
3

Best Answers
1

• Vote Up 0 Vote Down

• Posted on - 12/22/2011
• Question Category: ProgScripting Languages