JOURMOLY

Lo que sigue es una breve explicación sobre la ayuda que nos brindan los métodos que trae Window de Mootools. Si te llevas mejor con los ejemplos, podes ir directamente a ellos desde aquí: Ejemplos Window.js de Mootools

Window.DomReady

DomReady es un evento que prácticamente puede reemplazar a window.load. La ventaja que tiene es que llama a su función asociada ni bien se termina de cargar el Dom de nuestra página, no espera por las imágenes como hace Window.load. Si nuestro sitio tiene muchas imágenes o pocas y pesadas, la diferencia de tiempo entre load y domready es enorme. Esto se puede apreciar en el siguiente ejemplo de la página de Mootools: DomReady VS Load

Se utiliza de la misma manera que cualquier otro evento:

1
2
3
4

window.addEvent('domready', function()
{
         alert('Dom Ready');
});

Window.Size

window.getWidth()
Retorna un entero indicando la anchura de la ventana del navegador, sin la barra de scroll.

1

var anchura = window.getWidth();

window.getHeight()
Retorna un entero indicando la altura de la ventana del navegador, sin la barra de scroll.

1

var altura = window.getHeight();

window.getScrollWidth()
Retorna un entero indicando la anchura completa de nuestra página, incluyendo lo que no se ve hasta que deslizamos la barra del scroll.

1

var anchuraTotal = window.getScrollWidth();

window.getScrollHeight()
Retorna un entero indicando la altura completa de nuestra página, incluyendo lo que no se ve hasta que deslizamos la barra del scroll.

1

var alturaTotal = window.getScrollHeight();

window.getScrollLeft()
Retorna un entero indicando la cantidad de pixels que hemos “screoleado” la ventana desde la izquierda.

1

var izquierda = window.getScrollLeft();

window.getScrollTop()
Retorna un entero indicando la cantidad de pixels que hemos “scroleado” la ventana desde arriba.

1

var arriba = window.getScrollTop();

window.getSize()
Igual a Element.getSize(), retorna algo como lo siguiente:

1
2
3
4
5

    {
        'scroll': {'x': 200, 'y': 300},
        'size': {'x': 1024, 'y': 768},
        'scrollSize': {'x': 300, 'y': 500}
    }

Donde:

scroll.x Es equivalente a window.getScrollLeft()
scroll.y Es equivalente a window.getScrollTop()

size.x Es equivalente a window.getWidth()
size.y Es equivalente a window.getHeight()

scrollSize.x Es equivalente a window.getScrollWidth()
scrollSize.y Es equivalente a window.getScrollHeight()

Y lo podemos usar, asi:

1
2
3
4
5
6
7
8
9
10

var valores = window.getSize();
 
alert(valores.scroll.x); //200
alert(valores.scroll.y); //300
 
alert(valores.size.x); //1024
alert(valores.size.y); //768
 
alert(valores.scrollSize.x); //300
alert(valores.scrollSize.y); //500

Mira los ejemplos para quitarte las dudas.

Otros artículos

• Zend Server: Instalar Apache, PHP y MySQL
• Pronto volvere a publicar nuevos artículos
• Efectos con Mootools: Fx.Slide
• Un año de Jourmoly
• Fx.Slide, un ejemplo más