Presentacion "por paginas"

[Marc0s]

Hola a todos.

Primero presentarme, soy nuevo en el foro. Espero no daros mucha guerra y poder aportar algo en lo sucesivo.

Empiezo con una cuestion. Veamos si consigo explicarme:

- Tengo una ventana del navegador, de tamaño fijo y sin barras de desplazamiento (ni nada -toolbar, statusbar, etc-, pero eso no importa).

- Si meto en ella un texto (a traves del codigo HTML oportuno, claro) al no haber barras de desplazaminto si no coge todo el texto en ella entonces una parte queda "para abajo", sin ser accesible en principio, fuera de la vista.

- La presentacion quiero que sea por "paginas", como en un editor estilo Word, o en el Acrobat Reade, etc.

Es decir, que pondria un enlace que pusiera algo así como "siguiente>>" y al pulsar en el apareceria la siguiente pagina, en la que se ve lo que no habia entrado en la actual.

Todo esto partiendo de un unico archivo .htm. Ya se que puedo hacer varios ficheros, calculando en cada uno de ellos lo que puede entrar en una de mis ventanas de tamaño fijo e irlos cargando. Pero no es lo que busco y ademas teniendo en cuenta que el tipo de letra puede variar mucho de un usuario a otro pues cabe la posibilidad de que lo que en una configuracion entre perfectamente en otra se quede muy pequeño y sobre la mitad o en otra no entre ni 3/4 del total.

Bueno, dudo si me he explicado correctamente.... Pero lo que no dudo es que en principio en HTML no se puede hacer lo que quiero, ¿me equivoco? (Ojala!!).

Saludos a todos, y perdon por el rollo.

[caricatos]

Hola Marc0s, bienvenido a los foros :

Quieres algo bastante complejo, pero en un principio puede servirte poner cada "página" con el estilo display = "none" y la visible con display = "block" y luego un menu con el índice a cada página o un enlace a la siguiente y anterior... Esas cosas tendrás que ir enterándote poco a poco.

En mi galería de caricaturas tengo algo tal como te explico: http://www.sucaricatura.com/2003/prueba.html

Ese enlace es una prueba de lo que estoy haciendo para actualizarla... En mi perfil puedes ver como está actualmente.

Saludos

[furoya]

Hola Marc0s , caricatos :

me pasa muchas -demasiadas- veces que leo un mensaje y no lo respondo aunque me interese el tema. En la mayoría de los casos porque no tengo nada para responder.

Ni hablar de los casos en que ya hay una respuesta y, si quien inició el tema no regresa, se deben dar por bien contestados.

Pero también me ha pasado varias veces lo de los melones; según la sabiduría popular, uno puede echar esas frutas en el carro de cualquier manera, total en el viaje se acomodan solos.

Pues con el pasar de los días, las explicaciones originales (digo, tus explicaciones originales, MarcOs) se me fueron ubicando de manera diferente a la interpretación que les dí en un principio (que fue la misma que les diste tú, caricatos).

Voy a elegir sólo algunos de los párrafos que me dejaron pensando, a modo de muestra.

Iniciado por Marc0s

...- Tengo una ventana del navegador, de tamaño fijo y sin barras de desplazamiento...

...- La presentacion quiero que sea por "paginas", como en un editor estilo Word, o en el Acrobat Reade, etc.

Es decir, que pondria un enlace que pusiera algo así como "siguiente>>" y al pulsar en el apareceria la siguiente pagina, en la que se ve lo que no habia entrado en la actual...

Word es un editor que permite configurar un tamaño de papel y verlo en una o dos de sus 'vistas' tal como quedará en la impresión del documento; si cambiamos el tamaño de la hoja el contenido se ajustará al nuevo formato.
AcroRead no. Sólo sirve para ver lo que el creador del documento ya configuró.
Los navegadores web no son editores y desde HTML no puede leerse un tamaño de papel, pero sí acomodan el texto al tamaño de la ventana.

Noté que "páginas" está entre comillas; como se usa cuando se le da a una palabra una acepción fuera de la usual.

Las ünicas "páginas" que comparten todos estos programas, y que justamente tienen que ver con la barra de desplazamiento, son las que manejan las teclas [Re Pág] , [Av Pág] o la barra espaciadora en los browsers.

El método usual para eliminar scrollbars es el CSS overflow:hidden. Ésto, como bien fue descrito 2 mensajes más arriba, no oculta las barras sino el contenido que "sobra", lo que hace inutiles las scrollbars y por eso no aparecen. No sé que pasará con los demás navegadores, pero en Microsoft se lo tomaron demasiado en serio y el IE no permite el desplazamiento ni siquiera con el teclado.

