Fading Flash Message

Rails apps love flash messages. Little notes providing information, confirmation or warnings to the user. Typically implemented in a partial like so:

<% if flash[:warning] -%>
   <div id='warning'><%= flash[:warning] -%></div>
<% end -%>
<% if flash[:notice] -%>
  <div id='notice'><%= flash[:notice] -%></div>
<% end -%>

There are many cases where the message does not need to stick around for long. Consider a page with lots of AJAX interactions. Perhaps the user sends a message, which causes a page reload with a flash confirmation note (e.g. “You’re message was sent.”). After this the user will remain on the page for a relatively long time, maybe inline editing some properties or settings with AJAX tools.

It sure would be nice if that flash message would fade into the sunset after a few seconds and give back its valuable real estate, yes? Especially without forcing every flash message to disappear like Bobby Fischer.

Ask and receive, my friends. Introducing the fading_flash_message method, to be added to your nearest ApplicationController:

def fading_flash_message(text, seconds=3)
  text +
    <<-EOJS
      <script type='text/javascript'>
        Event.observe(window, 'load',function() {
          setTimeout(function() {
            message_id = $('notice') ? 'notice' : 'warning';
            new Effect.Fade(message_id);
          }, #{seconds*1000});
        }, false);
      </script>
    EOJS
end

Setting a fading flash message in your controller is simple:

flash[:notice] = fading_flash_message("Thank you for your message.", 5)

This is change we can believe in, my friends.

Update

For Rails 3, this still works with a simple inclusion of the RawOutputHelper.

include ActionView::Helpers::RawOutputHelper
def fading_flash_message(text, seconds=3)
  raw text +
    <<-EOJS
      <script type='text/javascript'>
        Event.observe(window, 'load',function() {
          setTimeout(function() {
            message_id = $('notice') ? 'notice' : 'warning';
            new Effect.Fade(message_id);
          }, #{seconds*1000});
        }, false);
      </script>
    EOJS
end