<div id="messages">
<div class="message"> <!-- Visible (5 seconds for hide, show the next, and hide again) -->
<div class="message" style="display:none;"> <!-- Hidden -->
<div class="message" style="display:none;"> <!-- Hidden -->
</div>

The following (noob) code will hide the <div> tag after five seconds of be created, so I want to hide each notification after five seconds but when it's visible, It's something like a slideshow but with notifications, 5 seconds per notification when it's visible.

function setid() {
    $('.message').each(function() {
        if($(this).attr('id')==uniqID) { 
            uniqID = Math.floor(Math.random()*9999999);
        }
    });
}

console.log = function(message) {
    console.olog(message);
    setid();
    $('#messages').append('<div id="' + uniqID + '" class="message"> + message + '</div>').show();
    $('#' + uniqID).slideDown(200).delay(5000).slideUp(200);
};

<div id="messages">
<div class="message"> <!-- Visible (5 seconds for hide, show the next, and hide again) -->
<div class="message" style="display:none;"> <!-- Hidden -->
<div class="message" style="display:none;"> <!-- Hidden -->
</div>

The following (noob) code will hide the <div> tag after five seconds of be created, so I want to hide each notification after five seconds but when it's visible, It's something like a slideshow but with notifications, 5 seconds per notification when it's visible.

function setid() {
    $('.message').each(function() {
        if($(this).attr('id')==uniqID) { 
            uniqID = Math.floor(Math.random()*9999999);
        }
    });
}

console.log = function(message) {
    console.olog(message);
    setid();
    $('#messages').append('<div id="' + uniqID + '" class="message"> + message + '</div>').show();
    $('#' + uniqID).slideDown(200).delay(5000).slideUp(200);
};

• javascript
• jquery
• html

Share Improve this question Follow edited Feb 13, 2012 at 12:50 fivedigit 18.7k66 gold badges5858 silver badges6161 bronze badges asked Feb 12, 2012 at 17:56 KennyKenny 1,15244 gold badges1414 silver badges4242 bronze badges 4

• Carful with single/double quotes. This won't work $('#messages').append('<div id="' + uniqID + '" class="message"> + message + '</div>').show(); See the hint in the code highlighting? That should tell you something is wrong. – elclanrs Commented Feb 12, 2012 at 18:02
• class="message">' Yes, sorry, I always write it wrong in the example code, I did it carefully but I did't see that. Thanks. – Kenny Commented Feb 12, 2012 at 18:15
• You should fix the code then. Also what's this console.log = function(action,message)??. And this console.olog(message);? – elclanrs Commented Feb 12, 2012 at 18:22
• @elclanrs Yes. sorry, I am using the "action" in my dev code. – Kenny Commented Feb 12, 2012 at 19:03

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

It's actually very simple:

$(".message").hide().first().show();
setTimeout(showNotifications, 5000);
function showNotifications(){
    $(".message:visible").remove();
    $(".message").first()show();
    if($(".message").length > 0){
        setTimeout(showNotifications, 5000);
    }
}

How it works: It selects all the .message elements and hide them except the first one. After 5 seconds, the first message will be removed from the webpage and the following message will be shown for another 5 seconds and this goes until there is no more notification messages in the site.

Want some animations as well? Check out this:

$(".message").hide().first().show('slow');
setTimeout(showNotifications, 5000);
function showNotifications(){
    $(".message:visible").hide('slow', function(){
        $(this).remove();
        $(".message").first().show('slow');
        if($(".message").length > 0){
           setTimeout(showNotifications, 5000);
        }
    });
}​

Click here for a working example.

You can try something like this.

var intervalId, 
    $messages = $('#messages').find('.messages:visible'), 
    count = 0;

$messages.hide();//hide all the messages 

$messages.eq(count).show();//show the first message

intervalId = setInterval(function(){
   $messages.eq(count).hide();//hide the previous message
   if(count < $messages.length){
       $messages.eq(++count).show();//show the next message     
   }
   else{//all the messages are over clear the interval
       clearInterval(intervalId);
   }
}, 5000);