Adding DHTML Effects with script.aculo.us

Problem

You want to add fancy effects such as fades to your application, without writing any JavaScript.

Solution

Every Rails application comes bundled with some JavaScript libraries that allow you to create Ajax and DHTML effects. You don even have to write JavaScript to enable DHTML in your Rails web site.

First edit your main layout template (see Recipe 15.3) to call javascript_include_tag within your tag:

<%= javascript_include_tag "prototype", "effects" %> <%= @content_for_layout %>

Now within your views you can call the visual_effect method to accomplish the DHTML tricks found in the script.aculo.us library.

Heres an example of the "highlight" effect:

Here is some important text, it will be highlighted when the page loads.

Heres an example of the "fade" effect:

Here is some old text, it will fade away when the page loads.

Discussion

The sample code snippets above are triggered when the page loads, because they e enclosed in

Generates this JavaScript: