Using Javascript effects with Joomla! 1.5

(Read more interesting articles on Joomla! 1.5 here.)

Using JavaScript effects

Joomla! includes mootools—a powerful compact JavaScript framework. Mootools enables us to do many things, but it is used extensively in Joomla! to create client-side effects. Some of these, such as the accordion, are accessible through Joomla! classes. Others require special attention.

In some instances it may be necessary to manually add the mootools library to the document. We can do this using the JHTML behavior.mootools type:



A pane is an XHTML area that holds more than one set of information. There are two different types of panes:

  • Tabs: Tabs provides a typical tabbed area with tabs to the top that are used to select different panes.
  • Sliders: Sliders, based on the mootools accordion, are vertical selections of headings above panels that can be expanded and contracted.

We use the JPane class to implement panes. This example demonstrates a basic tabular pane with two panels:

$pane =& JPane::getInstance('Tabs');
echo $pane->startPane('myPane');
echo $pane->startPanel('Panel 1', 'panel1');
echo "This is Panel 1";
echo $pane->endPanel();
echo $pane->startPanel('Panel 2', 'panel2');
echo "This is Panel 2";
echo $pane->endPanel();
echo $pane->endPane();

There are essentially two elements to a pane: the pane itself and the panels within the pane. We use the methods startPane() and endPane() to signify the start and end of the pane. When we use startPane() we must provide one string parameter, which is a unique identifier used to identify the pane.

Panels are always created internally to a pane and use the methods startPanel() and endPanel(). We must provide the startPanel() method with two parameters, the name, which appears on the tab, and the panel ID.

The following is a screenshot of the pane created from the previous code:

Had we wanted to create a slider pane instead of a tab pane when we used the getInstance() method, we would need to have supplied the parameter Sliders instead of Tabs. This is a screenshot of the same pane as a slider:

Panes are used extensively in Joomla!

As a general rule, tabs are used for settings and sliders are used for parameters.


Tool tips are small boxes with useful information in them that appear in response to onmouseover events. They are used extensively in forms to provide more information about fields and their contents. Tooltips can be extremely helpful to users by providing small helpful hints such as what value should be put into a field or what is the purpose of a field. It takes a small amount of code to implement but adds a lot of value for our users. So how do we add a tooltip?

We use JHTML to render tips easily. There are two types that we use:

  • behavior.tooltip is used to import the necessary JavaScript to enable tooltips to work and it does not return anything. We only ever need to call this type once in a page.
  • tooltip is used to render a tooltip in relation to an image or a piece of text. There are six parameters associated with tooltip, of which five are optional. We will explore the more common uses of these parameters.

The most basic usage of tooltip returns a small information icon that onmouseover displays as a tooltip; as this example demonstrates:

echo JHTML::_('tooltip', $tooltip);

The next parameter allows us to define a title that is displayed at the top of the tooltip:

echo JHTML::_('tooltip', $tooltip, $title);

The next parameter allows us to select an image from the includes/js/ThemeOffice directory. This example uses the warning.png image:

echo JHTML::_('tooltip', $tooltip, $title, 'warning.png');

The next obvious leap is to use text instead of an image and that is just what the next parameter allows us to do:

echo JHTML::_('tooltip', $tooltip, $title, null, $text);

There are some additional parameters that relate to using hypertext links. A full description of these is available in Appendix E, Joomla! HTML Library.

We can modify the appearance of tooltips using CSS. There are three style classes that we can use: .tool-tip, .tool-title, and .tool-text. The tooltip is encapsulated by the .tool-tip class, and the .tool-title and .tool-text styles relate to the title and the content.

This code demonstrates how we can add some CSS to the document to override the default tooltip CSS:

// prepare the cSS
$css = '/* Tooltips */

min-width: 100px;
opacity: 0.8;
filter: alpha(opacity=80);
-moz-opacity: 0.8;

text-align: center;

