Using the Scriptaculous JS Library

This is a very short introduction to Scriptaculous, explaining what it is, why you care, and a few short examples. I am currently using this in a project, and will post additional entries as I begin to use more and more of the library.

Scriptaculous is a JavaScript library that is makes it relatively easy to add drag-and-drop functionality, dynamic drop-down menus, and visual effects. Unfortunately the documentation is fairly light, so there is a bit of a learning curve. You will also need to use the Prototype JavaScript library as Scriptaculous relies on some of it's tools.

You will care about this library if you want to develop rich user interfaces, and don't currently have some other JavaScript library that you rely on. It can save you an incredible amount of time.

As promised, I will share a few short examples. All of these require the following script includes in the HTML:

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js"></script>

Example 1: If you have taken a look at some of the newer web apps using Ajax, you will find some of them will highlight a part of the page to make it obvious to the user that something has changed. See Digg Spy for an example. The following code will flash the DIV yellow when it is clicked.

<div id="highlight_this" onclick="new Effect.Highlight('highlight_this')">Hello World</div>

Example 2: This DIV will slide up slowly and disappear when clicked on. Note that the sliding up feature only works under Firefox, in IE it will just disappear after a short delay.

<div id="blindup_this" onclick="new Effect.BlindUp('blindup_this')">Hello World</div>

Scriptaculous has another dozen or so effects beyond this, and makes it possible to alter them in various ways. For example, you may want change the duration of the Highlight effect. I will cover these in a bit more detail in further entries.

Tags

scriptaculous javascript