Igualar alto de columnas en drupal7 con jquery

Hay veces que por cuestiones estilistas es necesario igualar el alto de las columnas, como muestro en el caso:

Problemas:
1) Como vemos en las marcas rojas de la imagen los altos de las columnas con los class (.col1, .col2, .col2) son distintos.
posibles soluciones:

  • a) cambiar el estilo a display:table y display:table-cell (No me gusta esta solución porque se pierden algunas funcionalidad como adaptabilidad del estilo a otros dispositivos).
  • b) Usar una imagen de background haciendola repetir en y (repeat-y) con el patron (gris oscuro/ blanco / gris claro). No es posible y aclararemos en el problema 2.

2) Si vemos en la marca verde de la imagen El fondo del menú es transparente, por ende si intentamos hacer un background repeat-y con el patron (gris oscuro/ blanco / gris claro) eso se verá en el fondo y el menú quedará gris oscuro, no cumpliendo su función de transparencia. Este menú debe ser así porque es posible cambiar los fondos dinámicamente.

Solución: Hay un método por css pero agrega demasiada complejidad a la estructura del html. Lo mejor es agregar un pequeño programa en javascript (jQuery) ya que la funcionalidad es relacionada a la vista nada más. Veremos que es bien sencillito el script.

Crearemos un archivo llamado igualar.js

/*llamamos a la función jquery al mejor estilo drupal 7*/
(function ($) {
$(document).ready(function() {

igualarAltura($(".col")); /* se pasa como parámetro el class en común de las columnas a igualar*/
function igualarAltura(grupo) {
alto = 0;
grupo.each(function() {
miAlto = $(this).height();
if(miAlto > alto) {
/* se define el alto como el alto mayor de las columnas */
alto= miAlto;
}
});

/*se aplica el alto mayor a todas las columnas */
grupo.height(alto);

/* solo en caso de necesitar, este código se aplica al bloque por debajo del menú transparente
$('.barra_gris').height(altura - $('.barra_gris').height());*/

});
}(jQuery));

La manera mas limpia de agregar este script al theme es a través del archivo “nombre-theme.info” dentro de la carpeta de tu theme. agregarmos el archivo dentro de la carpeta “/nombre-theme”

scripts[] = igualar.js

Eso es todo, les dejo una pantalla del resultado. Abrazitos

influencias y script desde aquí

Dejá una respuesta

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: