How to hide flash message after few seconds?

Question

In my application user can post challenge for other user. So after successful posting a challenge I am displaying one flash message for the same. But now I want to hide this message after some few seconds. So I wrote following code :

$(document).ready(function(){
    setTimeout(function() {
        $("#successMessage").hide('blind', {}, 500)
    }, 5000);
});

<div id="successMessage" style="text-align:center; width:100%">
    <FONT color="green">
        <%if flash[:alert]=="Your challenge is posted successfully."%> 
            <h4><%= flash[:alert] if flash[:alert].present? %>
        <%end%>
    </font>
</div>

But this code is not hiding the div "successMessage".

You need to call `setTimeout` after posting the message and not on `document.ready()` — Guruprasad J Rao, Jul 02 '15 at 05:45
@sweety I think that you need the [flash-message](http://stackoverflow.com/questions/tagged/flash-message) instead of [flash](http://stackoverflow.com/questions/tagged/flash) tag, I edited it. — akmozo, Jul 02 '15 at 12:36

score 27 · Accepted Answer · edited May 03 '18 at 07:29

27

You can try :

setTimeout(function() {
    $('#successMessage').fadeOut('fast');
}, 30000); // <-- time in milliseconds

If you used this then your div will be hide after 30 sec.I also tried this one and it worked for me.

edited May 03 '18 at 07:29

Munim Munna

17,178
6
29
58

answered Jul 02 '15 at 05:50

Puja

591
6
13

score 10 · Answer 2 · edited May 03 '18 at 07:37

10

You can use the delay jQuery API to achieve this.

$(document).ready(function(){
    $("#successMessage").delay(5000).slideUp(300);
});

edited May 03 '18 at 07:37

Munim Munna

17,178
6
29
58

answered May 02 '18 at 20:20

m Piroli

333
3
6

score 9 · Answer 3 · answered Nov 22 '19 at 19:46

Someone posted a similar question to stackoverflow with this solution:

<script type="text/javascript">window.setTimeout("document.getElementById('successMessage').style.display='none';", 2000); </script>

<div id="successMessage"> bla bla bla
</div>

I'd share the link but I can't find it anymore. Thanks for the help, though, mystery human!

score 1 · Answer 4 · answered Sep 02 '19 at 13:26

1

Some times it's not enough to only setting display of box to none it's better to completely remove it. as follows:

setTimeout(function() {
    $('.alert-box').remove();
}, 30000);

answered Sep 02 '19 at 13:26

Qasim Nadeem

597
4
17

How to hide flash message after few seconds?

4 Answers4

Linked

Related