Flash Message - jQuery

Question

In my Rails application I have flash messages and I would like it so that each time there is a flash message, it scrolls down from the top (all the content goes lower) stays for a few seconds and the slides back up.

How can I do this with jQuery?

Do I toggle the height?

Update

Sometimes the message will be injected into the HTML which means that the slideDown won't work since the DOM has already loaded, how can I have it so jQuery looks for .message and then applies the slideDown and slideUp?

look at `slideUp,slideDown` or `slideToggle` in jQuery API http://api.jquery.com/slideToggle/ — charlietfl, Dec 22 '12 at 20:52
Clarify your question and what you have tried so far, post if you have any non-working code sample ? — The Alpha, Dec 22 '12 at 20:52
@LeeTaylor Flash messages are just notices that appear and disappear after a few seconds. — user1919937, Dec 22 '12 at 20:54
@SheikhHeera I haven't tried anything as I don't know how to. — user1919937, Dec 22 '12 at 20:54
possible duplicate of [Best way to display flash notices in Rails](http://stackoverflow.com/questions/14005381/best-way-to-display-flash-notices-in-rails) — Todd A. Jacobs, Dec 22 '12 at 21:13

score 11 · Accepted Answer · answered Dec 22 '12 at 20:53

11

You can make it slide down, wait for couple of seconds and slide back again with this:

$(selector for your message).slideDown(function() {
    setTimeout(function() {
        $(selector for your message).slideUp();
    }, 5000);
});

Change the 5000 to the time you want the message to stay visible in milliseconds.

And remember to set display: none; in CSS for your message, so that it does not appear until jQuery goes in.

answered Dec 22 '12 at 20:53

Eleeist

6,891
10
50
77

How can I do it so it slides up when there is a message inside? – user1919937 Dec 22 '12 at 20:59
I guess you would have to check this on server-side and add appropriate class or `data` argument so the jQuery would know whether it should animate or not. Or check with jQuery if it's empty... – Eleeist Dec 22 '12 at 21:00
How can I check if it's empty with jQuery? – user1919937 Dec 22 '12 at 21:07
`if (!$(your message).html()) { is empty }` – Eleeist Dec 22 '12 at 21:19
Ah, ok. Also, see the update I made. It might be why it's not working – user1919937 Dec 22 '12 at 21:23
It is good that DOM has already loaded. Just set `display: none` in CSS for your message. It will be hidden until jQuery shows it with `slideDown`. – Eleeist Dec 22 '12 at 21:27
Sorry for the confusion. What I mean is that I use Ajax so when the user hits the save button, it injects a div with the class message into the header so slideDown isn't working – user1919937 Dec 22 '12 at 21:30
It should work. How do you inject the div into the DOM? For example this should work: `$(".header").append(message).slideDown();`. – Eleeist Dec 22 '12 at 21:36
Some messages are injected using erb tags and the one where I save with Ajax, I have a update.js.erb file that contains `$('.header').append('
Saved
');` – user1919937 Dec 22 '12 at 21:44
Look at this fiddle: http://jsfiddle.net/RPSwV/. Dynamically appending content to page does not prevent animations from working correctly. – Eleeist Dec 22 '12 at 22:03
Just click the run button again - the animation begins the moment you load the page. – Eleeist Dec 22 '12 at 22:12
I have no idea how else to help you. It ought to work. Sorry. – Eleeist Dec 22 '12 at 22:18
It's not your fault. For some reason the append is not actually injecting the code – user1919937 Dec 22 '12 at 22:18

score 1 · Answer 2 · answered Dec 22 '12 at 20:58

1

I'll assume your flash message is contained in some element that is (or can be) identified by class. You want to find the first one, then adjust the scroll position to the top of that element (or some offset from it), then wait and scroll back to the top.

$(function() {
    var $flashMsg = $('.flash-message:first');
    if ($flashMsg.length) { // we've got one
       var top = $flashMsg.offset().top;
       $('html,body').animate({ scrollTop: top })
                     .delay(3000)
                     .animate({ scrollTop: 0 });
    }
});

answered Dec 22 '12 at 20:58

tvanfosson

524,688
99
697
795

Where do I enter the class name? – user1919937 Dec 22 '12 at 21:04
That would be in the HTML surrounding your flash message. Been awhile since I've done any Ruby, but something like `
@flash[:error]
` – tvanfosson Dec 22 '12 at 21:09
I may have misunderstood your actual requirements. This will scroll the window to the error message, not slide open an error message at the top. That's actually much easier. – tvanfosson Dec 22 '12 at 21:11

Matanya · Answer 3 · 2012-12-22T21:02:57.640

0

use JQuery's slideDown() and call slideUp() in the callback coupled with a timer:

$("#message").slideDown(500, function(){
    setTimeout(function(){
$("#message").slideUp(500);  
},5000);
});

edited Dec 22 '12 at 21:02

answered Dec 22 '12 at 20:56

Matanya

6,233
9
47
80

score 0 · Answer 4 · answered Oct 19 '17 at 15:39

0

function flashRed(sel, blinks){  //using jQuery
    blinks = blinks||3
    var x = $(sel),
        bg = x.css('background-color'),
        fg = x.css('color'),
        counter = 0,
        f, b;

    for(var i = 0; i < blinks * 2; i++){  

       setTimeout(function(){
           if(counter%2){
             f=fg; b=bg
           }
           else{
             f='white'; b='red'
           }
           counter++

           x.css({'color':f, 'background-color':b})
       },i*400)
    } 

 }

answered Oct 19 '17 at 15:39

Lewiss

17
2

Can you add some commentary to your answer, in order for everyone else to know how you solved the problem? – Moseleyi Oct 19 '17 at 16:07
This solution allows as many flashes as you want. Call it like this: – Lewiss Oct 19 '17 at 16:18
Call it like this: flashRed('slector', 4). This will cause the text of the selector to flash 4 times. – Lewiss Oct 19 '17 at 16:23
The trick is to use a counter to alternate colors. You cannot use the index in the for loop. – Lewiss Oct 20 '17 at 01:43

score 0 · Answer 5 · answered Aug 06 '18 at 07:47

0

You can do it like this. here duration is in milliseconds.

$.fn.flash_msg=function(duration){
  this.fadeIn().delay(duration).fadeOut(function(){
    this.remove();
  })
}

$("#message").flash_msg(1500);

answered Aug 06 '18 at 07:47

Kaleem Nalband

687
7
21

Flash Message - jQuery

Update

5 Answers5

Linked