window.getSize em Mootools

O método window.getSize de Mootools, para obter tamanhos de área do navegador e scroll de página. Dependendo da declaração Doctype funcionará bem ou não em Internet Explorer.

Por Miguel Angel Alvarez - Tradução de Celeste Veiga


Publicado em: 09/8/12
Valorize este artigo:
Fazemos um pequeno aparte no manual de Mootools para explicar um detalhe que é importante para tratar com a função window.getSize(), que serve para que o navegador nos retorne vários valores, como as dimensões de área disponíveis onde se mostram as páginas web ou os diferentes scrolls ou rolagens realizados ou possíveis na página completa.

Conhecer a área de trabalho disponível do navegador nos pode servir para estruturar os espaços disponíveis para a maquetação ou para mostrar elementos em posições específicas ou com tamanhos definidos, que variariam segundo a medida da janela do navegador e a configuração de elementos da interface que o usuário tenha.

Atenção: quando falamos da área do espaço útil do navegador NÃO nos referimos à área da tela, porque esta costuma ocupar um espaço maior (por ex. a definição de tela 800x600, que depende da configuração do usuário), mas sim à parte onde são exibidas as páginas, dentro da janela do navegador, depois de retirar toda a interface de menus e botões do browser.

Obter as dimensões de Window em Mootools 1.1

ATUALIZADO: Estas explicações que vêm a seguir são para Mootools versão 1.1. Acontece que na versão 1.2 do framework mudou um pouco a função getSize(), cremos que para melhor. Explicarei ao final do artigo como fazer a mesma coisa para Mootools 1.2.

Para obter os dados das dimensões da janela do navegador em Mootools, há uma função, como dissemos, chamada getSize(). Este método depende do objeto window, que está estendido pelo framework Mootools no arquivo Window.Size.js. (olhem a documentação de Mootools) para saber sobre Window.Size.js, embora vamos explicar algumas coisas dele neste artigo.

Window.Size.js incorpora vários métodos ao objeto window do navegador. O que nos interessa é window.getSize(), que retorna o mesmo que o método Element.getSize(). Isto é, um objeto com uma serie de propriedades a cerca das dimensões do elemento. No caso do objeto window se refere à janela, ou melhor dito, ao espaço útil do navegador, onde serão mostradas as páginas. Em específico, o objeto devolvido tem estas propriedades:

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


Por explicá-lo com palavras, retorna um objeto que tem três propriedades: scroll, size e scrollSize, que por sua vez têm duas propriedades, x e y, que são valores de tamanhos na horizontal e vertical. Cada um desses tamanhos significa:

  • Scroll: O deslocamento que foi feito na página, com as barras de rolagem horizontais e verticais respectivamente.
  • Size: O tamanho da área útil da janela do navegador, destinado a mostrar a página web.
  • scrollSize: O tamanho da página completa, que pode ser ou não maior que a área disponível para mostrá-la. Se é maior significa que para mostrar toda a página se terão que mover as barras de rolagem horizontais ou verticais.
Para que fique claro, coloco uma imagem esquemática sobre os valores de getSize().


Deixo aqui um exemplo de uso de window.size() em 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>Exemplo Size</title>
   <script src="mootools-release-1.11.js" type="text/javascript"></script>
<script>
function dameTamanhos(){
   tamanhos = window.getSize();
   alert ("Tamanho da área disponivel: " + tamanhos.size.x + " x " + tamanhos.size.y);
   alert ("Scroll: " + tamanhos.scroll.x + " x " + tamanhos.scroll.y);
   alert ("scrollSize: " + tamanhos.scrollSize.x + " x " + tamanhos.scrollSize.y);
}
window.addEvent('domready', demeTamanhos);
window.addEvent('resize', demeTamanhos);
</script>   
</head>

<body>
<h1>Exemplo de teste de size em Mootools</h1>
?

</body>
</html>


Podemos ver o exemplo em funcionamento em uma página à parte.

Window.getSize() para mootools 1.2

Atualizado (19/08/2008): Tal exolicamos nas linhas anteriores, com Mootools foi implementado um método em window chamado getSize(). Isto não mudou. Mas o que sim muda em Mootools 1.2 é que agora todas as propriedades de dimensões de window não dependem de um único método getSize().

Mootools tem uma serie de métodos, implementados em window e na classe Element, que servem para obter dimensões de elementos da página ou da própria janela do navegador.

Agora, para obter a área disponível de espaço para a página, utilizamos window.getSize(). Para obter o scroll realizado sobre a página temos o método window.getScroll() e para saber quão grande é a área da página (o que se vê mais a parte que fica fora, mas que podemos ver fazendo scroll -deslocando com as barras de rolagem-), utilizamos window.getScrollSize().

Estes três métodos têm como resposta um objeto que contém duas propriedades x e y, com as coordenadas ou tamanhos que correspondam.

Portanto, agora em Mootools 1.2, para obter as dimensões da área disponível do navegador fazemos:

dimensao = window.getSize();
//em dimensão.x está o tamanho em pixels horizontal da área onde se mostra a página.
//em dimensão.y temos o tamanho em pixels da área na vertical.

Doctype adequado para getSize() em Mootools

Atenção com este pequeno grande detalhe: dependendo da declaração Doctype que tenhamos posto na página, a função getSize() de Mootools funcionará bem ou não em Internet Explorer.

Em Firefox não existe este problema, mas em Internet Explorer, se não utilizarmos um Doctype adequado, os valores de size vão dar zero.

Com este Doctype não vamos ter nenhum problema, embora seguramente funcione também com outros doctype:

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

Ou então este outro:

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

Este é um detalhe que, se você não conhece, pode fazer você perder bastante tempo, embora esteja comentado em foros e tenha sido fácil encontrar a solução.






Usuários :    login / registro

Manuais relacionados
Categorias relacionadas
O autor

Home | Sobre nós | Copyright | Anuncie | Entrar em contato