Scrolling
Hola, estamos monstando una web y nos ha surgido un problema. Queremos que en un frame, donde vamos a poner un cuadro de texto, aparezca un scroll de desplazamiento vertical para poder leer todo el texto. ¿Se puede crear un scroll que sólo afecte al texto? ¿Se puede diseñar uno propio?.
Muchas gracias.
Muchas gracias.
1 respuesta
Respuesta de bruckner
1
La solución más sencilla consiste en poner, dentro del HTML, un tag TEXTAREA con el texto que necesitéis. Esto tiene la ventaja de que se puede controlar el texto con relativa facilidad "a posteriori" mediante Javascript. Aquí va un ejemplo:
<form>
<textarea cols="40" rows="20" wrap="hard">
Este es el texto...
</textarea>
<form>
El problema es que el usuario puede alterar el texto, al estar usándose un elemento de formulario. Para ello podéis añadir el atributo READONLY al textarea:
<textarea ... readonly>
Pero eso no funcionará en Netscape 4.x. Para que en este navegador tampoco se pueda cambiar el texto, hay que recurrir a un pequeño truco de eventos:
<textarea ... onFocus="blur()">
Desgraciadamente, eso no deja tocar la barra de scroll en algunas plataformas, así que podéis asignar el texto que queréis poner en una variable Javascript y asignárselo al textarea con el evento onLoad de BODY, y después monitorizar el evento onChange del textarea:
En un script dentro de HEAD
var miTexto='Este es mi texto.';
function asignarTexto(txt,txtarea) {
txtarea.value=txt;
}
En el BODY:
<body onload="asignarTexto(miTexto,document.miForm.miTextarea)">
Y en el TEXTAREA:
<form name="miForm">
<textarea name="miTextarea" rows="20" cols="40" wrap="hard"
onChange="asignarTexto(miTexto,this)" readonly>
</textarea>
</form>
Así, aunque el usuario cambie lo que hay escrito, al pulsar ENTER o salir de foco revertirá a lo que ponía en un principio.
Ya os dije que hay más soluciones, pero la que mejor funciona en todos los navegadores es esta. Si tenéis cualquier problema, no dudéis en preguntarme de nuevo.
<form>
<textarea cols="40" rows="20" wrap="hard">
Este es el texto...
</textarea>
<form>
El problema es que el usuario puede alterar el texto, al estar usándose un elemento de formulario. Para ello podéis añadir el atributo READONLY al textarea:
<textarea ... readonly>
Pero eso no funcionará en Netscape 4.x. Para que en este navegador tampoco se pueda cambiar el texto, hay que recurrir a un pequeño truco de eventos:
<textarea ... onFocus="blur()">
Desgraciadamente, eso no deja tocar la barra de scroll en algunas plataformas, así que podéis asignar el texto que queréis poner en una variable Javascript y asignárselo al textarea con el evento onLoad de BODY, y después monitorizar el evento onChange del textarea:
En un script dentro de HEAD
var miTexto='Este es mi texto.';
function asignarTexto(txt,txtarea) {
txtarea.value=txt;
}
En el BODY:
<body onload="asignarTexto(miTexto,document.miForm.miTextarea)">
Y en el TEXTAREA:
<form name="miForm">
<textarea name="miTextarea" rows="20" cols="40" wrap="hard"
onChange="asignarTexto(miTexto,this)" readonly>
</textarea>
</form>
Así, aunque el usuario cambie lo que hay escrito, al pulsar ENTER o salir de foco revertirá a lo que ponía en un principio.
Ya os dije que hay más soluciones, pero la que mejor funciona en todos los navegadores es esta. Si tenéis cualquier problema, no dudéis en preguntarme de nuevo.
