Featured Post

How to import Nokia Sportstracker GPS data with Ruby on Rails

In this tutorial i will explain how to import GPS data from Nokia mobile phones with Ruby on Rails and displaying them as route on a google map. The first part will solve the data import of GPX formated data files. The second part will show you how to display the routes on google map. As data source...

Read More

17 Visual Effects for Ruby on Rails RJS functions

Posted by Lars | Posted in Rails, Ruby, Tutorials | Posted on 01-06-2009

6

Ruby on Rails has a scriptaculous framework integration out of the box. The Rails helper functions are very powerful, but every time i need a visual_effect i have to search in API docs to get all Rails supported scriptaculous effects.

To shorten the search i’m going to list all 17 supported effects.

Effects for appearing

This effects make sence after AJAX create or show functions. They add the new content effectfully after your record is created or replace a list entry with a detail entry after show function.

  1. Appear - Fades in the selected DIV.
  2. BlindDown - Fades in the selected DIV from top to bottom.
  3. SlidesDown - Slides in the selected DIV from top to bottom.
  4. Grow - Fades and zoomes in the selected DIV.

Effects for disappearing

This effects you can use to remove a DIV after a destroy function was executed successfully.

  1. Fade - Fades out the selected DIV
  2. Puff - Fades out and zoomes out the selected DIV
  3. Blind up - Fades out from bottom to top side of selected DIV
  4. SwitchOff - Flash Up and fade out
  5. SlideUp - Moves the DIV from bottom to top
  6. DropOut - Fades and moves out to bottom.
  7. Squish - Minimizes the DIV to left top corner.
  8. Fold - Foldes the DIV first to top second to left.
  9. Shrink - Minimize the DIV to center direction.
  10. Hide - Hides the DIV (thx to Nick)

Effects for highlighting

After AJAX update functions this group of effects makes sence. It catches the attention after a record is updated.

  1. Shake - Shakes the DIV horizontally.
  2. Pulsate - Fades out and zoomes out the selected DIV
  3. Highlight - Highlights the DIV with yellow flashing.

How to use in views

Use the effects in following way in your views:

1
2
3
4
5
<%= link_to_remote("Destroy",
:url => item_path(item),
:complete => visual_effect(:Fade,"item_box_#{item.id}"),
:method => :delete)
%>

Have fun.

delicious | digg | reddit | facebook | technorati | stumbleupon | chatintamil

Comments (6)

Genki said on 02-06-2009

be better off using some unobtrusive javascript, like jQuery.
Lars said on 02-06-2009

Yes you can. But using standard rails functions works for me very well. In most of my use cases there is no reason to add more javascript libraries.
modsognir said on 05-06-2009

Thanks Lars. good to have it all in one place.
Nick said on 05-06-2009

I would have added Hide to the disappear list. I found this one particularly useful when promoting elements out of a list to a “selected” list.
Lars said on 05-06-2009

Hi Nick, I added the Hide Effect to disappear list. Thx for your contribution.

Kind regards
Lars
Kirill said on 22-07-2009

Big ThNX!
Do you know how to make pause btw effects? E.g. I want to hide block and only after full hide make shrink or some other actions.

Write a comment

Advertise Here