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

Poor Best

Rating:

/ 4

April 18, 2007

TABLE OF CONTENTS:

<!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.

Next: Examining some additional DHTML effects >>