Scriptaculous

Basics

• One of the main design choice of Scriptaculous is to allow you to create your own effects by combining several core effects.

Installation and setup

• Warning: the loader script only works if you place it in the head section of the HTML strucutre; else you will have to modify the source.

Effects

Core Effects vs. Combination Effects

• If you want an element to appear by growing out of nowhere, try directly the Grow effect. I could not make the basic scale effect to work correctly.
• Usually, you will want to use a combination effect directly. For example, using Opacity() is tedious because the hide() / show() for elements can cause some flicker. Using Effect.Fade() takes care of all that automatically.

Effect Queues

• Documentation Link.
• I have not intensely used queues yet. The basic callback options (like afterFinish) are enough for me most of the time. However, beware: don't use the queue options ("queue": "end") with a callback. This caused some delay on the second effect when I tried this. Removing the queue option made it instantly faster.

Effects Description

• Fade() and Appear() are simple effects but very nice.
• BlindDown() and BlindUp() can also be quite useful, especially combined with an dark opacity overlay like ModalBox does.

Drag & Drop

• Beware that calling document.stopObserving("mousemove") will prevent all your draggable objects from being actually dragged. If you really need to call document.stopObserving(), you should destroy all your Draggable objects before doing so, and recreate them afterwards.

• If you mess up something, strange behavior may occur such as the draggable being dragged when you don't expect it to - so watch for this symptom when debugging.

Autocompletion

• Scriptaculous offers a very nice framework for autocompletion, either local or on the server through Ajax. If you need autocompletion, use this framework!