Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Aprende Web

Crea y diseña tus sitios en la Web.

Manual de MooTools (I Básico)

MooTools: la librería más completa para trabajar fácilmente con javascript.

Y ahora tambien aprende a programar en C++ con Aprende Web C++

Manuales para la creación y diseño de páginas web

RSS. Suscribir canal.

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.

Aprende Web por Anyelguti is licensed under a Creative Commons Reconocimiento-NoComercial-SinObraDerivada 3.0 Unported License.

MooTools (VI)

Obtener medidas

Introducción

Una de las tareas que se nos pueden plantear con javascript es obtener las medidas de algunos elementos de la página, o de la página en sí o del navegador. MooTools tiene varios métodos para hacer esta tarea.

Anchura y altura de un elemento:

Debemos distinguir en primer lugar entre el elemento en sí, y la ventana que ocupa en la página. Es decir, si el elemento tiene barras de desplazamiento, es porque el elemento en sí es más grande que el espacio que ocupa em la página. Al espacio que ocupa en la página le llamaremos "ventana", mientras que lo que ocupa realmente lo llamaremos "tamaño". Si no tiene barras de desplazamiento, y lo vemos completo, su tamaño coincide con su ventana. Esto suele ser lo habitual, sin embargo no siempre es así.

En mootools tenemos varios métodos que distinguen entre la ventana y el tamaño de los elementos:

Ventana : método getSize()

El método getSize() nos da las medidas de la ventana del elemento. En éste y los siguientes métodos que veamos pondremos como ejemplo la ventana que tenemos aquí a la derecha abajo, con un id="capa1", y de la cual extraeremos sus medidas. Por supuesto debemos escribir todo el código dentro de la estructura "domready":

ventana=$("capa1").getSize();

En la variable ventana hemos extraido un objeto que contiene las medidas, sin embargo éstas son propiedades del objeto: las propiedades x (anchura) e y (altura), por tanto haremos lo siguiente:

anchoVentana=ventana.x
altoVentana=ventana.y

En lugar de dar los dos pasos anteriores, podemos también ponerlo todo en un sólo paso escribiendo:

anchoVentana=$("capa1").getSize().x
altoVentana=$("capa1").getSize().y

Ahora creamos un elemento nuevo donde mostramos las medidas de la ventana y después lo sacamos en pantalla. Este es el código:

textoVentana="Ventana capa1: ancho = "+anchoVentana+", alto = "+altoVentana;
ventanaCapa1=new Element("p",{"html":textoVentana});
ventanaCapa1.inject($("ver1","bottom"));

El resultado lo hemos puesto dentro de un elemento con id=ver1, y quedará parecido a esto:

Las medidas obtenidas incluyen el margen interno (padding) y el borde (border), peron no incluyen el margen externo (margin).

Tamaño : método .getScrollSize()

Si en lugar de usar el método .getSize utilizamos el método .getScrollSize obtenemos el tamaño real del elemento, es decir no el que vemos en pantalla sino el que tiene realmente (en pantalla puede verse más pequeño si tiene barras de desplazamiento).

La utilización del método .getScrollSize() es igual que con el método .getSize(), es decir, no tiene argumentos, y para obtener las anchura y la altura utilizaremos también las propiedades x e y.

mediante el siguiente código obtenemos el tamaño real del elemento anterior:

anchoElemento=$("capa1").getScrollSize().x;
altoElemento=$("capa1").getScrollSize().y;
textoElemento="Elemento capa1: ancho = "+anchoElemento+", alto = "+altoElemento;
tamanoCapa1=new Element("p",{"html":textoElemento});
tamanoCapa1.inject($("ver2"),"top");

El resultado del código anterior lo recogemos un un elemento id="ver2" y será algo precido a esto:

Desplazamiento : método .getScroll()

El método .getScroll() mide el desplazamiento del elemento dentro de su ventana. El elemento debe tener barras de desplazamiento. Una vez movido de su posición inicial, mide la distancia entre el punto superior izquierdo del elemento, y el punto superior izquierdo de su parte visible en la ventana.

La utilización de este método es igual que en los dos anteriores, es decir, no tiene argumentos, pero debemos utilizar las propiedades x e y para extraer las coordenadas.

Si el elemento no tiene barras de desplazamiento, las coordenadas serán igual a 0, ya que los dos puntos coincidirán. Veamos el resultado para el ejemplo que hemos puesto. El código será el siguiente:

izquierdaDesp=$("capa1").getScroll().x;
arribaDesp=$("capa1").getScroll().y;
textoDesp="Desplazamiento capa1: izquierda = "+izquierdaDesp+", alto = "+arribaDesp;
despCapa1=new Element("p",{"html":textoDesp});
despCapa1.inject($("ver3"),"top");

El resultado lo hemos puesto dentro de un id="ver3", y quedará parecido a lo siguiente:

Posición del elemento: .getPosition()

Queremos calcular ahora qué posición ocupa un elemento en la página, es decir, la distancia entre la esquina superior izquierda del documento y la esquina superior izquierda de la ventana del elemento.

