Login/Register
jQuery countdown timer
Asked Answered
Solved jquery
C

3

20

Currently i have this code

setTimeout(function() { $('#hideMsg').fadeOut('fast'); }, 2000);

is it possible for me to put countdown timer for 2 seconds?

Like

<div id="hideMsg">
The entry you posted not valid.
This Box will Close In 2 Seconds
</div>

"This Box will Close In 2 Seconds" will automatically change to 2sec 1sec

Chalcocite answered 24/9, 2010 at 7:31 Comment(0)
B
53

use setInterval instead of setTimeout, then with the combination of clearInterval

var sec = 2
var timer = setInterval(function() { 
   $('#hideMsg span').text(sec--);
   if (sec == -1) {
      $('#hideMsg').fadeOut('fast');
      clearInterval(timer);
   } 
}, 1000);

html

<div id="hideMsg">
The entry you posted not valid.
This Box will Close In <span>2</span> Seconds
</div>

crazy demo

Making it better.

var sec = $('#hideMsg span').text() || 0;
var timer = setInterval(function() { 
   $('#hideMsg span').text(--sec);
   if (sec == 0) {
      $('#hideMsg').fadeOut('fast');
      clearInterval(timer);
   } 
}, 1000);​

so that the time will depends on what is inside the <span>. For example, <span>2</span> is 2 seconds, <span>5</span> is 5 seconds, and <span>60</span> is 1 minute.

another crazy demo

Burletta answered 24/9, 2010 at 7:36 Comment(5)
@Reigel - ignore the haters - it's useful for me :) +1rep – Caoutchouc
Working great, why there is delay initially? Is it fixable? Thanks – Chalcocite
try playing with var sec = 2. try it as var sec = 3 or var sec = 5 and see what would happen.. ;) cheers! – Burletta
see also, Making it better. above. – Burletta
To fix the delay set "sec" to be 1 less than the second count in the initial display message. – Screak
K
1

Note:

I didn't realize how similar this was to Reigel's answer until I read his answer. Basically, the only difference is that I use .delay() to hide the div instead of the interval. Different options...

If you put the initial number in a <span> this will count down to zero from whatever that number is:

$(function() {

               // Number of seconds counter starts at is what's in the span
    var timer, counter = $("#hideMsg span").text();

      // Delay the fadeout counter seconds
    $('#hideMsg').delay(counter * 1000).fadeOut('fast');

      // Update countdown number every second... and count down
    timer = setInterval(function() {

        $("#hideMsg span").html(--counter);
        if (counter == 0) { clearInterval(timer)};

    }, 1000);

});​

jsFiddle example


This makes use of jQuery's native .delay(), and it uses a setInterval() that stops when it gets to zero.

Keener answered 26/9, 2010 at 5:4 Comment(0)
U
0

Do another set timeout after a second and set the .html() of the div like this:

setTimeout(function() { $('#hideMsg').html('The entry you posted not valid. <br /> This Box will Close In 1 Second'); }, 1000);

Put them in a function and run the function onload like this:

<body onload="function_name()">

hope this helps.

Ultrared answered 24/9, 2010 at 7:36 Comment(2)
this will not hide it. will it? – Burletta
You will need to use both timeout's the one above will change the text and the original one will fade it out after 2 seconds? There is also ".hide()" in jquery if you wish to hide it without fading or ".toggle()" which will show and hide depending on the current state. – Ultrared

© 2022 - 2024 — McMap. All rights reserved.