window.getSize en Mootools

  • Por
El método window.getSize de Mootools, para obtener tamaños de área del navegador y scroll de página. Dependiendo de la declaración Doctype funcionará bien o no en Internet Explorer.
Hacemos un pequeño inciso en el manual de Mootools para explicar un detalle que es importante para tratar con la función window.getSize(), que sirve para que el navegador nos devuelva varios valores, como las dimensiones de área disponible donde se muestran las páginas web o los distintos scrolls o desplazamientos realizados o posibles en la página completa.

Conocer el área de trabajo disponible del navegador nos puede servir para estructurar los espacios disponibles para la maquetación o para mostrar elementos en posiciones específicas o con tamaños definidos, que variarían según la medida de la ventana del navegador y la configuración de elementos de la interfaz que tenga el usuario.

Atención: cuando hablamos del área del espacio útil del navegador NO nos referimos al área de la pantalla, porque ésta suele ocupar un espacio mayor (por ej la definición de pantalla 800x600, que depende de la configuración del usuario), sino la parte donde se muestran las páginas, dentro de la ventana del navegador, después de quitar toda la interfaz de menús y botones del browser.

Obtener las dimensiones de Window en Mootools 1.1

ACTUALIZADO: Estas explicaciones que vienen a continuación son para Mootools versión 1.1. Resulta que en la versión 1.2 del framework ha cambiado un poco la función getSize(), creemos que a mejor. Explicaré al final del artículo cómo hacer esto mismo para Mootools 1.2.

Para obtener los datos en Mootools de las dimensiones de la ventana del navegador hay una función, como decimos, llamada getSize(). Dicho método depende del objeto window, que está extendido por el framework Mootools en el archivo Window.Size.js. (mirar la documentación de Mootools) para saber acerca de Window.Size.js, aunque lo vamos a explicar algunas cosas en este artículo.

Window.Size.js incorpora varios métodos al objeto window del navegador. El que nos interesa es window.getSize(), que devuelve lo mismo que el método Element.getSize(). Esto es, un objeto con una serie de propiedades acerca de las dimensiones del elemento. En el caso del objeto window se refiere a la ventana, o mejor dicho, al espacio útil del navegador, donde se mostrarán las páginas. En concreto, el objeto devuelto tiene estas propiedades:

{
'scroll': {'x': 10, 'y': 10},
'size': {'x': 400, 'y': 600},
'scrollSize': {'x': 600, 'y': 1000}
}


Por explicarlo con palabras, devuelve un objeto que tiene tres propiedades: scroll, size y scrollSize, que a su vez tienen dos propiedades, x e y, que son valores de tamaños en horizontal y vertical. Cada uno de esos tamaños significa:

  • Scroll: El desplazamiento que se ha hecho en la página, con las barras de desplazamiento horizontales y verticales respectivamente.
  • Size: El tamaño del área útil de la ventana del navegador, destinado a mostrar la página web.
  • scrollSize: El tamaño de la página completa, que puede ser o no mayor que el área disponible para mostrarla. Si es mayor quiere decir que para mostrar toda la página se tendrán que mover las barras de desplazamiento horizontales o verticales.
Para que quede claro, pongo una imagen esquemática sobre los valores de getSize().


Dejo aquí un ejemplo de uso de window.size() en Mootools:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
   <META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=ISO-8859-1">
   <title>Ejemplo Size</title>
   <script src="mootools-release-1.11.js" type="text/javascript"></script>
<script>
function dameTamanos(){
   tamanos = window.getSize();
   alert ("Tamaño del área disponible: " + tamanos.size.x + " x " + tamanos.size.y);
   alert ("Scroll: " + tamanos.scroll.x + " x " + tamanos.scroll.y);
   alert ("scrollSize: " + tamanos.scrollSize.x + " x " + tamanos.scrollSize.y);
}
window.addEvent('domready', dameTamanos);
window.addEvent('resize', dameTamanos);
</script>   
</head>

<body>
<h1>Ejemplo de prueba de size en Mootools</h1>
?

</body>
</html>


Podemos ver el ejemplo en marcha en una página aparte.

Window.getSize() para mootools 1.2

Actualizado (19/08/2008): Tal como hemos explicado en las anteriores líneas, con Mootools se ha implementado un método en window llamado getSize(). Esto no ha cambiado. Pero lo que sí que cambia en Mootools 1.2 es que ahora todas las propiedades de dimensiones de window no dependen de un único método getSize().

Mootools tiene una serie de métodos, implementados en window y en la clase Element, que sirven para obtener dimensiones de elementos de la página o de la propia ventana del navegador.

Ahora, para obtener el área disponible de espacio para la página, utilizamos window.getSize(). Para obtener el scroll realizado sobre la página tenemos el método window.getScroll() y para saber cuan grande es el área de la página (lo que se ve más la parte que queda fuera, pero que podemos ver haciendo scroll -desplazando con las barras de desplazamiento-), utilizamos window.getScrollSize().

Estos tres métodos tienen como respuesta un objeto que contiene dos propiedades x e y, con las coordenadas o tamaños que correspondan.

Por lo tanto, ahora en Mootools 1.2, para obtener las dimensiones del área disponible del navegador hacemos:

dimension = window.getSize();
//en dimension.x está el tamaño en pixels horizontal del área donde se muestra la página.
//en dimension.y tenemos el tamaño en pixels del área en vertical.

Doctype adecuado para getSize() en Mootools

Atención a este pequeño gran detalle: dependiendo de la declaración Doctype que hayamos puesto en la página la función getSize() de Mootools funcionará bien o no en Internet Explorer.

En Firefox no existe este problema, pero en Internet Explorer, si no utilizamos un Doctype adecuado, los valores de size nos van a dar cero.

Con este Doctype no vamos a tener ningún problema, aunque seguramente funcione también con otros doctype:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

O bien este otro:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Este es un detalle que, si no lo conoces, te puede hacer perder bastante tiempo. Aunque en foros está comentado y ha sido fácil encontrar la solución.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

dario

22/8/2009
muchas gracias!!!!!
debo admitir que nunca dejo comentarios...

pero me parece muy extraño que un articulo tan bueno no tenga ninguno (o no vi donde estaban), esta pagina me ha ayudado en muchas ocaciones y este articulo mucho en este momento, muy explicativo y la foto lo hace muy didactico.

otra cosa..., es como comun encontrar una actualizacion a un articulo, me sirvio a montones para la version que estoy utilizando. se nota que hay gente comprometida.

nada mas que decir que mis agradecimientos y felicitaciones para ustedes muchachos.

suertes

Ruben

24/9/2009
Internet Explorer
No logro que me funcione en Internet Explorer, quizás sea la versión del navegador 6.0 ?

Nahuel

07/6/2012
Me gusto el tuto
Muy buen tutorial, gracias a esta web estoy aprendiendo muchisimo, es un hobby esto para mi, me encanta. Digo hobby porque en realidad soy estudiante de abogacia x).
Una vez más gracias.