Home arrow DHTML arrow Page 4 - A Close Look at the Scriptaculous DHTML Library
DHTML

A Close Look at the Scriptaculous DHTML Library


Many web surfers enjoy using Rich Internet Applications. They can be painful for a developer to create, however, especially when it comes to the front end. That's where the Scriptaculous JavaScript library comes in. This article, the first in a series, introduces you to this versatile software for developing user interfaces.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 10
April 04, 2007
TABLE OF CONTENTS:
  1. · A Close Look at the Scriptaculous DHTML Library
  2. · Creating basic DHTML effects with Scriptaculous
  3. · Using other core DHTML effects
  4. · Getting the most out of the MoveBy DHTML effect

print this article
SEARCH DEVARTICLES

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.

blog comments powered by Disqus
DHTML ARTICLES

- Text-Justify, Volume, and Other Style Sheet ...
- Ruby-Position, Size, and Other Style Sheet P...
- Padding, Pages, and More Style Sheet Propert...
- Marks, Orphans, and More Style Sheet Propert...
- Layouts, Margins, and Other Style Sheet Prop...
- Floats, Fonts, and Other Style Sheet Propert...
- Color, Filters, and Other Style Sheet Proper...
- Borders and More with Style Sheets
- Learning Style Sheet Properties
- Style Sheet Property Reference
- Completing a Noisy Image Application
- An Object-Based Approach to Building Noisy I...
- A Basic Method for Building Noisy Images
- Adding More Features to Sliders with the Scr...
- Using Sliders with the Scriptaculous Framewo...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials