application.js

$(function() {
  
  $(".flash").livequery(function(){
    $(this).delay(5000).fadeThenSlideToggle();
  });

});

create.js.erb

<% if @item.valid? %>
  jQuery("#some-element").prepend("<div class='flash notice'>Item created!</div>");
<% else %>
  jQuery("#some-element").prepend("<div class='flash error'><%= escape_javascript(render('shared/error_messages', :target => @item)) %></div>");
<% end %>

Nice. I like that. It's a bit cleaner than my idea, too, I think. I've got something like

$(function() {
  if ($('#flash').is('visible')) {
    $('#flash').delay(5000).slideUp(1000);
  }
});

Then later:

var update_flash = function(message) {
  $('#wrapper').prepend('<div id="flash">' + message + '</div>')
  $('#flash').slideDown(1000).delay(5000).slideUp(1000);
}

I call, in update.js or whatever

update_flash('<%= escape_javascript(flash[:notice])%>');

In coffeescript, the first part looks like:

$ ->

  if $('#flash').is('visible')
    $('#flash').delay(5000).slideUp(1000)

window.update_flash = (message) ->
  $("#wrapper").prepend('<div id="flash">' + message + '</div>')
  $("#flash").slideDown(1000).delay(5000).slideUp(1000)

Interesting to see other ways to do it. In my case, I have flash messages appearing in various areas so I don't use an id for the flash...though I might change to a single flash area. I'm wondering with your example here if since you presumably always have the div#flash available on the page that you could just replace the text in update_flash instead prepending...

var update_flash = function(message) {
  $('#flash').text(message).slideDown(1000).delay(5000).slideUp(1000);
}

Otherwise it seems like you will end up with multiple elements with the same ID.

Oh, duh. Well, it's not always available, hence me writing it that way, but I either need to check for its availability or I need to make it always available.

…

On Fri, Aug 5, 2011 at 3:32 PM, baldwindavid ***@***.*** wrote: Interesting to see other ways to do it.  In my case, I have flash messages appearing in various areas so I don't use an id for the flash...though I might change to a single flash area.  I'm wondering with your example here if since you presumably always have the `div#flash` available on the page that you could just replace the text in `update_flash` instead prepending.. ``` javascript var update_flash = function(message) {  $('#flash').text(message).slideDown(1000).delay(5000).slideUp(1000); } ``` Otherwise it seems like you will end up with multiple elements with the same ID. ## Reply to this email directly or view it on GitHub: https://gist.github.com/1128167

Well, I probably never would have noticed, but was just recently dealing with a #flash in a single place.