Dimensões da tela com JQuery e JS

Write less, do more.

Se você precisa de alguma forma armazenar as dimensões que a sua tela tem, não entre em desespero, pois em JQuery e usando algumas propriedades do DOM é perfeitamente possível capturar os valores dessas dimensões.

Vejam os exemplos no código abaixo, fazendo isso você terá as dimensões disponíveis em um objeto que poderá ser utilizado durante a execução do seu código.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
/*Observação importante: Se eu quero pegar todo o tamanho ocupado ocupado pelo documento, eu devo pegar as propriedades 
 *depois que o documento estiver totalmente carregado $(document).ready()*/
 
 /*Este bloco $(document).ready() será executado primeiro que outro bloco idêntico, por eu estar
  *carregando ele apartir de um arquivo js externo quando carrega a página, ele trabalha da mesma forma
  *espera o documento ser carregado totalmente, após isso será executado o que está dentro do bloco*/
$(document).ready(function(){		
	inicializar();		
}); 
 
var stLocal = {};
function inicializar(){
	/*Tamanho do espaço visivel do document (não inclui o que está fora da tela visível)
	 *Apenas o epaco visivel da tela
	 *Largura total SEM espaco usado pela barra de rolagem,	 
	 *Altura do documento visivel
	 *OK - FF,Chrome,IE ----------------------------------*/
	stLocal.width  = document.documentElement.clientWidth;
	stLocal.height = document.documentElement.clientHeight;
 
	/*Tamanho do espaço do scroll que foi rolado (se o conteúdo do documento for maior 
	 *que o espaco da tela é ativada barra de rolagem(scroll))
	 *OK - FF ----------------------------------------
	 */
	stLocal.xOffSet = window.pageXOffset;//Quantidade de pixels rolados na horizontal
	stLocal.yOffSet = window.pageYOffset;//Quantidade de pixels rolados na vertical	
 
	/*Largura total ignorando espaco usado pela barra de rolagem, 
	 *Altura do documento sem incluir o espaco não visivel
	 */
	stLocal.innerWidth = window.innerWidth;
	stLocal.innerHeight = window.innerHeight;
 
	/*Tamanho total do document, incluidno o que está offSet(que fica visível usando o scroll(barra de rolagem))
	 *Tela visivel + offSet
 	 *Largura total COM espaco usado pela barra de rolagem(IE),
	 *Largura total SEM espaco usado pela barra de rolagem(FF e Chrome), 
	 *Altura do documento incluindo o espaco não visivel(IE,FF e Chrome)
	 *OK - FF,Chrome E IE com as ressalvas nas linhas acima.
	*/
	stLocal.widthOffSet = $(document).width();
	stLocal.heightOffSet = $(document).height();
 
	/*
	Testando os valores armazenados em var stLocal
	alert(stLocal.width+' '+stLocal.height);
	alert(stLocal.widthOffSet+' '+stLocal.heightOffSet);
	alert(stLocal.innerWidth+' '+stLocal.innerHeight);
	alert(stLocal.xOffSet+' '+stLocal.yOffSet);
	*/
}

E um artifício legal e útil é utilizar o evento de janela do JQuery “$(window).resize()” para atualizar os os valores destas dimensões.

Deixe uma resposta

%d blogueiros gostam disto: