Incluso con el nacimiento del objeto screen, esto no puede ser utilizado fiablemente para determinar el tamaño actual de la ventana del Browser. Es importante de conocer el ancho exacto y altura (y lo pixeles) del browser para que nos dé la habilidad de generar capas basadas en estos valores. Podemos utilizar estos valores para generar Capas que se estiran al ancho del browser, capas centrales, o alinearlas a la derecha etc. De esta forma dándole a las capas una flexibilidad extra ya sea que estas estén posicionadas absolutamente
La mejor forma que yo se para encontrar el ancho/altura del browser es chequeando las siguientes propiedades despues del tag BODY . Debes de pones cualquier código que esta dependiendo en el ancho/altura en el SCRIPT localizado después del Tag BODY porque en IE los elementos del body son utilizados:
En Netscape:
window.innerWidth window.innerHeight
En IE:
document.body.scrollWidth document.body.scrollHeight
Estos valores no toman dentro de consideración la barra de scroll. Usualmente solamente debes de estar preocupado sobre la barra de scroll vertical, así de esta forma podrás manualmente contar por esto con solo sustrayendo 20 del ancho en IE, y 16 en Netscape (Netscape excluye el borde de la ventana crome). Lo siguiente es él machote que he utilizado:
<BODY>
<SCRIPT LANGUAGE="JavaScript">
ns4 = (document.layers)? true:false
ie4 = (document.all)? true:false
winW = (ns4)? window.innerWidth-16 : document.body.offsetWidth-20
winH = (ns4)? window.innerHeight : document.body.offsetHeight
// escribe las capas de acuerdo utilizando la función CSS....
writeCSS(
css('mylayer',0,0,winW,winH,'black') // one big black square
)
</SCRIPT>
<!-- other HTML elements go here -->
<div id="mylayer"></div>
</BODY>
Nota: esta es la única situación aquí en donde solamente tendrás que utilizar las CSS adentro del cuerpo
En cualquier momento después de los variables winW y winH han sido definidos pueden ser utilizados (ej. init() función puede utilizar estos).
Para utilizar estos valores para centrar una capa puedes usar un poco de matemáticas para encontrar en donde los coordinadores de izquierda/arriba están. Por ejemplo si tus capas es 100px de ancho y 50px de alto, debes de utilizar (winW-100)/2 para el coordinador de la izquierda, y (winH-50)/2 para el coordinador de arriba.
Y eso traducido dentro de código es:
writeCSS (
css('centerDiv',(winW-100)/2,(winH-50)/2,100,50,'blue')
)
Puedes hacer informes diferentes para alinear una capa a la derecha o abajo de la pantalla. El ejemplo siguiente pone las capas en todas las cuatro esquinas y el centro de la pantalla.
// Netscape Resize Fix
if (document.layers) {
widthCheck = window.innerWidth
heightCheck = window.innerHeight
window.onResize = resizeFix
}
function resizeFix() {
if (widthCheck != window.innerWidth || heightCheck != window.innerHeight)
document.location.href = document.location.href
}
Esta pieza de código puede ser insertada adentro de páginas las cuales sufren en problema común cuando haces un cambio de tamaño del browser Netscape, todas tus capas pierden su posición. Ese código recargará la página, otra vez utilizando el ancho y la altura del browser para chequear si el tamaño ha cambiado.
Una practica común entre los amadores de Tablas "Tables" es de utilizar en todos los lados anchuras de 100% para hacer que la página se extenda para llenar el ancho con el browser. Entonces, nosotros los amadores de DHTML podemos hacer también eso. Solamente utilizando los variables winW y el winH como he descrito arriba, y agregando el Fichero Java Script Efecto Liquido en tu página (a lo largo con la función CSS):
<script language="JavaScript" src="../dynapi/css.js"></script> <script language="JavaScript" src="../dynapi/liquid.js"></script>
Ese fichero contiene la función encontrarWH() "findWH()" la cual puede ser utilizada para encontrar las propiedades winW y winH. Sin embargo, esas propiedades han sido establecidas así que cuando dibujes las capas estas se colocan *exactamente* en el ancho y la altura de la ventana - no incluyendo las barras de scroll o cualquiera otras cosas.
El verdadero truco al hacer la página liquida es que la página deberá de recargar en orden de que todas las capas puedan ser dibujadas de nuevo (para mantener las capas extendidas). Lo que tienes que hacer es de agregar un evento onResize en el tag del cuerpo:
<body bgcolor="#FFFFFF" onResize="makeLiquid()">
Y ahí esta, tu página recargara cuando esta cambia de tamaño, y así dibujará de nuevo todas las capas a las posiciones y dimensiones deseadas.
Demostraciones Liquidas "Liquid":
Ejemplo: liquid1.html fuente para un ejemplo simple de un efecto liquido.
Ejemplo: liquid2.html fuente para una colocación liquida de una tabla de ajedrez.
| Casa | Próxima Lección : Cookie Functions |