Rails RJS Message Fades

In some cases, I have found that displaying info, warning, and error messages for five seconds in a Ruby on Rails application is long enough. I tend to like using RJS with the following setup:

• /app/views/shared/message.rjs = The JavaScript code that will render my message partial.
• /app/views/shared/_message.rhtml = The message partial that will display the message.

The RJS code looks like this:

(click to view)

The first line inserts my message partial at the top of my “content” element which, in this case, is a DIV. The rest of the code forces the page to delay for five seconds while the message is being viewed. After the five seconds is up, the message is faded for one second. The fade should be quick as I think the effect is more visually appealing when it fades fast.

The message partial code looks like this:

(click to view)

I like to initialize my partials with default values for required parameters so if things are missing the partial will still work and that is what the first two lines of code do. The last line of code simply displays the message based on the parameter values: type and message.

The resulting desired affect looks like this:

Error Message (delay for five seconds)

(click to view)

Error Message (being faded out)

(click to view)

Error Message (gone, page is back to normal)

(click to view)

As you might gather from the code, the message type determines the type of CSS used to style the message. For example: info = green, warning = yellow, and error = red.

No comments yet.

Leave a comment

You must be logged in to post a comment.