Difference between revisions of "Adding JavaScript and CSS to the page"
From Joomla! Documentation
(New page: {{stub}} {{inuse}}) |
|||
| Line 1: | Line 1: | ||
{{stub}} | {{stub}} | ||
| − | + | ||
| + | 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. To accomplish this, you first need to get a reference to the current document object: | ||
| + | |||
| + | <pre> | ||
| + | $document =& JFactory::getDocument(); | ||
| + | </pre> | ||
| + | |||
| + | To add a Javascript file, use this code: | ||
| + | <pre> | ||
| + | $document->addScript($url); | ||
| + | </pre> | ||
| + | |||
| + | For a stylesheet, use this code: | ||
| + | <pre> | ||
| + | $document->addStyleSheet($url); | ||
| + | </pre> | ||
| + | |||
| + | If you want to add custom HTML to the head tag, use this code: | ||
| + | <pre> | ||
| + | $document->addCustomTag($html); | ||
| + | </pre> | ||
Revision as of 09:48, 2 April 2008
 |
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. |
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. To accomplish this, you first need to get a reference to the current document object:
$document =& JFactory::getDocument();
To add a Javascript file, use this code:
$document->addScript($url);
For a stylesheet, use this code:
$document->addStyleSheet($url);
If you want to add custom HTML to the head tag, use this code:
$document->addCustomTag($html);