Difference between revisions of "Adding JavaScript and CSS to the page"
From Joomla! Documentation
(Modified spelling, grammar and capitalization.) |
|||
Line 2: | Line 2: | ||
This applies to version 1.5.? or higher! | This applies to version 1.5.? or higher! | ||
− | To have a well-formed XHTML document, you must put all references to Javascript and CSS files within the <code><head></code> portion. Since Joomla! generates all | + | To have a well-formed XHTML document, you must put all references to Javascript and CSS files within the <code><head></code> portion. Since Joomla! generates all the HTML that makes up a page before output, it is possible to add these references within the <head> tags from your extension. The simplest way to do this is to make use of the functionality built in to Joomla!: |
<source lang="php"> | <source lang="php"> | ||
− | // Add a reference to a | + | // Add a reference to a Javascript file |
// The default path is 'media/system/js/' | // The default path is 'media/system/js/' | ||
JHTML::script($filename, $path, $mootools); | JHTML::script($filename, $path, $mootools); | ||
Line 12: | Line 12: | ||
JHTML::stylesheet($filename, $path); | JHTML::stylesheet($filename, $path); | ||
</source> | </source> | ||
+ | Using these functions, Joomla! will take care of any additional requirements. For example, if your Javascript requires Mootools, setting <code>$mootools = true</code> 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, you will also need to manually code some of the steps that would be done automatically using the functions above. | |
− | + | First, get a reference to the current document object: | |
− | |||
− | |||
− | |||
<source lang="php"> | <source lang="php"> | ||
$document =& JFactory::getDocument(); | $document =& JFactory::getDocument(); | ||
</source> | </source> | ||
− | + | To add a Javascript file, use this code: | |
− | To add a | ||
<source lang="php"> | <source lang="php"> | ||
$document->addScript($url); | $document->addScript($url); | ||
</source> | </source> | ||
− | Note that this will '''not''' automatically include Mootools. | + | Note that this will '''not''' automatically include Mootools. If your script requires Mootools, include the line: |
<source lang="php"> | <source lang="php"> | ||
JHTML::_("behavior.mootools"); | JHTML::_("behavior.mootools"); | ||
</source> | </source> | ||
− | |||
For a stylesheet, use this code: | For a stylesheet, use this code: | ||
<source lang="php"> | <source lang="php"> | ||
$document->addStyleSheet($url); | $document->addStyleSheet($url); | ||
</source> | </source> | ||
− | + | 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 or stylesheet directly into the head of your document: | |
− | However, your | ||
<source lang="php"> | <source lang="php"> | ||
− | // Add | + | // Add Javascript |
$document->addScriptDeclaration($javascript, $type); | $document->addScriptDeclaration($javascript, $type); | ||
Line 45: | Line 40: | ||
$document->addStyleDeclaration($styles, $type); | $document->addStyleDeclaration($styles, $type); | ||
</source> | </source> | ||
− | |||
For example, the following code is used to define a custom tool tip that takes advantage of mootools. | For example, the following code is used to define a custom tool tip that takes advantage of mootools. | ||
<source lang="php"> | <source lang="php"> | ||
Line 70: | Line 64: | ||
$document->addScriptDeclaration(getToolTipJS("mytool","MyToolTip")); | $document->addScriptDeclaration(getToolTipJS("mytool","MyToolTip")); | ||
</source> | </source> | ||
− | + | 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 <code>mytooltip.css</code> 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 <code><script /></code> or <code><style /></code> tags, and cannot add anything outside those tags. | + | There will be some occasions where even these functions are not flexible enough, as they are limited to writing the contents of <code><script /></code> or <code><style /></code> 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, use <code>$document->addCustomTag</code>: |
<source lang="php"> | <source lang="php"> | ||
$stylelink = '<!--[if lte IE 6]>' ."\n"; | $stylelink = '<!--[if lte IE 6]>' ."\n"; |
Revision as of 17:38, 26 December 2010
This article is a stub and needs to be expanded. If you can provide information or finish this article you're welcome to do so. Please remove this message afterwards or replace with {{inuse}} while making major edits. - Thank you. |
This applies to version 1.5.? or higher!
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 the HTML that makes up a page before output, it is possible to add these references within the <head> tags 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, you will also need to manually code some of the steps that would be done automatically using the functions above.
First, 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, 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 or 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, 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);