Ascertain the visitor's browser. Remember our warning telling you that all this only works with Internet Explorer! To solve this problem, just find out the
visitor's browser and, if he uses another browser such as Navigator, redirect him to an appropriate page (for instance, towards
a page on which layers are displayed permanently).
Webmaster
Style sheets : A newsthread: animating layers
[ Contents ]
Dr Benton
A touch of JavaScript
If you tested the code defined earlier on, you might have had a bad surprise: nothing has happened! This is because you need to create a small JavaScript in order to detect the mouse clicks that will launch the effect. In our example, we will call up the doOutline() function:
function doOutline()
{
var targetId, targetElement;
srcElement = window.event.srcElement;
if (srcElement.className == "Outline")
{
targetId = srcElement.id + "d";
targetElement = document.all(targetId);
if (targetElement.style.display == "none")
targetElement.style.display = "";
else
targetElement.style.display = "none";
}
}
The doOutline() function detects the element on which the visitor has clicked and stores it in the srcElement variable. Next, we will use this reference to identify its class. In this way, we can easily find out whether it is the title of an article or not. Remember that the <SPAN> tag has been assigned the class=Outline attribute. Now you understand why.
The next lines are used to ascertain whether or not the article is displayed (the element containing it is identified by adding the letter d to the srcElement value, which is the reason for the naming convention mentioned earlier). Depending on the result of the evaluation, the text is either shown, or hidden.
To implement this procedure, we use nested conditional structures. The first if structure checks that the element's class is Outline. If this is true, the second condition is evaluated and defines the state of the layer. If the layer is hidden (targetElement.style.display == "none"), then it will be displayed, and if it is already displayed (else), then it will be hidden.
All that is left to do is to complete the script with a call instruction to our doOutline() function which will be executed each time a click is detected on the page. Insert the following line of code below the doOutline function:
document.onclick = doOutline;
A last glance at the result.
Ascertain the visitor's browser. Remember our warning telling you that all this only works with Internet Explorer! To solve this problem, just find out the
visitor's browser and, if he uses another browser such as Navigator, redirect him to an appropriate page (for instance, towards
a page on which layers are displayed permanently).
Are you now convinced of the power of CSS? And the combination of DHTML and style sheets offers even more possibilities. You can now create animations, menus, user interfaces, etc.