set Time on a message using javascript/jquery

Question

I want to display a message for about 5 - 10 seconds. After 5 - 10 seconds the message should disappear from the screen.

My code:

if (hasAnyPickedToken == true) {
   htmlToken += '<li><span class="icon16 icomoon-icon-info-2 blue"></span><span style="color:black">You Have <b style="color:#428bca">Successfully</b> Picked the token,now you can start your work by clicking open Token.</span></button> </li>';
}

This message should disappear after 5 - 10 seconds after page loaded.

Why would it wait 10 seconds to show up? There's nothing in the code telling it to. — Sam, Dec 27 '15 at 07:36
Actually i need to show the message very short time.when user first time loads the page he/she gets the message & if he/she loads the page again then don't need to show the message. — shuvo sarker, Dec 27 '15 at 07:38
In this case you need to use some form of client side storage. See my answer for details. — James Hibbard, Dec 27 '15 at 08:32

Hemal · Answer 1 · 2019-09-14T05:01:50.460

3

WORKING FIDDLE

You can hide it out this way

$(document).ready(function(){
    function hideMsg(){
    //alert("hi");
        $("span").fadeOut();
    }
    setTimeout(hideMsg,10000);
});

Change elements accordingly.

edited Sep 14 '19 at 05:01

answered Dec 27 '15 at 07:53

Hemal

3,682
1
23
54

score 0 · Answer 2 · edited May 23 '17 at 12:31

0

Try using setTimeout to create a delay before firing a function. This function might add a class to fade out your message with CSS3, or you might prefer jQuery.

edited May 23 '17 at 12:31

Community

1
1

answered Dec 27 '15 at 07:43

xyhhx

6,384
6
41
64

score 0 · Answer 3 · answered Dec 27 '15 at 08:06

0

You can use fadeOut(time) function of jquery...

For example

$(document).ready(function{

    $("#divId").fadeOut(10000); })

answered Dec 27 '15 at 08:06

Hiren

57
6

James Hibbard · Answer 4 · 2015-12-27T08:34:11.090

If you only want to display the message once per visitor, you'll have to use some client side storage such as cookies.

Here's a working example:

<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8 />
    <title>Message Cookie Demo</title>
    <style>
      #message{
        background-color: yellow;
        padding: 5px;
        display: none;
      }
    </style>
  </head>
  <body>
    <h1>Hello, there!</h1>
    <h2>This is some content</h2>
    <p id="message">
      This message will vanish after 5 seconds. It will only display once"
    </p>

    <script src="https://rawgit.com/js-cookie/js-cookie/master/src/js.cookie.js"></script>
    <script>
      var hasSeenMessage = Cookies.get("hasSeenMessage")

      if (!hasSeenMessage){
        var message = document.getElementById("message");
        message.style.display = "block";
        Cookies.set('hasSeenMessage', true, { expires: 1, path: '/' });
        setTimeout(function(){
          message.style.display = "none"
        }, 5000);
      }
    </script>
  </body>
</html>

This uses the following cookie library. The cookie will expire after one day and is valid across the entire site. You can easily tweak this to suit your purposes.

When you try this demo, be sure to run it on a server. It won't work locally in some browsers.

set Time on a message using javascript/jquery

4 Answers4

Linked