Show the div when the variable is set and let it disappear after x seconds
I have a php page with a variable that is set to true or false for pageload. I want to show a specific div when the variable is true and then the div disappears after x seconds. When its false, the div remains hidden.
My code shows the div, but it doesn't disappear after x seconds.
if($showNotification == TRUE){
echo "<div class='notification'>notification!!</div>";
echo '<script type="text/javascript">
$(document).load(
function() {
$("div.notification").fadeIn();
setTimeout(function() {
$("div.notification").fadeOut("slow");
}, 3000);
});
</script>';
}
+3
Noob
source
to share
4 answers
Replace JS with the following:
$(function() {
$('div.notification').hide().fadeIn().delay(3000).fadeOut('slow');
});
Demo: http://jsfiddle.net/nEsg9/
+6
AlienWebguy
source
to share
Instead of using:
$(document).load( ...
using
$(document).ready( ...
+1
Chris christensen
source
to share
if($showNotification == TRUE){
echo "<div class='notification' style='display:none'>notification!!</div>";
echo '<script type="text/javascript">
$(document).load(
function() {
$("div.notification").fadeIn();
setTimeout(function() {
$("div.notification").fadeOut("slow");
}, 3000);
});
</script>';
}
This shows that it is not hidden until you fadein. Therefore fadein has no effect (it already exists).
+1
Green black
source
to share
Use ready instead of download.
Here is a working example, but not fading out because it always displays
http://jsfiddle.net/2JKxr/1/
$(document).ready(
function() {
$("div.notification").fadeIn();
setTimeout(function() {
$("div.notification").fadeOut("slow");
}, 3000);
});
+1
mercsen
source
to share