How to implement simple confirmation message that disappears after some seconds

Question

I am trying to show a simple confirmation message of successfully logging out following this but I am not sure how to proceed.

This message is going to appear for 5 seconds, after the user clicks the logout button (which simply does the log out and redirects to the home page). This confirmation message, along with the logout button is located at the header.

I have the text wrapped in a div, with id="confirmation".
The onClick event on a link calls the informUser function which does this:

$("#confirmation").show();
setTimeout(function() { $("#myElem").hide(); }, 5000);

The css of the div wrapper is this:

#confirmation {
    position: absolute;
    top: 0;
    left: 45%;
    text-align: center;
    font-size: 1.25em;
}

Now, I needed to hide this element, I tried with visibility: hidden; but the element never showed up.
I tried hiding it using

$(document).ready(function() {
$("#confirmation").hide("slow"); });

and the element showed up for less than a second and then disappeared (due to document.ready being loaded again).

Why you want to reinvent the wheel? My suggestion: use http://fabien-d.github.io/alertify.js/ instead. — Arius, Jul 18 '14 at 22:09
Did you see this question: http://stackoverflow.com/questions/683363/jquery-autohide-element-after-5-seconds — Mils, Jul 18 '14 at 22:10
@Arius I am with you on this, but I am not allowed to use other frameworks — Chris, Jul 18 '14 at 22:20
@Chris - even MIT licensed like this one? Quite weird requirement from client :) — Arius, Jul 19 '14 at 14:09
@Arius Unfortunately it's a stupid request by the teacher at the university. :( — Chris, Jul 20 '14 at 13:17

Christopher · Answer 1 · 2014-07-18T22:39:56.477

Because you are changing pages (when you redirect to the home page), the javascript that handles an event on the logout button won't do anything to show and hide the message on the home page. Instead, I would try setting a cookie with a somewhat short life span, and letting a separate script on the home page handle the displaying of the message if that cookie is set.

You can see a basic overview of cookies here: http://www.quirksmode.org/js/cookies.html

score 0 · Answer 2 · answered Jul 18 '14 at 22:23

It's probably just a typo in the post, but I can't leave comments yet, so here's my answer (just in case).

$("#confirmation").show();
setTimeout(function() { $("#myElem").hide(); }, 5000);

should be

$("#confirmation").show();
setTimeout(function() { $("#confirmation").hide(); }, 5000);

How to implement simple confirmation message that disappears after some seconds

2 Answers2