A Close Look at the Scriptaculous DHTML Library - Getting the most out of the MoveBy DHTML effect
(Page 4 of 4 )
According to the concepts that I expressed in the previous section, I'd like to finish this tutorial by showing you a few additional examples of how to use the "MoveBy" DHTML effect that you learned before, so you can have a much better understanding of how to get the most out of it.
That being said, below I included three different code samples that demonstrate how to utilize some additional options available with the neat "MoveBy" effect. Here are the corresponding practical examples:
<!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 sinoidal 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.sinoidal});
}
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 flicker 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.flicker});
}
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 reverse 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.reverse});
}
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 shown above, the three hands-on examples show in a clear fashion how to use different parameters with the "MoveBy" effect to make it more attractive when included into a given web document.
More specifically speaking, the first one demonstrates how to move a DIV element by using a sinusoidal transition, while the second and third examples show how to use the effect in question in combination with flickering and reverse movements respectively.
Of course, the best way to appreciate the complete potential of all these visual effects is by simply testing them with your own browser, so I encourage you to do that right now. You won't be disappointed at all, believe me!
Final thoughts
In this first article of the series, I introduced the key points of how to use some of the "core" DHTML effects that come bundled with the Scriptaculous framework. Hopefully, after testing all the code samples shown here, you'll have a better idea of how to use this powerful DHTML library with your own web applications.
Nonetheless, this is merely the beginning of this educational journey, since in the next tutorial I'm going to explore more visual effects that come integrated with this software package. Meet you in the next part!
| DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware. |
