Question

I’d like to create an animation on a website to mimic a scrolling log file or tail -f. I’d feed it a list of fake log messages and they would be written to the bottom of the div and scroll up and off the top as new messages are displayed and then loop around. It needs to look authentic, white on black using a fixed width font etc.

Does anyone know of any javascript or jQuery libraries which could help me with this? I’m a beginner with javascript, so any advice on how to approach this would be much appreciated.

Answer 1

I’ve made a simple example for you

http://jsfiddle.net/manuel/zejCD/1/

// some demo data
for(var i=0; i<100; i++) {
    $("<div />").text("log line " + i).appendTo("#tail")
}

// scroll to bottom on init
tailScroll();

// add button click
$("button").click(function(e) {
    e.preventDefault();
    $("<div />").text("new line").appendTo("#tail");
    tailScroll();
});

// tail effect
function tailScroll() {
    var height = $("#tail").get(0).scrollHeight;
    $("#tail").animate({
        scrollTop: height
    }, 500);
}

#tail {
    border: 1px solid blue;
    height: 500px;
    width: 500px;
    overflow: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="tail">
    <div>some line of text</div>
</div>

<button>Add Line</button>