Handling Cookies and DHTML Effects with Ruby on Rails - 15.15 Adding DHTML Effects with script.aculo.us (Page 4 of 4 )
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't 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 <HEAD> tag:
The sample code snippets above are triggered when the page loads, because they're enclosed in <SCRIPT> tags. In a real application, you'll probably display text effects in response to user actions: deleted items might fade away, or the selection of one item might highlight related items. Here's an image that gets squished when you click the link below it:
<img id="to-squish" src="bug.jpg"> <%=link_to_function("Squish the bug!", visual_effect(:squish, "to-squish"))%>
The JavaScript code generated by the visual_effect method looks a lot like the arguments you passed into the method. For instance, this piece of a Rails view:
<script type="text/javascript"> new Effect.Fade("deleted-text", {duration:1.0}); </script>
This similarity means that documentation for the script.aculo.us library is almost directly applicable to visual_effect. It also means that if you feel more comfortable writing straight JavaScript, your code will still be fairly understandable to someone who knows visual_effect.
The following table lists many of the effects available in Rails 1.0.
JavaScript initialization
Rails initialization
new Effect.Highlight
visual_effect(:highlight)
new Effect.Appear
visual_effect(:appear)
new Effect.Fade
visual_effect(:fade)
new Effect.Puff
visual_effect(:puff)
new Effect.BlindDown
visual_effect(:blind_down)
new Effect.BlindUp
visual_effect(:blind_up)
new Effect.SwitchOff
visual_effect(:switch_off)
new Effect.SlideDown
visual_effect(:slide_down)
new Effect.SlideUp
visual_effect(:slide_up)
new Effect.DropOut
visual_effect(:drop_out)
new Effect.Shake
visual_effect(:shake)
new Effect.Pulsate
visual_effect(:pulsate)
JavaScript initialization
Rails initialization
new Effect.Squish
visual_effect(:squish)
new Effect.Fold
visual_effect(:fold)
new Effect.Grow
visual_effect(:grow)
new Effect.Shrink
visual_effect(:shrink)
new Effect.ScrollTo
visual_effect(:scroll_to)
See Also
The script.aculo.us demo (http://wiki.script.aculo.us/scriptaculous/show/ CombinationEffectsDemo)
Recipe 15.3, "Creating a Layout for Your Header and Footer," has more on layout templates
Recipe 15.17, "Creating an Ajax Form"
Please check back next week for the continuation of this article.
DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.
Ruby-on-Rails 
Web Development: Ruby on Rails
