Usage

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.

Unpack and 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.

Link to script.aculo.us in your HTML

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

The scripts that can be specified are:

· | builder

· | effects

· | dragdrop

· | controls

· | slider

· | sound

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

Note: Some of the scripts require that others be loaded aswell in order to function properly.

Use in your HTML

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>

Next steps

Have a look at the Demos to catch a glimpse of what you can achieve.