Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Jhon Paulo

[Resolvido] Alinhar elemento no centro da página

Por , em Javascript

Recommended Posts

Jhon Paulo    7

Jhon Paulo
Postado

Olá galera, esse é meu primeiro script intereçante então resolvi postar. Espero que gostem!

O que ele faz? R: Alinha uma div(ou um elemento qualquer) no centro da página

 

Explicação técnica: Ele calcula a altura da págima, largura da página, posição vertical que está exibindo a página e posição horizontal que está exibindo a página.

Depois pega a altura e largura do elemento que você quer exibir, faz uma continha simples e alinha o elemento no centro da página.

 

tudo está comentado para facil entendimento

 

primeiro o css do elemento que voce quer exibir:

<style>
#elemento {
 width: 300px; // largura do elemento
 width: 150px; // altura do elemento
 position: absolute; //importante! Para que o elemento seja posicionado em qualquer parte da página
 z-index: 999; //para que o elemento apareça na frente dos outros elementos
 background: red; // só coloquei isso pra você ver que vai ficar no centro certinho..
}
</style>

 

o script:

<script>
// largura da janela
function pageWidth() {
	return window.innerWidth != null ? window.innerWidth : document.documentElement && document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body != null ? document.body.clientWidth : null;
}

// altura da janela
function pageHeight() {
	return window.innerHeight != null? window.innerHeight : document.documentElement && document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body != null? document.body.clientHeight : null;
}

// posição vertical da página
function topPosition() {
	return typeof window.pageYOffset != 'undefined' ? window.pageYOffset : document.documentElement && document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ? document.body.scrollTop : 0;
}

// posição horizontal da página
function leftPosition() {
	return typeof window.pageXOffset != 'undefined' ? window.pageXOffset : document.documentElement && document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ? document.body.scrollLeft : 0;
}
   function exibe_elemento() {
   elemento = document.getElementById('elemento'); //seleciona o elemento pelo id
   elemento.style.display = 'block'; //exibe o elemento
   pg_altura = pageHeight(); //altura da página no browser
   pg_largura = pageWidth(); //largura da página no browser
   pg_top = topPosition(); // posição vertical da página
   pg_left = leftPosition(); //posição horizontal da página
   elemento_altura=elemento.offsetHeight; //altura do elemento
   elemento_largura=elemento.offsetWidth; //largura do elemento
   y = pg_top+(pg_altura/2)-(elemento_altura/2); //calcula a posição horizontal que o elemento vai ficar
   x = pg_left+(pg_largura/2)-(elemento_largura/2); //calcula a posição vertical que o elemento vai ficar
   elemento.style.top = y+'px'; //alinha o elemento no centro vertical
   elemento.style.left = x+'px'; //alinha elemento no centro horizontal
   }
</script>

 

a página completa funcinando:

<html>
<head>
<style>
#elemento {
width: 300px; 
width: 150px;
position: absolute;
z-index: 999; 
background: red; 
}
</style>
<script>
// largura da janela
function pageWidth() {
	return window.innerWidth != null ? window.innerWidth : document.documentElement && document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body != null ? document.body.clientWidth : null;
}

// altura da janela
function pageHeight() {
	return window.innerHeight != null? window.innerHeight : document.documentElement && document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body != null? document.body.clientHeight : null;
}

// posição vertical da página
function topPosition() {
	return typeof window.pageYOffset != 'undefined' ? window.pageYOffset : document.documentElement && document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ? document.body.scrollTop : 0;
}

// posição horizontal da página
function leftPosition() {
	return typeof window.pageXOffset != 'undefined' ? window.pageXOffset : document.documentElement && document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ? document.body.scrollLeft : 0;
}
function exibe_elemento() {
   elemento = document.getElementById('elemento'); //seleciona o elemento pelo id
   elemento.style.display = 'block'; //exibe o elemento
   pg_altura = pageHeight(); //altura da página no browser
   pg_largura = pageWidth(); //largura da página no browser
   pg_top = topPosition(); // posição vertical da página
   pg_left = leftPosition(); //posição horizontal da página
   elemento_altura=elemento.offsetHeight; //altura do elemento
   elemento_largura=elemento.offsetWidth; //largura do elemento
   y = pg_top+(pg_altura/2)-(elemento_altura/2); //calcula a posição horizontal que o elemento vai ficar
   x = pg_left+(pg_largura/2)-(elemento_largura/2); //calcula a posição vertical que o elemento vai ficar
   elemento.style.top = y+'px'; //alinha o elemento no centro vertical
   elemento.style.left = x+'px'; //alinha elemento no centro horizontal
}
</script>
</head>
<body>
	<div id='elemento'>to no centro</div>
	<a href='#' onclick='exibe_elemento(); return false'>clica aki pra exibir</a><br><br><br><br><br><br><br><br>
	<a href='#' onclick='exibe_elemento(); return false'>clica aki pra exibir</a><br><br><br><br><br><br><br><br>
	<a href='#' onclick='exibe_elemento(); return false'>clica aki pra exibir</a><br><br><br><br><br><br><br><br>
	<a href='#' onclick='exibe_elemento(); return false'>clica aki pra exibir</a><br><br><br><br><br><br><br><br>
	<a href='#' onclick='exibe_elemento(); return false'>clica aki pra exibir</a><br><br><br><br><br><br><br><br>
	<a href='#' onclick='exibe_elemento(); return false'>clica aki pra exibir</a><br><br><br><br><br><br><br><br>
	<a href='#' onclick='exibe_elemento(); return false'>clica aki pra exibir</a><br><br><br><br><br><br><br><br>
	<a href='#' onclick='exibe_elemento(); return false'>clica aki pra exibir</a><br><br><br><br><br><br><br><br>
	<a href='#' onclick='exibe_elemento(); return false'>clica aki pra exibir</a><br><br><br><br><br><br><br><br>
	<a href='#' onclick='exibe_elemento(); return false'>clica aki pra exibir</a><br><br><br><br><br><br><br><br>
	<a href='#' onclick='exibe_elemento(); return false'>clica aki pra exibir</a><br><br><br><br><br><br><br><br>
</body>
</html>

 

QUER ALGO MAIS SOFISTICADO? Olhe no site que foi a base para o meu artigo http://www.nickstakenburg.com/projects/prototip/

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito