Hey everybody.
Recently I started using more and more MooTools in web development and thus was looking for a way to minimize loading time of the library (~70kb).
I used solution similar to one here:
Injecting jQuery into a page fails when using Google AJAX Libraries API.
(note: another the good pracise is to use Gzip compresion)In the tutorial I'll use
MooTools 1.1.2, as you can ran into
problems with upcoming FireFox 3.6 with the 1.1.1 version that's shipped by default with Joomla.
Download the YUI Compressed version and place in /media/system/js/mootools-1.1.2-yc.js.
first of all, let's remove MooTools from loading when used JHTML::_("behavior.mootools"):
Code:
//remove mootools.js
$header_data = $this->getHeadData();
reset($header_data['scripts']);
foreach($header_data['scripts'] as $key=>$value) {
if(strpos($key, 'mootools.js')) {
unset($header_data['scripts'][$key]);
}
}
$this->setHeadData($header_data);
(note: this has to be set after closing and reopening php tag ?><?php at the beginning of index.php)Solution Ain templates' index.php insert into the <head>:
Code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.1.2/mootools-yui-compressed.js"></script>
<script type="text/javascript">
if (typeof MooTools == 'undefined') {
document.write('<script type="text/javascript" src="' + top.location + 'media/system/js/mootools-1.1.2-yc.js"><\/script>');
}
</script>
Solution BI don't like inline in the html, so the alternative is to use following code in templates' index.php in <head>:
Code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.1.2/mootools-yui-compressed.js"></script>
<script type="text/javascript" language="javascript" src="<?php echo $tmpTools->templateurl(); ?>/js/mootools-1.1.2-loader.js"></script>
in conjunction with a script in template folder /js/mootools-1.2.4-loader.js containing:
Code:
/* mootools-1.1.2-loader.js */
// src: http://stackoverflow.com/questions/840240/injecting-jquery-into-a-page-fails-when-using-google-ajax-libraries-api
// src: http://www.endusersharepoint.com/2008/12/04/power-user-toolbox-javascript-for-sharepoint-pt6/
if (typeof MooTools == 'undefined') {
document.write('<script type="text/javascript" src="' + top.location + 'media/system/js/mootools-1.1.2-yc.js"><\/script>');
}
so far it seems to work fine.
I've tried loading the library in the mootools-1.1.2-loader.js file using document.write('<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.1.2/mootools-yui-compressed.js"><\/script>') but it didn't work sometimes.
Edit: added note to remove loading defaulet MooTools from <head>.
Login
Register
Rules
FAQ
The team
