Tutorial :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?


Solution:1

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 :)


Solution:2

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") });  


Solution:3

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;  }  

Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Previous
Next Post »