Projetos Lucas Peperaio Códigos e Aplicativos úteis para a Internet

Plug-in jQuery Centralize

Com este plug-in desenvolvido em jQuery, será possível centralizar objetos no centro da tela, orientando-se pela viewport (tela visível) ou pelo documento (altura total da tela), com suporte a callbacks. 


Exemplo e Download
Exemplo | Download

/* 
	* jQuery Centralize
	* Autor: Lucas Peperaio
	* URL: http://projetos.lucaspeperaio.com.br/plugin-jquery-centralize/
	* Versão: 1.0
	* 27/11/2011 
*/
(function($){
	$.fn.centralize = function(param,callback){
		$obj = $(this); //cache this
		
		//clear margin and reajust document height
		$obj.css("position","absolute");
		m = ["top","left","button","right"];
		for(i=0;i<4;i++){
			x = parseInt($obj.css("margin-"+m[i]));
			if(x > 0){
				$obj.css("margin-"+m[i],"0px");
			}
		}
		
		p = {
			doch		:	parseInt($(document).height()),
			largura		:	parseInt($obj.width()),
			altura		:	parseInt($obj.height()),
			ptop		:	parseInt($obj.css("padding-top")),
			pright		:	parseInt($obj.css("padding-right")),
			pbottom		:	parseInt($obj.css("padding-bottom")),
			pleft		:	parseInt($obj.css("padding-left")),
			btop		:	parseInt($obj.css("border-top-width")),
			bright		:	parseInt($obj.css("border-right-width")),
			bbottom		:	parseInt($obj.css("border-bottom-width")),
			bleft		:	parseInt($obj.css("border-left-width"))
		};
		
		largura = (p.largura+p.pleft+p.pright+p.bright+p.bleft)/2;
		altura = p.altura+p.ptop+p.pbottom+p.btop+p.bbottom;
		
		_top = "50%";
		_mtop = "-"+(altura/2)+"px";

		//(outerHeigh()-heightObj)/2 = margin-top
		if(typeof param !== "undefined" &amp;&amp; param.align === "document" &amp;&amp; p.doch > $(window).height()){
			_top = (p.doch - altura)/2+"px";
			_mtop = "";
		}
		
		$obj.css({
			"position":"absolute",
			"left":"50%",
			"top":_top,
			"margin-top":_mtop,
			"margin-left":"-"+largura+"px"
		});
		
		if(typeof callback == 'function'){callback.call(this);}
		else if(typeof param == "function"){param.call(this);}
	};
})(jQuery);



Como usar
Para usar o plug-in é muito simples! Inclua a biblioteca jQuery e o jQuery Centralize em seu código (dentro da tag HEAD ou antes de fechar a tag BODY):

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.centralize.js"></script>



Centralizar pela ViewPort
No exemplo abaixo, o elemento será centralizado na parte visível da tela do navegador (ViewPort):

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.centralize.js"></script>

<script type="text/javascript">
$("#my_obj").centralize(); //objeto a ser centralizado
</script>



Centralizar pelo documento
Se a sua página for grande, com barra de rolagem vertical, e você preferir que o elemento fique no centro do documento, e não no centro da tela visível, use este parâmetro:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.centralize.js"></script>

<script type="text/javascript">
$("#my_obj").centralize({"align":"document"}); //objeto será centralizado de acordo com o documento
</script>



Callback
Caso você queira fazer algo logo após a execução do plug-in, utilize como callback a palavra function. Veja no exemplo abaixo a utilização do callback:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.centralize.js"></script>
<script type="text/javascript">
$(document).ready(function(){
   $("#elemento").centralize(function(){
      $(this).html("Centralizado!");
   });
});

//Ou, se você utilizar o parametro para centralizar pelo documento...

$(document).ready(function(){
   $("#elemento").centralize({"align":"document"},function(){
      $(this).html("Centralizado!");
   });
});
</script>

Em ambos os casos, o objeto a ser centralizado pode ter largura/altura em pixels(px), em porcentagem(%) ou automático(auto). É possível também utilizar objetos sem largura/altura, desde que o objeto em questão tenha algum conteúdo.

Compátivel com IE6+, Firefox 3+, Opera 5+, Google Chrome 5+ e Safari 5+

Pesquisas
© 2011 - 2012
Desenvolvido e Mantido por Lucas Peperaio