Question

Here’s an example, to explain what I’m trying to achieve

---

Jimmy: Hey I’m a new message sent from PHP, I’m new and I’m appended onto the message log :)!

Tommy: Hey you! More of us messages are coming, your gonna be removed soon!

Jonny: Right that’s it only one more message till Jimmy gets removed because he’s knocked out of our box(div).

10 seconds later…

Tommy: Hey you! More of us messages are coming, your gonna be removed soon!

Jonny: Right that’s it only one more message till Jimmy gets removed because he’s knocked out.

Billy: HI GUYS! .. Wait where’d jimmy go?

Jonny: The box became too full, so one of us had to go, Jimmy was at the top,so off he went. Speaking of which, there’s goes Tommy! Tommy gets removed.

---

Using a setInterval, I managed to achieve a similar effect however, it would only remove the BOTTOM one overflown, which was the newest one instead of the top one who’s message was “old”.

here’s the code I created to achieve this…

var message=document.getElementById('chat_wrap');

if(message.scrollHeight>message.offsetHeight) {
Element.remove();
}

So basically, I want the reverse of what I’ve done. But I’m not sure how I could achieve this.

---

update to make it more clear:

---

Sorry, my explanation isn’t that clear. A good example would be a waterbottle, when it gets full remove the water from the bottom, instead of removing it from the top. Another way to explain what I’m trying to achieve is basically the NEWEST is the priority, so if the newest needs space in the div then remove the oldest one still standing.

Answer 1

Here is a working example.

http://jsfiddle.net/JNahf/2/

<div id="messages">
</div>
<button id="insertAMessage">Insert a message</button>

script

$(function(){
    var removeOldest = function(){
        var messages = $("#messages");
        var maxHeight = messages.height();
        var height = 0;

        $(messages.children().get().reverse()).each(function(){
            height += $(this).height();
            if (height > maxHeight)
               $(this).remove();
        });
    };


    $("#insertAMessage").click(function(){
       $('<div class=".messageItem">bla bla bla bla</div>').appendTo("#messages");
       removeOldest();
   });
});​

I’m using jquery because it’s simple. If you’re not using jquery the idea is the same, but you will need to adapt the code.