A Close Look at the Scriptaculous DHTML Library - Creating basic DHTML effects with Scriptaculous
(Page 2 of 4 )
As mentioned in the introduction that you just read, the Scriptaculous framework comes equipped with a robust set of DHTML objects for incorporating eye-catching effects into any web document.
Having said that, I'm going to show you some instructive examples that will demonstrate how to use what in the Scriptaculous context are called "core effects." Take a look at the first example. It shows how to use one of these basic effects. In this case, I'm talking about the one called "Opacity," and a primitive implementation of it can be coded as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<title>Example of Opacity effect</title>
<script language="javascript"
src="scriptaculous/js/prototype.js"></script>
<script language="javascript"
src="scriptaculous/js/scriptaculous.js"></script>
<script language="javascript">
// display effect
function displayEffect(){
new Effect.Opacity('container',{duration:0.8, from:1.0,
to:0.1});
}
function initializeElement(){
Event.observe
($('container'),'click',displayEffect,false);
}
Event.observe(window,'load',initializeElement,false);
</script>
<style type="text/css">
#container{
width: 300px;
height: 100px;
padding: 10px;
background: #cf9;
font: normal 11px Verdana, Arial, Helvetica, sans-serif;
color: #000;
text-align: center;
border: 1px solid #999;
}
</style>
</head>
<body>
<div id="container">This element is going to fade now!</div>
</body>
</html>
As demonstrated above, creating an "Opacity" effect with Scriptaculous is indeed a straightforward process that can be performed with minor effort. In this case, I also used the Prototype framework (bundled with the complete Scriptaculous package) to assign this core effect to a sample DIV element, identified as a "container."
You should notice that the effect in question has been assigned via the "Effect.Opacity" object, which accepts some useful parameters, such as the ID of the web page element to which the effect will be applied, and the corresponding duration. Of course, as you may have guessed, if you test the previous example on your browser, you'll see a green DIV that fades out slowly.
Okay, as you saw previously, creating basic effects with Scriptaculous is a rather simple task. Now I will show you another core effect that comes bundled with this library. In this case, I'm speaking of an effect called "Scale," which can be used as indicated below:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<title>Example of Scale effect</title>
<script language="javascript"
src="scriptaculous/js/prototype.js"></script>
<script language="javascript"
src="scriptaculous/js/scriptaculous.js"></script>
<script language="javascript">
// display effect
function displayEffect(){
new Effect.Scale('container',150);
}
function initializeElement(){
Event.observe($('container'),'click',displayEffect,false);
}
Event.observe(window,'load',initializeElement,false);
</script>
<style type="text/css">
#container{
width: 300px;
height: 100px;
padding: 10px;
background: #cf9;
font: normal 11px Verdana, Arial, Helvetica, sans-serif;
color: #000;
text-align: center;
border: 1px solid #999;
}
</style>
</head>
<body>
<div id="container">This element is going to scale now!
</div>
</body>
</html>
If you examine the above example, you'll realize that I followed an approach very similar to the one used to demonstrate the functionality of the first effect. In this case, there's a new effect called "Scale," which obviously scales a specified web page element.
In this situation, if you test the previous (X)HTML file, you'll see how the same DIV that was used in the first example is scaled up progressively. Quite easy to do, isn't it?
So far, so good. At this point you've grasped the logic required to use some core DHTML effects that take advantage of the capacity offered by the Scriptaculous framework. Nonetheless, this is only the beginning of this journey, since there are many more effects to cover here. They'll be treated in the course of the section to come.
To see how these brand new DHTML effects can be coded with this powerful JavaScript library, please keep reading.
Next: Using other core DHTML effects >>
More DHTML Articles
More By Alejandro Gervasio
