1. Download

Go to the script.aculo.us downloads page to grab yourself the latest version in a convenient package. Follow the instructions there, then return here.

2. Install

Put prototype.js, scriptaculous.js, builder.js, effects.js, dragdrop.js, slider.js and controls.js in a directory of your website, e.g. /javascripts.

3. Link to script.aculo.us

Link to the scripts in the head of your document:


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

By default, scriptaculous.js loads all of the other javascript files necessary for effects, drag-and-drop, sliders, and all of the other script.aculo.us features. If you don’t need all of the features, you can limit the additional scripts that get loaded by specifying them in a comma-separated list, e.g.:


<script src="scriptaculous.js?load=effects,dragdrop" type="text/javascript"></script>

The scripts that can be specified are:

Note that some of the scripts require that others be loaded in order to function properly.

4. Use

To call upon the functions, use HTML script tags. The best way is to define them like this:


  <script type="text/javascript" language="javascript">
    // <![CDATA[
      Effect.Appear('element_id');
    // ]]>
  </script>

This way, you won’t have to worry about using characters like < and > in your Java Script code.

You can also use effects inside event handlers:


  <div onclick="new Effect.SwitchOff(this)">
    Click here if you've seen enough.
  </div>

If you want to get tricky with it, you can pass extra options to the effect like ‘duration’, ‘fps’ (frames per second), and ‘delay’.


  <div onclick="new Effect.BlindUp(this, {duration: 16})">
    Click here if you want this to go slooooow.
  </div>

5. Next steps