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".

Birnbaum

You need to call setTimeout after posting the message and not on document.ready() – Homebrew

@Birnbaum I think that you need the flash-message instead of flash tag, I edited it. – Exposed

Answer 1

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.

Cacoepy

Answer 2

You can use the delay jQuery API to achieve this.

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

Paraldehyde

Answer 3

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!

Consultation

Answer 4

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); 

Screen