jQuery: Moving window (or FIFO) type DIV?
- by Legend
I have been trying to get this effect for a couple of hours now and I must admit I am failing at it. I am trying to construct a DIV that accepts a particular number of items (say 5), when the 6th item is added, the first item that was aded should be removed (first-in-first-out). The feel should have some kind of a fadeIn and fadeOut. Here's what I managed to write till now:
...
//Create a ul element with id 'ulele' and add it to a div
...
//Do an ajax call and when an element arrives
Hash = ComputeHash(message)
if(!$("#" + Hash).exists()) {
var element = $("<li></li>").html(message).attr('id', Hash).prependTo("#ulele");
$("#" + Hash).hide().delay(10000 - 1000 * messageNumber).show("slow");
_this.prune("#ulele");
}
...
prune: function(divid) {
$("#" + divid).children().each(
function(i, elemLi) {
if(i >= maxMessages)
$(this).delay(10000).hide("slow").delay(10000).remove();
}
);
}
I've tried a couple of variations but the final effect I am getting is not that of a FIFO. The elements disappear instantaneously despite the delay and hide("slow") calls. Anyone has a more straightforward approach?
