Home arrow DHTML arrow Page 3 - 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 - 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.


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