Search code examples
javascriptloggingmootools

Dynamically add text to the bottom of a div and scroll with text in focus

I have a script that currently displays status messages from a series of functions using FireBug console logs, I want to display those log messages in a single div as have them appear the same way they do in FireBug.

That is the most recent at the bottom and the div will automaticly scroll-down with each new line beyond the height of the div. A log window.

Am using JS Lib - Mootools 1.4.5

Thanks.

Solution

  • I think this should do it.

    var log = 'This is awesome log';

function updateLog(logText)
{
    // update logContainer
    var logContainer = $('.logContainer');
    logContainer.set('html', logContainer.get('html') + '<br>' + logText);

    // scroll logContainer to the bottom
    logContainer.scrollTop = logContainer.scrollHeight;
}

updateLog(log);