Advanced Search

Columnas de la misma altura

/ Published in: jQuery
Save to your folder(s)
FROM: innominepixel.wordpress.com

Primero creamos una nueva función jQuery (equalCols) para poder ejecutar el código fácilmente. Lo que hace la función es comprobar si la altura de cada elemento seleccionado es la mas alta de todas y asignársela a todos los elementos. Para ello, vamos comprobando si la altura de cada elemento (thisHeight) es mas alta que la última mayor altura guardada (tallestHeight) y la vamos actualizando.

El resultado es que al final la mayor altura se almacena en tallestHeight y se asigna a todos los elementos. ¿Como usamos la función? Muy sencillo:

$(‘.column’).equalCols(); //Si todos los elementos tienen la misma clase

$(‘.content, .sideBar’).equalCols(); //Si tienen clases distintas

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. $.fn.equalCols = function(){
  2.  
  3.     var tallestHeight = 0;
  4.  
  5.     $(this).each(function(){
  6.  
  7.     var thisHeight = $(this).height();
  8.  
  9.     if (thisHeight > tallestHeight){
  10.  
  11.     tallestHeight = thisHeight;
  12.  
  13.     }
  14.  
  15.     });
  16.  
  17.     $(this).height(tallestHeight);
  18.  
  19.     }

URL: http://innominepixel.wordpress.com/2010/02/19/columnas-de-la-misma-altura-con-jquery/

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.