Hiding the Flash Message After a Time Delay
Posted
by
Madhan ayyasamy
on Mad Han RoR Tips
See other posts from Mad Han RoR Tips
or by Madhan ayyasamy
Published on 2010-12-04T02:14:00.000-08:00
Indexed on
2010/12/06
16:59 UTC
Read the original article
Hit count: 419
Filed under:
Ruby On Rails
Hi Friends,
The flash hash is a great way to provide feedback to your users.
Here is a quick tip for hiding the flash message after a period of time if you don’t want to leave it lingering around.
First, add this line to the head of your layout to ensure the prototype and script.aculo.us javascript libraries are loaded:
This will wrap the flash message in a div with class=‘flash’ and id=‘error’, ‘notice’ or ‘warn’ depending on the flash key specified.
The value ‘10000’ is the time in milliseconds before the flash will disappear. In this case, 10 seconds.
This function looks pretty good and little javascript stunts like this can help make your site feel more professional. It’s also worth bearing in mind though, not everybody can see well or read as quickly as others so this may not be suitable for every application.
Update:
As Mitchell has pointed out (see comments below), it may be better to set the flash_type as the div class rather than it’s id. If there is the possibility that you’ll be showing more than one flash message per page, setting the flash_type as the div id will result in your HTML/XHTML code becoming invalid because the unique intentifier will be used more than once per page.
Here is a slightly more complex version of the method shown above that will hide all divs with class ‘flash’ after a time delay, achieving the same effect and also ensuring your code stays valid with more than one flash message!
In this example, the div id is not set at all. Instead, each flash div will have class “div” and also class of the type of flash message (“error”, “warning” etc.).
Have a Great Day..:)
The flash hash is a great way to provide feedback to your users.
Here is a quick tip for hiding the flash message after a period of time if you don’t want to leave it lingering around.
First, add this line to the head of your layout to ensure the prototype and script.aculo.us javascript libraries are loaded:
<%= javascript_include_tag :all %>
Next, add the following to either your layout (recommended), your view templates or a partial depending on your needs. I usually add this to a partial and include the partial in my layouts.<%- flash.each do |flash_type, message| -%>
<%= content_tag :div, message, :class => "flash", :id => flash_type %>
<% content_tag :script, :type => "text/javascript" do %>
setTimeout("new Effect.Fade('<%= flash_type %>');", 10000);
<% end %>
<%- end -%>
<%= content_tag :div, message, :class => "flash", :id => flash_type %>
<% content_tag :script, :type => "text/javascript" do %>
setTimeout("new Effect.Fade('<%= flash_type %>');", 10000);
<% end %>
<%- end -%>
This will wrap the flash message in a div with class=‘flash’ and id=‘error’, ‘notice’ or ‘warn’ depending on the flash key specified.
The value ‘10000’ is the time in milliseconds before the flash will disappear. In this case, 10 seconds.
This function looks pretty good and little javascript stunts like this can help make your site feel more professional. It’s also worth bearing in mind though, not everybody can see well or read as quickly as others so this may not be suitable for every application.
Update:
As Mitchell has pointed out (see comments below), it may be better to set the flash_type as the div class rather than it’s id. If there is the possibility that you’ll be showing more than one flash message per page, setting the flash_type as the div id will result in your HTML/XHTML code becoming invalid because the unique intentifier will be used more than once per page.
Here is a slightly more complex version of the method shown above that will hide all divs with class ‘flash’ after a time delay, achieving the same effect and also ensuring your code stays valid with more than one flash message!
<%- flash.each do |flash_type, message| -%>
<%= content_tag :div, message, :class => "flash #{flash_type}" %>
<% content_tag :script, :type => "text/javascript" do %>
setTimeout("$$('div.flash').each(function(flash){ flash.hide();})", 10000);
<% end %>
<%- end -%>
<%= content_tag :div, message, :class => "flash #{flash_type}" %>
<% content_tag :script, :type => "text/javascript" do %>
setTimeout("$$('div.flash').each(function(flash){ flash.hide();})", 10000);
<% end %>
<%- end -%>
In this example, the div id is not set at all. Instead, each flash div will have class “div” and also class of the type of flash message (“error”, “warning” etc.).
Have a Great Day..:)
© Mad Han RoR Tips or respective owner
