CODEWITHSUNDEEP
javascriptjquery
shuvo sarker
shuvo sarker

Reputation: 881

set Time on a message using javascript/jquery

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.

Upvotes: 1

Views: 5157

Answers (4)

Hemal
Hemal

Reputation: 3760

WORKING FIDDLE

You can hide it out this way

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

Change elements accordingly.

Upvotes: 3

James Hibbard
James Hibbard

Reputation: 17735

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.

Upvotes: 0

Hiren
Hiren

Reputation: 55

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

For example

$(document).ready(function{

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

Upvotes: 0

xyhhx
xyhhx

Reputation: 6664

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.

Upvotes: 0

Related Questions