A Close Look at the Scriptaculous DHTML Library - Using other core DHTML effects
(Page 3 of 4 )
The Scriptaculous DHTML module comes equipped with other basic DHTML effects, which can be included into any web document. The process is as easy as shown in the previous examples.
In this particular case, the usage of a new core effect, called "MoveBy," is demonstrated by the code samples below. Take a look at them, please:
<!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 Move By 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.MoveBy('container',10,30);
}
function initializeElement(){
Event.observe
($('container'),'click',displayEffect,false);
}
Event.observe(window,'load',initializeElement,false);
</script>
<style type="text/css">
#container{
position: absolute;
top: 200px;
left: 200px;
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 move now!</div>
</body>
</html>
<!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 Move By effect (with transition)</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.MoveBy('container',0,200,{duration:
0.3,transition: Effect.Transitions.slowstop});
}
function initializeElement(){
Event.observe
($('container'),'click',displayEffect,false);
}
Event.observe(window,'load',initializeElement,false);
</script>
<style type="text/css">
#container{
position: absolute;
top: 200px;
left: 200px;
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 move now!</div>
</body>
</html>
As you can see, the basic "MoveBy" effect shown above is aimed at moving any page element across a given web document. Also, the effect in question accepts some additional arguments, which can make it even more appealing. Concerning this neat feature, in the first example a containing DIV is simply moved by specifying the respective X-Y offsets of the web document, while in the second case the mentioned DIV is animated by using a slow-stop transition.
I recommend that you test both practical examples on your browser and see how they behave in each case.
All right, now that you saw how the "MoveBy" core effect that comes packaged with the Scriptaculous JavaScript library does its thing, it's a good time to leap forward and continue exploring a few additional options that are offered by this neat DHTML effect.
These extra options available with the "MoveBy" DHTML effect will be covered in the next section, so click on the link below and keep reading.
Next: Getting the most out of the MoveBy DHTML effect >>
More DHTML Articles
More By Alejandro Gervasio
