Colunas com alturas iguais com JavaScript
Postado por: Pedro Rogério em
Imagem retirada do site de Matthew James Taylor
Quem já não passou pelo problema de que as colunas do site não acompamhavam o tamanho das outras colunas e assim acarretando algumas vezes “quebras de layout”? Pois bem, já postei aqui uma solução não muito bem aceita utilizando CSS, mas dessa vez vamos implementar uma solução com JavaScript e uma outra com a utilização do Framework jQuery.
A primeira solução que utiliza JavaScript puro foi desenvolvida por Matthew Pennell, e o código e sua utilização consistem da seguinte forma. Primeiro você irá precisar de uma função para capturar os elementos da página:
function $() {
var elements = new Array();
for (var i=0;i<arguments .length;i++) {
var element = arguments[i];
if (typeof element == 'string') element = document.getElementById(element);
if (arguments.length == 1) return element;
elements.push(element);
}
return elements;
}
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;
}
}
Sua utilização é muito simples, adicione o código acima dentro das tags <head></head> de seu site, e após adicione também o seguinte código para que ele seja executado no carregamento da página:
window.onload = function() {
BoxHeights.equalise('one','two','three','four');
}
Dentro da função equalise você deve adicionar os “ids” das divs que deseja igualar a altura. O código final então ficaria da seguinte forma:
<script type="text/javascript">
function $() {
var elements = new Array();
for (var i=0;i<arguments .length;i++) {
var element = arguments[i];
if (typeof element == 'string') element = document.getElementById(element);
if (arguments.length == 1) return element;
elements.push(element);
}
return elements;
}
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;
}
}
window.onload = function() {
BoxHeights.equalise('one','two','three','four');
}
</script>
A segunda solução utiliza um plugin para jquery criado pelo blog Filament Group. Sua utilização é bem mais simples, onde dependeremos do jQuery e do plugin EqualHeights. Observe a seguinte estrutura HTML:
<div id="equalize">
<div class="box"><p>A - Lorem ipsum dolor sit amet</p></div>
<div class="box"><p>B - consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
<div class="box"><p>C</p></div>
<div class="box"><p>D - Ut enim ad minim</p></div>
</div>
Basta agora você efetuar uma chamada da div pai para o plugin que todas as divs filhas terão a mesma altura, da seguinte forma:
$(document).ready(function(){
$('#equalize').equalHeights();
});
Sobre Pedro Rogério
Pedro Rogério é desenvolvedor web por paixão, não saberia fazer melhor outra coisa. Além de escrever para o Pinceladas da Web também escreve para o CSS no Lanche, blog voltado ao desenvolvimento front-end.
Muito bom mesmo esse post.
Hoje mesmo estava precisando de alinhar minhas colunas e acordei ja com esse post.
Quebrou meu galho, muito bom mesmo teste nos IEs, firefox e Chrome e funciono perfeitamente.
Espero que ajude mais gente. Parabéns.
Não seria mais simples colocar um background de 1 px de altura na div#equalize com as cores corretamente posicionadas?
E sem JS o layout vai pras cucuias…
Não gostei, melhor o hack do CSSBlog.ES ou, melhor ainda, a solução que o MJT apresenta no post do qual você tirou a imagem. Ambos funcionam sem JS.
Oq eu keria mesmo era uma forma de colocar sidebars normalmente no blog, e abaixo dos sidebars, depois das widgets acabarem, a coluna #content ter seu width expandido pra ocupar toda a largura do browser, evitando desperdiçar o espaço das sidebars.
Mas acredito q isso é impossível, pq a #content deixaria de ser um retângulo… Precisaria fechar ela logo depois das sidebars acabarem e abrir uma outra pra continuar exibindo os posts, e isso feito dinamicamente em realtime no client-side, pq só no browser é possível ter certeza absoluta do height das sidebars (ele pode bloquear banners por exemplo)…
Só divagando antes de ir dormir
Massa!
Mas por otimização de recursos no cliente, acabo preferindo aquelas colunas perfeitas com CSS.
Do Matthew James Taylor também: http://matthewjamestaylor.com/blog/perfect-3-column.htm
[...] Read the original here: Colunas com alturas iguais com JavaScript » Pinceladas da Web – XHTML, CSS, JavaScript e WebStandar… [...]