Making a DOS-style window in ASP.net

Question

I'm trying emulate the MS-DOS command prompt on my website. I don't need to accept keystrokes, but I'd like to append data at the bottom and optionally scroll upwards.

At first I looked at the asp:TextBox and asp:Label, but the flicker of using postbacks seemed to be too much. I'm now considering DIV tags and Javascript where I simply update the InnerHTML property, but there too I get flicker, and have issues with scrolling.

What solution would you recommend in this situation? Essentially I'm trying to count to infinity, with a 1 sec delay, only need the most current 300 or so entries, with the most current entry at the bottom of the screen.

Is this even possible with JS/CSS?

Answer 1

I just built something very similar using jQuery. You can use the append method to add content to the bottom of your DIV. You can then set the scrollTop attribute to keep things scrolled to the bottom as follows:

$("#someDiv").attr({ scrollTop: $("#someDiv").attr("scrollHeight") });

Answer 2

I think "DOS-style window" is a bit misleading considering all you want to do is append text to a div and make sure it stays scrolled to the bottom.

function addLine(text) {

  var box = document.getElementById('DOSBox') //teehee

  var line = document.createElement('p');
  line.innerHTML = text;

  box.appendChild(line);

  box.scrollTop = box.scrollHeight;

}

And style it as such

#DOSBox {
  overflow: auto;
  display: block;
  height: 400px; width: 500px; /* or whatever */

  /* and if you want it to look DOS-like */
  background: #000;
  color: rgb(192, 192, 192);
  font-family: fixedsys;
}

#DOSBox p {
  margin: 0;
}

Answer 3

Do you wish to make it a little more stylous ? :)

see this page... http://www.klaus.dk/Some_unknown_page
or this one http://www.harryovers.com/404.html?aspxerrorpath=/Account/LoginPartial

here is the javascript source code.

http://code.google.com/p/c64-404-page/

With a little change, you can append your text on this code :)