Introducing script.aculo.us

The most popular component of script.aculo.us is its Effectobject, which is used to attach a variety of cinematic effects to UI events. Using script.aculo.us effects, many of the slick animated transitions that people have come to associate with Flash can be accomplished without plug-ins at all, and in a way that preserves the benefits of HTML.

What about cross-platform compatibility? In general, the script.aculo.us visual effects work reliably across different browsers (Internet Explorer 6+ for Windows, Firefox, Safari, Konqeror, Camino, and, with a few exceptions, Opera). And because the animated effects are time-based (as opposed to frame-based) they work consistently on systems of different speeds. You might be wondering: just because visual effects are easy, does that mean they’re a good idea? Isn’t it just eye candy? And what does it have to do with Ajax, anyway?

The full answer to those questions will come in Chapter 6, but here’s the short one. More than just mere decoration, visual effects can be essential to providing a good user experience, especially in conjunction with Ajax. For more than 10 years, users have gotten used to the way the Web works, and Ajax undermines many of their expectations. For example, there’s a basic expectation that web pages are static, that they won’t change once they’re loaded. But in the last chapter, all the Ajax examples made changes to the page without reloading, which has the potential to become confusing. To address that, visual effects can provide cues that make the interface more natural and discoverable.

A word of caution: just like special effects in the movies, script.aculo.us effects are generally best when you don’t notice them—when they are subtle and unobtrusive, they and contribute something to the plot. Remember when desktop publishing arrived in the 1980s, and every neighborhood newsletter suddenly used 10 different fonts, because it could? If at all possible, try not to get similarly drunk on the power of script.aculo.us.

The script.aculo.us’Effectobject is where the magic resides. Let’s look at it. First, we’ll need an element to try our effects on, so add one to the top of the new index.rhtml:

  <div id="target" class="green box">
    div>Here's a DIV with some text.</div>
  </div> 

Now let’s use thelink_to_functionto call an effect on the new element. Add this below theDIV:

  <%= link_to_function "Fade", "new Effect.Fade('target')" %>

Remember,link_to_functiontakes two arguments: the first is the text for the link, and the second is a JavaScript statement to be evaluated. In this example, that statement is a method call on script.aculo.us’Effect.Fade. Load the page in your browser and try out the link—you should see the target element slowly fade away, until it’s removed from the page flow altogether. Internally, the first argument toFade()is passed through Prototype’s$()function—which means you can pass it either the ID of an element or an element reference itself.

There’s another way to trigger effects, thanks to the fact that Prototype’s Element methods are added to every element that is accessed via$(). That means you can callvisualEffectdirectly on a DOM element:

  $('target').visualEffect('fade')

script.aculo.us has five core effects that control fundamental aspects of an element:Opacity,Scale,Move,Highlight, andParallel. To get a feel for each:

  <%= link_to_function "Opacity",
      "new Effect.Opacity('target', {to:0.5})" %>
  <%= link_to_function "Scale",
      "new Effect.Scale('target', 200)" %>
  <%= link_to_function "Move",
      "new Effect.Move('target', {x:50,y:10})" %>
  <%= link_to_function "Highlight",
      "new Effect.Highlight('target')" %>
  <%= link_to_function "Parallel",
      "new Effect.Parallel([
        new Effect.Move('target', {x:50,y:10}),
        new Effect.Opacity('target', {to:0.5})
       ])" %>

In your application, you’ll usually use combination effects, which are composed of the core effects—often by means ofEffect.Parallel. script.aculo.us includes 16 standard combination effects, but you can define as many new ones as you like. Here are the standard ones:

To try out all the standard combination effects, you could write a link for each one. Instead, let’s keep things DRY by iterating through an array instead:

  <% %w( Fade Appear Highlight Fold Pulsate SlideUp SlideDown
         Shrink Grow Squish Shake DropOut SwitchOff Puff BlindUp
         BlindDown ).each do |name| %>
    <%= link_to_function name, "new Effect.#{name}('target')" %>
  <% end %>