.tool-text {
font-style: italic;

// add the CSS to the document
$doc =& JFactory::getDocument();

Let's add tooltips to our com_boxoffice/views/revue/tmpl/default.php layout file.

The first step is to enable tooltips by adding behavior.tooltip to the beginning of our layout file as follows:

// No direct access
defined('_JEXEC') or die('Restricted access');

// Enable tooltips

This should be placed at the beginning as illustrated. This adds the mootool JavaScript class Tips to our document and adds the following JavaScript code to the document heading:

<script type="text/javascript">
window.addEvent('domready', function(){
var JTooltips = new Tips($$('.hasTip'),
{ maxTitleChars: 50, fixed: false});

Next, we identify those elements that we wish to have a tooltip enabled for. There are two documented ways to implement a tooltip. We will create both for the movie title to illustrate:

<td width="100" align="right" class="key">
<span class="editlinktip hasTip"
title="::<?php echo JText::_('TIP_001');?>">
<label for="title">
<?php echo JText::_('Movie Title'); ?>:
<input class="inputbox" type="text"
name="title" id="title" size="25"
value="<?php echo $this->revue->title;?>" />
<?php echo JHTML::_('tooltip', JText::_('TIP_001')); ?>

The first approach wraps the label with a <span> that has two CSS classes declared editlinktip and hasTip, and a title attribute. The title attribute is a two part string with the parts separated by double colons; the first part is the tooltip title and the second is the tooltip text. Both methods will produce similar results.

There are a few differences that you should keep in mind. The first approach displays the tip when you hover over the spanned element (in this case the label field). The second approach will generate a small icon next to the input field; the tip will appear when you move your mouse over the icon.

You can duplicate the results of the first approach using the tooltip method with the following code:

$label = '<label for ="title">'
. JText::_('Movie Title')
. '</label>'
echo JHTML::_('tooltip', JText::_('TIP_001'),
'', '', $label);

Note that the tip text is passed through JText with a key from our translation file. Here are the entries for our tips:

# Tip Text

TIP_001=Enter the film title.
TIP_002=Choose the MPAA film rating.
TIP_003=Provide a brief impression of the film.
TIP_004=Enter the name of the reviewer.
TIP_005=Enter 1-5 asterisks (*) for overall quality of the film.
TIP_006=Enter the date of the review (mm/dd/yyyy).
TIP_007=Do you wish to publish this revue?

In the end the method you choose to implement tooltips is largely a personal preference.

(Read more interesting articles on Joomla! 1.5 here.)


We will use the mootools Fx.Slide effect to demonstrate how we can build a PHP class to handle some mootools JavaScript. The Fx.Slide effect allows an XHTML element to seamlessly slide in and out of view horizontally or vertically.

We'll create a class named 'Slide', which will handle the Fx.Slide effect. The class will have five methods: __construct(), startSlide(), endSlide(), button(), and addScript().

The way in which we use Fx.Slide requires us to add JavaScript to the window domready event. This event is fired once the DOM (Document Object Model) is ready. If we do not add the JavaScript in this way it is likely that we will incur problems. This is because if important parts of the DOM are missing, such as a slider, then the JavaScript will not be able to execute properly.

As the domready event can only trigger one event handler, we'll use the addScript() method as a static method to build up an event handler. This will allow us to use the Slide class to add multiple sliders without overwriting any previous domready event handlers.

Here is our Slide class:

* Handles mootools Fx.Slide
class Slide extends JObject
* Slider mode: horizontal|vertical
var $_mode;
* Constructor
* @param string Slide mode: horizontal|vertical
function __construct($mode = 'vertical')
$this->_mode = $mode;
TIP_008=Write your review.
TIP_009=Select the film genre (category).
// import mootools library
* Starts a new Slide
* @param string Slider ID
* @param string Slider class
* @return string Slider XHTML
function startSlider($id, $attributes = '')
// prepare slider JavaScript
$js = "var ".$id." = new Fx.Slide('".$id."', {mode:
// return the slider
return '<div id="'.$id.'" '.$attributes.'>';
* Ends a slide
* @return string Slider XHTML
function endSlide()
// end the slide
return '</div>';
* Creates a slide button
* @param string Button text
* @param string Button Id
* @param string Slider Id
* @param string Button type: toggle|slideIn|slideOut|hide
* @return string Slider XHTML action button
function button($text, $buttonId, $slideId, $type = 'toggle')
// prepare button JavaScript
$js = "$('".$buttonId."').addEvent('click', function(e){"
." e = new Event(e);"
." ".$slideId.".".$type."();"
." e.stop();"
." });";

// return the button
return '<a id="'.$buttonId.'" href="#"
* Adds the JavaScript to the domready event
*and adds the event handler to the document
* @static
* @param string JavaScript to add to domready event
function addScript($script = null)
// domready event handler
static $js;
if ($script)
// append script
$js .= "\n".$script;
// prepare domready event handler
// add event handler to document
$document =& JFactory::getDocument();

Notice that at no point do we tell the document that we need to include the mootools library. This is because mootools is always included when we render an HTML document.

So how do we use our newly created class? Well it's relatively simple. We use startSlide() and endSlide() to indicate a slider; anything that we output between these two calls will be within the slider. We use the button() method to output a button, which when pressed will perform a slider event on the slider. Once we have outputted all the sliders we intend to, we use the static addScript() method to add the necessary JavaScript to the document.

This example demonstrates how we can create two slides using our Slide class:

$slide = new Slide();

echo $slide->button('Toggle Slide 1', 'toggle1', 'slide1');
echo $slide->startSlider('slide1', 'class="greyBox"');
echo 'Slide 1';
echo $slide->endSlider();

echo $slide->button('Toggle Slide 2', 'toggle2', 'slide2');
echo $slide->startSlider('slide2', 'class="greyBox"');
echo 'Slide 2';
echo $slide->endSlider();


Notice that we call the static addScript() method at the end with no parameters. This will add the necessary JavaScript to make our slides work. We should never call the addScript() method without parameters more than once.

The resultant slides appear as follows:

Both of these particular slides are vertical, but there is nothing to prevent us from using horizontal and vertical slides on the same page. To do this we would require two Slide objects, one which when instantiated is passed the variable horizontal:

$slideHorizontal = new Slide('horizontal');
$slideVertical = new Slide();

There are many different effects we can achieve using mootools, and we don't have to use a PHP class to implement them. If you want to take advantage of mootools then the best place to start is at the mootools website:


In this Article,we discussed about the mootools JavaScript library, which can significantly enhance the user experience of our extensions. We looked at creating tabbed and slider panels, creating unique tooltips, and how to create our own special effects class using some mootools JavaScript.

If you have read this article you may be interested to view:

You've been reading an excerpt of:

Mastering Joomla! 1.5 Extension and Framework Development

Explore Title