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


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