Scrolling log file (tail -f) animation using javascript

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 t

Answer 1

I've updated Manuel van Rijn's script to include a timer and a toggle switch, along with some minor changes to the log lines. hope this helps. http://jsfiddle.net/5rLw3LoL/

html:

    
some line of text

Add Line

js:

var tailcounter = 100;
var tailswitch = false;

// scroll to bottom on init
tailScroll();

// add line to log
function tailappend() {
    $("
").text("log line " + tailcounter).appendTo("#tail");
    tailcounter++;
    tailScroll();
}

// auto update every second
var t = setInterval(tailappend, 1000);

// toggle updates button click
$("button").click(function (e) {
    e.preventDefault();
    switch (tailswitch) {
        case false:
            clearInterval(t); // turns off auto update
            tailswitch = true;
            alert("auto update off");
            break;
        case true:
            t = setInterval(tailappend, 1000); // restarts auto update
            tailswitch = false;
            alert("auto update on");
            break;
    }
});

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

css: (important for formatting)

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