Actions

J3.x

Adding JavaScript and CSS to the page

From Joomla! Documentation

Revision as of 03:28, 12 February 2009 by Clogan (Talk | contribs)


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);

Using the $document->addCustomTag() API may be used to insert any type of HTML into the HEAD tag. For instance you may have some javascript code that must be generated dynamically using PHP code (and therefor is not in a .js file), and then placed into the HEAD. The below shows some sample code to accomplish just that. The code is used to define a custom tool tip that takes advantage of mootools.

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

    $document->addStyleSheet("/joomla/components/com_mycustomcomponent/css/mytooltip.css",'text/css',"screen");
    $document->addCustomTag(getToolTipJS("mytool","MyToolTip"));
    
    

To make the above code usable on any page, you would need a corresponding style sheet added to the HEAD that contains information for the new Tool Tip class. The contents of mytooltip.css are beyond the scope of this document. This example is not even entirely useful however the methods used here can be used to insert any type of javascript into the HEAD of a document. I use it most when I have forms with <SELECT> elements that need to be filled in with information from a database. Then when the user selects an <OPTION> in the <SELECT> element some dynamically generated javascript function will be called to perform different actions based on what was selected. I am sure you will find many other applications for this technique. One last thing to note is the use of the window.addEvent() function in the javascript created. For cross-browser compatibility it would be wiser to use event listeners. Information on event listeners can be found in almost any javascript/DOM documentation.