Hola de nuevo :
Bien. Es muy beta, pero funciona.
Lo hice para
IE (si te sirve, tendrás que adaptarlo para los otros navegadores) y no tiene botón
ATRÁS, pero supongo que se puede agregar.
Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<TITLE>TEXTO SE AJUSTA A CONTENEDOR.</TITLE>
<script language= "JavaScript">
var parrafos = new Array()
parrafos[0] = "<p>Éste es un texto para probar el escript.</p>"
parrafos[1] = "<p>Por eso voy a rellenar con <i>QWERTY</i>s en grupos de <b>3</b>.</p>"
parrafos[2] = "<p><u>1</u> QWERUTYOP QWERTY QWER.</p>"
parrafos[3] = "<p><u>2</u> QWERTYUI QWERTYUIOP QWER QWERTYU .</p>"
parrafos[4] = "<p><u>3</u> QWERTYUIOP QWERTYUI QWER QW QWERTYUIOP</p>"
parrafos[5] = "<p>Y sigo rellenando con <i>QWERTY</i>s</p>"
parrafos[6] = "<p>No, mejor con <i>ASDFGH</i>s en grupos de <b>3</b></p>"
parrafos[7] = "<p><u>1</u> ASDFGH ASDFGHJKLÑ ASDFGH .</p>"
parrafos[8] = "<p><u>2</u> AS ASDFGHJ ASD ASDFHJKL</p>"
parrafos[9] = "<p><u>3</u> AS ASDFGHJ ASDFGHJK ASD ASDFHJKL.</p>"
parrafos[10] = ""
var indice=0;
var contenidoTexto="";
var altoDiv, altoTexto ;
function mideAlto(){
var altoDoc = document.body.clientHeight;
var altoPag = ((altoDoc/100)*60)
document.getElementById("cont1").style.height = altoPag +"px";
}
function inicia(){
document.getElementById("cont2").innerHTML = "";
muestraPagina();
}
function muestraPagina(){
altoDiv=document.getElementById("cont1").offsetHeight;
altoTexto=document.getElementById("cont2").offsetHeight;
document.getElementById("boton").value="SIGUIENTE";
//alert(altoTexto+ " " +altoDiv)
if(altoTexto < (altoDiv-20) && indice <= parrafos.length){
contenidoTexto = document.getElementById("cont2").innerHTML;
document.getElementById("cont2").innerHTML = contenidoTexto+parrafos[indice];
indice++;
if(indice != parrafos.length)
setTimeout("muestraPagina()" , 100);
else{
document.getElementById("boton").value = "INICIO";
indice = 0;
contenidoTexto = "";
}
}
else{
document.getElementById("cont2").innerHTML = contenidoTexto;
indice--;
}
}
onload = mideAlto;
</script>
<style>
html{background:peachpuff; height:100%; width:100%; }
h3{text-align:center; font-size:30pt}
#boton{background:mocasin}
#cont1{overflow:hidden; height:60%; width:50%; padding:0; align:center; border:12pt gold inset; background:cornsilk}
#cont2{padding:5px 10px}
#cont2 p{font-size:20pt; text-align:left}
</style>
</HEAD>
<BODY>
<h2>Muestra texto dentro de un <tt>DIV</tt> sin sobrepasar su tamaño.</h2>
<b>IE5+ FF1+ Op7.5+ Ch0.2+</b>
<center>
<input type="button" value="SIGUIENTE" id="boton" onclick="inicia()">
<p>
<div id="cont1"><div id="cont2"><h3>Portada</h3></div></div>
</center>
</BODY>
</HTML>
Como estamos en
(X)HTML, voy a tomarme el atrevimiento de pedir que trasladen tu tema a
Javascript porque es evidente que las respuestas tienen más de JS que de HTML.
saludos
furoya
P.D. : y también hice el código para mover con teclado.