Utilizaremos para ello el método .getPosition(). Este método, al igual que los anteriores, no tiene argumentos, pero debemos utilizar las propiedades x e y para obtener las distancias horizontal y vertical respectivamente del elemento.

distanciaH=$("capa1").getPosition().x;
distanciaV=$("capa1").getPosition().y;

Siguiendo con este ejemplo, ponemos después las siguientes líneas de código para sacar el resultado en pantalla en un id="ver4":

textoPosicion="Posición: horizontal = "+distanciaH+", vertical ="+distanciaV;
posicionCapa1=new Element("p",{"html":textoPosicion});
posicionCapa1.inject($("ver4"),"top");

El resultado nos dará algo parecido a lo siguiente:

datos de coordenadas: .getCoordinates()

Podemos obtener también los datos sobre las dimensiones y posición de un elemento mediante el método .getCoordinates(). Este método tiene a su vez varias propiedades que son las que nos darán los datos:

$("capa2").getCoordinates().width;

El método .width da como resultado la anchura de la ventana del elemento.

$("capa2").getCoordinates().height;

El método .height da como resultado la altura de la ventana del elemento.

$("capa2").getCoordinates().left;

El método .left da como resultado la distancia desde el borde izquierdo de la página (documento) al borde izquierdo de la ventana del elemento.

$("capa2").getCoordinates().top;

El método .top da como resultado la distancia desde el borde superior de la página (documento) al borde superior de la ventana del elemento.

$("capa2").getCoordinates().right;

El método .right da como resultado la distancia desde el borde derecho de la página (documento) al borde derecho de la ventana del elemento.

$("capa2").getCoordinates().bottom;

El método .bottom da como resultado la distancia desde el borde inferior de la página (documento) al borde inferior de la ventana del elemento.

Medidas de la página

Distinguimos entre las medidas del documento o página en sí, las medidas de la ventana del navegador, y las medidas de la pantalla.

Para obtener medidas sobre la ventana del navegador y el documento aplicaremos los métodos anteriores al objeto document.

Las medidas de la ventana del navegador las obtenemos mediante .getSize():

anchoVentana=document.getSize().x;
altoVentana=document.getSize().y;

Las medidas del documento las obtenemos mediante .getScrollSize() :

anchoDoc=document.getScrollSize().x;
altoDoc=document.getScrollSize().y;

Podemos obtener también el desplazamiento del documento en la ventana, o la cantidad de píxeles que se ha movido mediante las barras de desplazamiento, con el método .getScroll():

DesplazamientoHorizontal=document.getScroll().x;
DesplazamientoVertical=document.getScroll().y;

Para las medidas de la pantalla, no necesitamos utilizar mootools, ya que javascript posee el objeto screen :

anchoPantalla=screen.width; altoPantalla=screen.height;

Hemos aplicado los métodos anteriores sobre esta misma página, para ello hemos aplicado el siguiente código:

anchoVentana=document.getSize().x;
altoVentana=document.getSize().y;
anchoDoc=document.getScrollSize().x;
altoDoc=document.getScrollSize().y;
despHor=document.getScroll().x;
despVer=document.getScroll().y;
anchoPantalla=screen.width;
altoPantalla=screen.height;

textoVentana="Ventana: ancho = "+anchoVentana+", alto = "+altoVentana;
ventana=new Element("p",{"html":textoVentana});
ventana.inject($("ver5"),"bottom");

textoDoc="Página: ancho = "+anchoDoc+", alto = "+altoDoc;
pagina=new Element("p",{"html":textoDoc});
pagina.inject($("ver5"),"bottom");

textoDesp="Desplazamiento: ancho = "+despHor+", alto = "+despVer;
desp=new Element("p",{"html":textoDesp});
desp.inject($("ver5"),"bottom");

textoPantalla="Pantalla: ancho = "+anchoPantalla+", alto = "+altoPantalla;
pantalla=new Element("p",{"html":textoPantalla});
pantalla.inject($("ver5"),"bottom");

El método .scrollTo

Este método permite desplazar un elemento que tenga barras de desplazamiento hasta el lugar indicado.

Le pasamos como argumento dos números, el primero indicará el desplazamiento horizontal, y el segundo el desplazamiento vertical:

$("capa2").scrollTo(0,100)

Este código desplaza el elemento en vertical 100 px.

En el elemento de la derecha le hemos colocado dos botones para poder desplazarlo hacia abajo o hacia arriba. Estos son los botones:

ABAJO ..//.. ARRIBA

Y este es el código que hemos utilizado en estos botones:

<p style="font-weight: bold; color: blue;">
<span onclick="$('capa2').scrollTo(0,100)">ABAJO</span>
..//.. <span onclick="$('capa2').scrollTo(0,0)">ARRIBA</span></p>

En la siguiente página seguiremos viendo más métodos de tipo general que podemos aplicar sobre los elementos de la página.

Más métodos

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com