Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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>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/
Carregando comentários...