|
||||
|
|
|
|
|
|
|
|||
|
|
|||
|
||||
Home - WebScript - Capas - Scroll 1 - 1 - 2 - 3 - 4 - 5 - 6
Scroll 1 (III)
por Luciano Moreno, del departamento de diseño web de BJS Software.
Aumentando la altura.-
El proceso de aumento de altura de la capa debe ser doble, ya que no basta con incrementar dinámicamente la propiedad HEIGHT de la misma, ya que se encuentra recortada a unos valores iniciales mediante CSS, por lo que el efecto de aumentar su HEIGHT no se traducirá en un aumento de su visibilidad. Necesitamos modificar a la vez las propiedades de recorte en altura de la capa, accediendo a la propiedad CLIP. El aumento de altura debe ser identico en ambas propiedades.
El código para Intenet Explorer sería:
var paso=5,
H=280;
function
recorta(id)
{
H=parseInt(document.all(id).style.height);
document.all(id).style.height=H+paso;
eval('document.all(id).style.clip="rect(0,300,'+(H+paso)+',0)"');
}
y situamos en el BODY un enlace que llame a esta función y le pase el ID de la capa:
<a href="#" onClick="recorta('texto');return false;">recorta</a>
En este código, paso es una variable que vamos a usar para ir aumentando 5 pixels en cada llamada a la función, y H va a ir almacenando en cada momento la altura de la capa. Usamos la función eval ya que debemos introducir en una cadena de texto ("rect(0,w,h,0)") una variable (H+paso).
El efecto de este código lo tenéis en esta ventana (sólo con Internet Explorer).
Si pulsáis en enlace...SORPRESA. Nos da un error, diciéndonos que estamos usando un argumento invalido. Esto ocurre porque aunque hayamos definido mediante CSS las dimensiones y el recorte de la capa, el motor JavaScript no sabe cuales son estos valores inicialmente. Debemos inicializar las propiedades de la capa que vayamos a cambiar mediante JavaScript para que en el primer paso sepa qué valores tiene que manejar.
Para ello, creamos una nueva función, iniciaValores(), que lo único que va a hacer es inicializar estas propiedades de la capa:
var
capa="texto";
function
iniciaValores()
{
document.all(capa).style.height=
280;
document.all(capa).style.clipt="rect(0,300,280,0)";
}
y la llamamos desde el BODY, para que cuando se acabe de cargar la página se ejecute la función:
<body onLoad="iniciaValores()">
Con ello, el navegador ya sabe los valores iniciales de HEIGHT y CLIP. He establecido la variable capa aparte porque si vamos a manejar en el futuro varias capas con texto que precisen ser recortadas, deberán ser inicializadas mediante iniciaValores(). Para ello bastaría darle a capa en valor del ID de la capa a recortar y llamar a la función.
El resultado lo tenéis en esta ventana. Cada vez que pulséis el enlace la capa se ampliará 5 pixels.
 |
 |