Advanced Search

Return to Snippet

Revision: 41915
at February 24, 2011 21:18 by dato
Initial Code 
$.fn.equalCols = function(){

    var tallestHeight = 0;

    $(this).each(function(){

    var thisHeight = $(this).height();

    if (thisHeight > tallestHeight){

    tallestHeight = thisHeight;

    }

    });

    $(this).height(tallestHeight);

    }
Initial URL 
http://innominepixel.wordpress.com/2010/02/19/columnas-de-la-misma-altura-con-jquery/
Initial Description 
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
Initial Title 
Columnas de la misma altura
Initial Tags 

                                

                                                            

                                    

                                        

                                        Initial Language
                                        

                                    

                                    
jQuery