I've been fooling around with this again.

This is what I've currently got:

function scrollToEnd() {
    $('html,body').animate({
      scrollTop: $('#divOutput div').last().offset().top
    });
};

var moreElement = "<div id='morePrompt' ";
moreElement += "style='display:none;position:fixed;bottom:1%;right:20px;";
moreElement += "font-weight: bold; background: #5c9ccc;color: #FFFFCC;font-size: 125%;";
moreElement += "opacity: 0.7;padding: 2px 6px;-webkit-border-radius: 4px;-moz-border-radius: 4px;'";
moreElement += ">SPACEBAR to scroll down</div>";

function setupMorePrompt(){
  $('#morePrompt').appendTo($('body'));
  $('#txtCommand').unbind('inview');
  $('#txtCommand').bind('inview', function (event, visible) {
    if (visible == true) {
      clearTimeout(moreTimeout);
      $('#morePrompt').css('display', 'none');
      $('#txtCommand').focus();  
    } else {
      var moreTimeout = setTimeout(function(){
        $('#morePrompt').css('display', 'block');
        $('#txtCommand').blur();
      },500);
    }
  });
};

setTimeout(function(){
  addText(moreElement);
  setupMorePrompt();
}, 500);

I should probably add a way to check if the map or a room image is being displayed.

I also need to use the child before last, not the last child, so the last command will be at the top.