2

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.

4

2 に答える 2

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.

于 2012-07-28T16:51:32.983 に答える
0

少なくとも...見てみましょう。私はjQueryを使用してタスクを実行しました。

HTML：

<div id="chat"></div>

JavaScript：

// messages to be processed
var messages = [{
    id: 1,
    from: "David",
    text: "Test 1"
}, {
    id: 2,
    from: "David",
    text: "Test 2"
}, {
    id: 3,
    from: "David",
    text: "Test 3"
}, {
    id: 4,
    from: "David",
    text: "Test 4"
}, {
    id: 5,
    from: "David",
    text: "Test 5"
}, {
    id: 6,
    from: "David",
    text: "Test 6"
}];

// how many messages the container acepts?
var maxMessages = 3;

// how many messages the container has?
var messageCounter = 0;

// what is the index of the message that is being currently processed
var currentIndex = 0;

// the messages that was processed (It will work like a queue (FIFO)
var processedMessages = [];

$(function(){
    // processes one message for each 3 seconds
    setInterval( function(){

        // the current message
        var message = messages[currentIndex++];

        // is there a message to process?
        if ( message ) {

            // yes, there is!

            // first, removes the oldest if the max quantity was reached
            if ( messageCounter == maxMessages ) {

                // the container now will have minus one message
                messageCounter--;

                // what is the oldest one?
                // removes from the queue head
                var oldest = processedMessages.pop();

                // removes from the container
                $( "#message_" + oldest.id ).remove();

            }

            // new message incoming!
            messageCounter++;

            // inserts the new message at the queue tail
            processedMessages.unshift( message );

            // inserts the message in the container
            $( "#chat" ).append( "<div id='message_" + message.id + "'>From " +
                                 message.from + ": " + message.text + "</div>" );

        } else {

            // there is no message
            currentIndex--;

        }

    }, 3000 );

});

JsFiddle： http: //jsfiddle.net/davidbuzatto/Ep4tk/

于 2012-07-28T17:03:19.820 に答える