|
||||
|
|
|
|
|
|
|
|||
|
|
|||
|
||||
Home - HTMLWebScript - Ventanas
Ventana auto-dimensionable I
por Luciano Moreno, del departamento de diseño web de BJS Software.
A veces buscamos ese efecto que pueda dar a nuestras páginas un aspecto dinámico, innovador, pretendiendo ofrecer al usuario algo que normalmente no ve en otros sitios web.
El siguiente script crea una ventana a pantalla completa en la que, al pulsar un enlace, la propia ventana se recoge sobre sí misma, carga una nueva página en su interior y luego se vuelve a abrir de nuevo a pantalla completa, creando un efecto fresco y atractivo.
El código necesario para la primera página, la del enlace, es el siguiente:
<html>
<head>
<title>Script de resiceo dinamico - Primera Ventana - se abre con lanzador.html</title>
<script language="JavaScript" type="text/javascript">
window.resizeTo(800,
600);
var
x=50;
var
tiempo,tiempo2;
function
recoge()
{
if(x>=0)
{
x-=1;
window.resizeTo(screen.availWidth, screen.availHeight *( x /
50));
window.moveTo(0,0);
tiempo2=setTimeout("recoge()",50);
}
else
window.location.href="siguiente.html";
}
</script>
</head>
<body bgcolor="#ffffcc">
<br><br><br><br><br>
<a
href="#" onClick="recoge()">página siguiente</a>
</body>
</html>
Y el código para la segunda página, la que se abre, es el que sigue:
<html>
<head>
<title>Segunda ventana - abierta por expand_4.htm</title>
<script language="JavaScript">
var x=0;
var tiempo;
function abre()
{
if(x<50)
{
x+=1;
window.resizeTo(screen.availWidth, screen.availHeight *( x
/50));
window.moveTo(0,0);
tiempo=setTimeout("abre()",50);
}
}
</script>
</head>
<body bgcolor="#ffffcc" onLoad="abre();">
<br><br><br><br><br><br>
Esta
es la página siguiente
</body>
</html>
Como véis estamos usando el objeto window de JavaScript, dos de cuyos métodos más importantes son resizeTo(x,y) y moveTo(x,y), cuyo efecto es ajustar el tamaño de la ventana a uno dado y mover la esquina superior izquierda de la misma a unas coordenadas dadas, respectivamente. Son métodos estándar de JavaScript, por lo que son válidos para todos los navegadores.
El resultado podéis verlo pinchando aquí.
Si tenéis alguna duda, escribidnos.
Home - HTMLWebScript - Ventanas