Home arrow DHTML arrow Page 2 - Reviewing More DHTML Effects from the Scriptaculous DHTML Library
DHTML

Reviewing More DHTML Effects from the Scriptaculous DHTML Library


If you’re looking for a straightforward guide on how to use the DHTML effects that come with the Scriptaculous framework, then look no further. Welcome to the second installment of the series that began with “A Close Look at Scriptaculous DHTML Library." Comprised of three parts, this series shows you how to create core and combined visual effects with this powerful JavaScript package, and how to use them easily with your own web pages.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 11
April 11, 2007
TABLE OF CONTENTS:
  1. · Reviewing More DHTML Effects from the Scriptaculous DHTML Library
  2. · Working with the Highlight effect
  3. · Creating parallel DHTML effects with Scriptaculous
  4. · Creating combination DHTML effects

print this article
SEARCH DEVARTICLES

Reviewing More DHTML Effects from the Scriptaculous DHTML Library - Working with the Highlight effect
(Page 2 of 4 )

Since the DHTML module of the Scriptaculous framework comes bundled with four “core” effects, the only one that remains to cover is “Highlight” (remember that the other three were discussed in the first tutorial).

As its name suggests, this effect can be used to highlight any element of a web page by using different options. To illustrate two possible uses of this brand new effect, below I included a pair of examples that demonstrate how to apply it using distinct input parameters.

Please take a look at the corresponding code samples:

<!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 Highlight effect (with duration parameter)</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.Highlight('container',{duration: 1.0});
    
}
    
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 highlight 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 Highlight 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.Highlight('container',{startcolor:'#ccff99', endcolor:'#cccccc'})
   
}
   
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 highlight now!</div>
</body>
</html>

As was mentioned previously, the “Highlight” effect accepts a range of parameters that can be used to change its behavior. This fact is clearly demonstrated by the pair of hands-on examples listed above. The first one simply “highlights” a DIV element by specifying only the duration of the effect, while the second one uses two background colors to create a transition between them. Quite simple, right?

Logically, there’s plenty of room here to experiment with the different options. Try combining them to obtain a truely eye-catching animation effect. Your own creativity is your driving force.

At this point, you hopefully understand how to use the four core effects packaged with the Scriptaculous library. However, one of the best things about this JavaScript software is that it will allow you combine two or more basic effects in a single statement. In the context of the library, this is called a “parallel” effect. It can be really useful to achieve more impressive results.

So do you want to see how a parallel effect can be coded? All right, click on the link that appears 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