emulación efecto terminal

korkuts · #1 (**permalink**) 27/11/2004, 08:37

Estoy intentando emular el efecto de un terminal, de tal forma que se vaya añadiendo texto en una caja y cada nueva linea de texto se escriba tras la siguiente, pero que una vez llegado al final de la zona visible, el nuevo texto siempre se vea y el viejo se vaya perdiendo por la parte no visible de la caja.

Justo lo contrario que sucede por defecto en html, que por decirlo de alguna forma siempre es visible la parte superior izquierda. Lo que yo quiero es que siempre sea visible la parte inferior izquierda.

Pues bien para ello tengo un elemento

<div id="pantalla>
</div>

definido de la siguiente forma en otro archivo css:
#pantalla
{
position: relative;
left: 10%;
top: 4px;
height:78%;
width: 65%;
z-index:3;
background: black;
color: red;
text-align: left;
border-color: gray;
border-width: 8px 8px 8px 8px;
border-style: solid;
}

Mi problema es que cuando voy añadiendo dinámicamente elementos a <div> los nuevos elementos no se ven por que se quedan en la parte inferior no visible. ¿Como puedo invertir este comportamiento?

furoya · #2 (**permalink**) 02/12/2004, 07:04

Hola korkuts :

No sé cómo agregas el contenido; pero se me ocurió ésto

Código:

 

<HTML>
<HEAD>

<script language= "JavaScript">
var contenido;
var num=1;

function agrega(){
contenido = "<p>Agrega texto N° "+num+" .</p>";
document.getElementById("texto").innerHTML += contenido
num++;
document.getElementById("final").focus();
}
</script>
<style>
#pantalla
{
position: relative;
left: 10%;
top: 4px;
height:78%;
width: 65%;
z-index:3;
font-family:'ocr a extended', 'lucida console', fixedsys, courier, system, monospace;
font-weight:bold;
background: black;
color: red;
text-align: left;
border-color: gray;
border-width: 8px 8px 8px 8px;
border-style: solid; 
overflow:hidden;
}
#final
{
width:0;
height:0;
}
</style>
</HEAD>
<BODY>
<div id="pantalla">
<div id="texto"><p>&nbsp;</p></div>
<input name="final" id="final">
</div>
<p>
<input type="button" value="AGREGAR" onclick="agrega()">
</p>
</BODY>
</HTML>

Habrá que probarlo en distintos navegadores.

saludos

furoya