Home
Adding JavaScript and CSS to the page
FAQs - New to Joomla!

To have a well-formed XHTML document, you must put all references to Javascript and CSS files within the <head> portion. Since Joomla! generates all of the HTML that makes up a page before output, it is possible to add these references to the <head> tag from your extension. The simplest way to do this is to make use of the functionality built in to Joomla!:

// Add a reference to a javascript file
// The default path is 'media/system/js/'
JHTML::script($filename, $path, $mootools);
 
// Add a reference to a CSS file

// The default path is 'media/system/css/'
JHTML::stylesheet($filename, $path);

Using these functions, Joomla! will take care of any additional requirements. For example, if your javascript requires Mootools, setting $mootools = true will automatically ensure that Mootools is loaded, if it has not already been done.


However, the above functions will not be flexible enough for every scenario, and so it is possible to tap into the underlying functionality instead. (Of course, this means that you will also need to manually code some of the steps that would be done automatically using the functions above!)

Firstly, you will need to get a reference to the current document object:

$document =& JFactory::getDocument();

To add a javascript file, use this code:

$document->addScript($url);

Note that this will not automatically include Mootools. If your script requires Mootools, you should also include the line:

JHTML::_("behavior.mootools");

For a stylesheet, use this code:

$document->addStyleSheet($url);

However, your javascript or CSS might not be located in a separate file - you might want to generate them using PHP. In this case you can write the script/stylesheet directly into the head of your document:

// Add javascript
$document->addScriptDeclaration($javascript, $type);
 
// Add styles

$document->addStyleDeclaration($styles, $type);

For example, the following code is used to define a custom tool tip that takes advantage of mootools.

function getToolTipJS($toolTipVarName, $toolTipClassName){

    $javascript = 'window.addEvent(\"domready\", function(){' ."\n";
    $javascript .= "\t"  .'var $toolTipVarName = new Tips($$("' . $toolTipVarName .'"), {' ."\n";
    $javascript .= "\t\t"   .'className: "' .$toolTipClassName .'",' ."\n";
    $javascript .= "\t\t"   .'initialize: function(){' ."\n";
    $javascript .= "\t\t\t"    .'this.fx = new Fx.Style(this.toolTip, "opacity", {duration: 500, wait: false}).set(0);' ."\n";
    $javascript .= "\t\t"   .'},' ."\n";
    $javascript .= "\t\t"   .'onShow: function(toolTip){' ."\n";
    $javascript .= "\t\t\t"    .'this.fx.start(1);' ."\n";
    $javascript .= "\t\t"   .'},' ."\n";
    $javascript .= "\t\t"   .'onHide: function(toolTip) {' ."\n";
    $javascript .= "\t\t\t"    .'this.fx.start(0);' ."\n";
    $javascript .= "\t\t"   .'}' ."\n";
    $javascript .= "\t"  .'});' ."\n";
    $javascript .= '});' ."\n\n";
    return $javascript;

}
 
$document =& JFactory::getDocument();
$document->addStyleSheet("/joomla/components/com_mycustomcomponent/css/mytooltip.css",'text/css',"screen");

$document->addScriptDeclaration(getToolTipJS("mytool","MyToolTip"));

(Note that, in order for this javascript to be functionally useful, it would be necessary to include the appropriate class name in the HTML, as well as providing the mytooltip.css file. Both are outside the scope of this article.)


There will be some occasions where even these functions are not flexible enough, as they are limited to writing the contents of <script /> or <style /> tags, and cannot add anything outside those tags. One example would be the inclusion of a stylesheet link within conditional comments, so that it is picked up only by Internet Explorer 6 and earlier. To do this, we can use $document->addCustomTag:

$stylelink = '<!--[if lte IE 6]>' ."\n";

$stylelink .= '<link rel="stylesheet" href="/../css/IEonly.css" />' ."\n";
$stylelink .= '<![endif]-->' ."\n";
 

$document =& JFactory::getDocument();
$document->addCustomTag($stylelink);
< Prev   Next >
 

Add comment


Security code
Refresh

Latest Posts

Close All | Open All
"The name or email address you typed is already in use!"
You need to modify this file
components/com_k2/models/item.php Read More ...
Meeting suspended due to holidays
Due to the summer holidays, the next meeting is scheduled for the end of August.. Dont forget to bring back send a postcard and bring back a stick of rock for everone! Read More ...
combined phish and virus?
We usually get sent phish emails to see if they are legit but here is a  good one. the email came from 123Greetings.com <ecards@123greetings.com>with an attachment ecard.zip which is a classic trojan virus. Read More ...
priority vs speed. decent docs and cut and paste
I was recently asked via twitter {xtypo_quote}@mandville how do u cope with the volume @ joomla forums?{/xtypo_quote} Read More ...
Phishing email
We dont send emails like this Dear Webmail/E-mail user,

This message is from our Webmail Messaging Center to all our account
owners.We are currently upgrading our database and e-mail center. We are
deleting all unused webmail account to create more space for new accounts. Read More ...
Close All | Open All

The Joomla!(R) name is used under a limited license from Open Source Matters in the United States and other countries. Securehotel.org.uk is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.