El Bugz

Eu já tinha parado essa coisa de colocar códigos aqui no blog…
Mas essa pediu. Uma vez a cada milênio, preciso fazer um JS que centraliza um DIV em uma página. Eu lembro sempre +- como que faz isso… sei-lá, deve ser um bloqueio, mas sempre acabo passando horas procurando uma referência que funciona tanto no IE como no FF (ou Mozilão Amigo).
Decidi, mais por razões egoístas colocar o código maldito aqui na página.
Não é um tutorial. Comentei um pouco o código caso algum de vocês queira tentar entender… mas não venham me perguntar coisas sobre ele. Ele funciona e leva em conta a barra de rolagem tbm, mas não tem as frescuras de ficar monitorando se a barra foi rolada ou nada assim… isso deixo a cargo de vcs.

Aí vai:

<script>
// handy function - if you´re using something like moo ou YUI
// use $() and don´t include this function
function g(obj){
	return document.getElementById(obj);
}
//center object based on his ID, width and height.
function centerAlert(object,objWidth,objHeight){
	var a = g(object);

	var width = (document.documentElement.clientWidth);
  	var hscroll = document.documentElement.scrollLeft;

  	var height = (document.documentElement.clientHeight);
  	var vscroll = document.documentElement.scrollTop;

  	var centerX = Math.round(hscroll+((width/2)-(objWidth/2)));
  	var centerY = Math.round(vscroll+((height/2)-(objHeight/2)));
  	a.style.left=centerX.toString() + "px";
  	a.style.top=centerY.toString() + "px";
}
</script>

<div id="classify"
    style="position:absolute;top:0px;width:0px;width:400;height:200px">
BLA BLA BLA BL</div>
<script>
// call the function passing
// the object ID you want to center, it´s width and height.
centerAlert('classify',400,200);

</script>

Share/Save