ToHeader Joomla plugin - Using the ToHeader Plugin
Facts - Php
Friday, 08 August 2008 11:48
Article Index
ToHeader Joomla plugin
Using the ToHeader Plugin
Download the ToHeader Content Plugin
Question
Invalid XML
Mootools.js disabled
All Pages

Using the ToHeader Plugin

After installing the plugin it should be enabled first. Here is an example that can be copied and pasted into your Joomla article text. This example calls jQuery javascript. Paste the example as html code, do not use the WYSIWYG html editor for editing the article:

<toheader>
<script src="/jquery-1.2.6/dist/jquery.pack.js"/>
<style>
  p { font: italic; }
</style>
<script>
<!--
$(document).ready(function(){
$("a").click(function(event){
   event.preventDefault();
   alert("Thanks for visiting- babu!");
 });
});
//-->
</script>
 
</toheader>

For the example above you also need to download jquery and install it in the root directory of your website. Don't forget to add an "index.html" in each subdirectory. Click on any link in the page containing the toheader-tag above to see the effect of the jQuery script. You should see an alert when clicking on a link.

The tags inside

toheader
 will be transferred to the html header.

To be more precisely: the code inside the

toheader
 tag will show up in the html code that corresponds to

<jdoc:include type="head" />

in your joomla template.

The ToHeader content plugin is not only suitable for using jQuery scripts in your Joomla website. It is also possible to use the ToHeader content plugin with similar javascript/Ajax frameworks such as the Dojo Toolkit. But to be honest, I have not tried using the Dojo Toolkit with the ToHeader plugin.

Example: customtag element

The custom tag element can be used to include other code than script and link tags into the HTML head element. You can use as many customtag elements as you want and they will appear in the same order inside the HTML header.

For example you can use the customtag element for including browser dependent javascript code:

<toheader>
  <customtag>
    <!--[if IE]>
      <script type="text/javascript" src="/jQuery/flot/flot-0.5/excanvas.pack.js">;</script>
    <![endif]-->
    <script type="text/javascript" src="/jquery/jquery.pack.js">;</script>
    <script type="text/javascript" src="/flot/jquery.flot.js">;</script>
  </customtag>
</toheader>
 

In this case the jquery.flot.js depends on the jquery and excanvas scripts. So the correct order of the scripts in the HTML head tag is first the excanvas script and then the jquery script and finally the flot script.

The browser dependent script jquery.flot.js can not be included with just a script tag, because it needs XML comment tags. Therefore I use the customtag element to include it.

Internally this customtag element triggers a call to the JDocument::customtag method of the Joomla API (1.5.10). Unfortunately the customtag method puts content always after script and link elements. So if we used a customtag element just for the excanvas script and then just used script elements for the other scripts the excanvas script would be included after the other two scripts in the HTML head element.

So the only way to get the order of the three scripts right is including each script inside the "customtag" element.

Also note the empty javascript statement, ";", inside the script tags. Javascript between script tags in combination with an src attribute should be ignored by browsers, but the ToHeader plugin needs it. The ToHeader plugin treats the content of the customtag element as xml. So without these empty statements the mandatory closing script tags (</script>) would not be in the content of the resulting page.