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
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>
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.
var sec = 2. try it as var sec = 3 or var sec = 5 and see what would happen.. ;) cheers!
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);
});
This makes use of jQuery's native .delay(), and it uses a setInterval() that stops when it gets to zero.
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.
