Clever Geek Handbook

How to hide a flash message after a few seconds?

In my application, a user can send a request to another user. So after successfully posting the call, I am showing one flash message for the same. But now I want to hide this message after a few seconds. So I wrote the 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 doesn't hide the "successMessage" div.

+7


source to share


3 answers


You may try:

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


If you've used this, your div will be hidden after 30 seconds. I tried this too and it worked for me.

+16


source


You can use the jQuery API delay for this .



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


source


In some cases, it is not enough just to set the window to show, it is better to remove it completely. in the following way:

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


source






More articles:


All Articles