Coding, Programming Tutorials - Using script.aculo.us in Ruby on Rails

Script.aculo.us is indeed spectaculous. By writing a few lines of ROR code, you could create UI effects that reqiured great manipulation in javascript using DOM. The most popular part of script.aculo.us is the visual effects, using the Effect object. These effects are very dynamic, almost flashlike, yet they do not need any plugins and are very reliable in cross-platform compatibility. So, let's get to the eye candy. I promise you that you will spend more time enjoying the effects than writing it :)

Lets start by fading, say , a picture from view.

</a>

</div>

Now let's call the function Fade using the link_to_function command.

<%= link_to_funcion "Fade", "new.Effect('fadePic')" %>

Notice that we insert the div id into the function. This will fade the picture until it completely disappears. But what if we don't want it to completely disappear? Then we insert an optional parameter. <br /><br />

<%= link_to_funcion "Fade", "new.Effect('fadePic', { Duration: 10, to: .5})" %>

Here we insered to extra parameters. In this example, the picture will start fading after 10 seconds, not frames, and will only fade to 50 percent of it's original color.
>
Here are all the 16 standard effects that you can use with script.aculo.us:

Fade: Decreases opacity
Appear: Increases opacity

BlindUp, BlindDown: Changes height of the element

SlideUp, SlideDown: Slides the element up or down.

Shrink: Resizes the element( Shrinks)
Grow: Resizes the element( Expands)

Highlight: CHanges background color of element.

Shake: Causes an element to slide left to right a few times.

Pulsate: Rapidly fades in and out several times.

DropOut: Simultaneously fades an element and moves it downward, so it appears to drop off the page

SwitchOff: SImulates an old television bieng turned off; a quick flicker, and then the element collapses into a horizontal line.

Puff: Makes an element incease in size while decreasing opacity.

Squish: Similiar to shrink, but the element's top-left corner remains fixed.

Fold: First redurces the element's height to a thin line and then reduces its width until it disappears.