CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Chris
Chris

Reputation: 3688

How to implement simple confirmation message that disappears after some seconds

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

Upvotes: 0

Views: 1064

Answers (2)

Christopher
Christopher

Reputation: 404

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

Upvotes: 1

Seth Brasile
Seth Brasile

Reputation: 79

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

Upvotes: 0

Related Questions