[JavaScript] Colunas de altura igual!

Escrito por Gustavo Bordoni em CSS, HTML, JavaScript no dia 13 de junho, 2009

Estou aqui desta vez para falar-lhes sobre um problema que me ocorre muito e após descobrir este código tive minha vida facilitada! Em suma esse código irá comparar o tamanho de todos as colunas indicadas e fará com que elas se tornem do mesmo tamanho, usando como base a maior.

Vamos a parte prática para não perder tempo, primeiramente você deve criar um arquivo equalizar.js e colocar o seguinte código:

var BoxHeights = {
	maxh: 0,
	boxes: Array(),
	num: 0,
	equalise: function() {
		this.num = arguments.length;
		for (var i=0;i<this.num;i++) if (!$(arguments[i])) return;
		this.boxes = arguments;
		this.maxheight();
		for (var i=0;i<this.num;i++) $(arguments[i]).style.height = this.maxh+"px";
	},
	maxheight: function() {
		var heights = new Array();
		for (var i=0;i<this.num;i++) {
			if (navigator.userAgent.toLowerCase().indexOf('opera') == -1) {
				heights.push($(this.boxes[i]).scrollHeight);
			} else {
				heights.push($(this.boxes[i]).offsetHeight);
			}
		}
		heights.sort(this.sortNumeric);
		this.maxh = heights[this.num-1];
	},
	sortNumeric: function(f,s) {
		return f-s;
	}
}

Após isso feito salve e faça com que a sua página principal puxe o arquivo dentro do cabeçalho[tag <head>], da seguinte forma:

<script src="http://seusite.com/caminho/para/o/arquivo/equalizar.js" type="text/javascript"></script>

Agora temos que escolher as colunas que desejamos equalizar, quando isso tiver sido feito adicione o seguinte código dentro de seu cabeçalho [tag <head>]:

<script type="text/javascript"> window.onload = function() {
	BoxHeights.equalise('um','dois','tres','quatro');
} </script>

Após feito isso seja feliz, e pare de ter problemas com tamanho das colunas. Você pode ver um exemplo deste código funcionando nessa página.

Dê para mim um dos maiores pagamentos pelo meu artigo, deixe um comentário, seja ele uma crítica construtiva ou apenas um elogio.

Decodifique seus pensamentos abaixo