MarcOs, no sé si divagué demasiado o reinterpreté tu mensaje correctamente. En cualquier caso, no estaría mal tratar de resolver el problema (que se presenta al menos en IE) y buscar un truco que permita usar -mínimo- el teclado para desplazar documentos sin barras "páginas" arriba y "páginas" abajo.

Si se me ocure algo lo posteo.

saludos

furoya

[Marc0s]

Bueno, primero muchas gracias a los dos, caricatos y furoya, por vuestras respuestas.

La verdad es que no es facil explicar lo que quiero. Basicamente se trata de convertir un medio continuo, como es una pagina web, en un medio paginado, como lo es el word en alguna de sus opciones de representacion (la "presentacion preliminar", por ejemplo).

Gracias a este problema, que aun no he resuelto, al menos he descubierto algo de CSS2, no hay mal que por bien no venga. Me ha parecido muy interesante, lastima que no todos los navegadores lo tengan soportado al 100% (mas bien, lastima que no haya un solo explorador que lo tenga implementado al 100% y sin errores).

Pero bueno, al grano. En CSS2 he encontrado algo parecido a lo que pretendo. A una "caja" como puede ser por ejemplo un parrafo se le puede dar un tamaño fijo, tanto de ancho como de alto. Si lo que hay en él no entra en ese tamaño que hemos dado, en principio se modifica el alto para que entre todo.... pero si ponemos overflow:hidden entonces no lo modifica, simplemente no lo muestra.

Tal vez he desviado la atencion con las barras de desplazamiento y tal. Imaginemos que en una pagina web tenemos una zona de tamaño fijo, por ejemplo el rectangulo (10,10)-(510,410). Esto es lo que llamo una "pagina" jeje. Lo que quiero es hacer la presentacion de todo un contenido HTML en esa "pagina". Pero con una condicion, que no haya una barra de desplazamiento dentro de esa "pagina" para ayudarnos a recorrer arriba y abajo el contenido. Lo que yo pondria seria un enlace fuera de la "pagina" que pusiera "siguiente" o "previo" y así se iria mostrando todo.

Como digo, algo parecido he conseguido con CSS2 (aunque tambien se podria hacer con frames y al frame central no ponerle barras de desplazamiento, simplemente). Un problema que me he encontrado es que corta de forma drastica: si entra media linea de alto solamente, pues muestra esa media linea. A mi me interesaria que si una linea no es capaz de hacer que se vea entera (en lo alto, quiero decir) pues que no la mostrara, sino que la dejara para mostrarla en la siguiente "pagina".

En cuanto al problema que planteas, furoya, yo las barras de desplazamiento las elimino poniendo dentro de <BODY scrollbar="no"> (hablo de memoria, no se exactamente la sintaxis, no recuerdo si es "No" o "none" y tal). De esta forma si se puede recorrer abajo la pagina, pero no con repag y avpag, sino seleccionando el texto como si fueras a copiarlo despues jeje.

[furoya]

Sí, era seguro.
Es que a veces me aburro y me pongo a repensar lo que ya fue pensado (tengo que encontrar algo mejor que hacer).

Como dijo bien caricatos, ésto puede ser bastante complejo. La fuente puede cambiar en cada navegador y alterar el tamaño de la caja que la contenga. En CSS se puede sugerir más de una fuente y darle a cada una un tamaño que mantenga la proporción, pero no es ciento por ciento seguro ni funciona en todos los navegadores.

Como dependemos de valores en la máquina cliente, éso casi excluye a los lenguajes de servidor. Quizá con un javascript algo rebuscado ...

Dividimos el texto en párrafos que guardamos en variables. Dentro de un DIV con overflow:hidden ponemos otro (o quizá un SPAN) y metemos el primer párrafo en él; si la altura del SPAN es menor que la del DIV, a continuación metemos el segundo párrafo,y si el SPAN sigue siendo más chico continuamos con el tercero.
Cuando la altura del SPAN supere la del DIV sabremos que el espacio visible se terminó. Entonces reescribimos hasta el párrafo anterior y creamos un nuevo conjunto DIV/SPAN (o usamos el ya creado) para meter luego el párrafo que no entró, y continuamos así hasta el final del texto.

Es solamente una idea, hay que pulirla bastante.

Me gustaría ocuparme del asunto, pero de momento estoy tratando de desplazar documentos sin scrollbar con el teclado .

saludos

furoya

P.D. : todos sabemos que no me voy a aguantar y que cuando termine de mandar el mensaje me voy a arrojar de cabeza a probar si la idea funciona. Pero déjenme engañarme para creer que tengo algo de fuerza de voluntad.

cuantos lineas de texto tengo en un div?

[furoya]

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.

[Marc0s]

Madre mia.... eres una maquina, Furoya. Lo que has hecho es exactamente lo que estaba buscando. Lo habia dejado por imposible, por eso no he respondido antes a tu mensaje ya que ni lo habia visto. Muchisimas gracias!!.