Home arrow DHTML arrow Page 3 - Using Combination Effects with the Scriptaculous DHTML Library
DHTML

Using Combination Effects with the Scriptaculous DHTML Library


The Scriptaculous animation framework has become extremely popular with web developers. Welcome to the final installment of the series “A close look at Scriptaculous DHTML library.” Made up of three instructive tutorials, this series covers the implementation of the most important animation effects that come packaged with this library, and provides you with pointers for including these effects quickly into your own web pages.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 9
April 18, 2007
TABLE OF CONTENTS:
  1. · Using Combination Effects with the Scriptaculous DHTML Library
  2. · Applying more combination effects
  3. · Going one step further into DHML animations
  4. · Examining some additional DHTML effects

print this article
SEARCH DEVARTICLES

Using Combination Effects with the Scriptaculous DHTML Library - Going one step further into DHML animations
(Page 3 of 4 )

Now I'm going to show you more eye-catching animations that come integrated with the Scriptaculous framework so you can grasp quickly how to use them with your own web applications.

Take a look at the following examples, which illustrate the correct implementation of three new combination effects, named “SwitchOff,” “SlideUp” and “SlideDown” respectively. Here they are:

(Implementation of SwitchOff effect)

<!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 SwitchOff effect (combination of effects)</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.SwitchOff('container');
   
}
   
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 will disappear now</div>
</body>
</html>

(Implementation of SlideUp effect)

<!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 SlideUp effect (combination of effects)</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.SlideUp('container');
   
}
   
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 sliding up now</div>
</body>
</html>

(Implementation of SlideDown effect)

<!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 SlideDown effect (combination of effects)</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(){
       Effect.SlideDown('container', {duration:3});
   
}
   
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 sliding down now</div>
</body>
</html>

As illustrated above, these three brand new DHTML animations can be useful in those cases where you need to make some web page elements disappear in a funny way. In all three hands-on examples, a sample DIV element will be removed from the corresponding web document, displaying different visual effects.

As I said before, try running all the examples on your own browser, so you can get a better idea of how they work.

So far, so good. At this point I assume that you already understand the logic that drives each one of the DHTML effects that were shown previously, which are, by the way, quite easy to include into any web page.

However, this educational journey hasn’t finished yet, because the Scriptaculous library has been provided with some additional predefined animations that I’d like to show you. Therefore, keeping this in mind, in the section to come – the last one of this tutorial – I’m going to cover in detail the aforementioned animations, in this way completing this brief review of the robust Scriptaculous’ DHTML module.

To learn how these brand new visual effects will be coded, go ahead and read the last section of this article. 


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