it-swarm-es.tech

Bloques de altura igual receptivos en una fila: problemático en IE8

El requisito: bloques de igual altura en filas

Trabajo en muchos sitios de Joomla cuyos diseños requieren que los distintos divisores de página tengan la misma altura. CSS Tricks tiene un buen ejemplo de cómo alinear e igualar las alturas de múltiples filas de bloques. Sin embargo, el ejemplo de CSS Tricks supone que todos sus divs/blocks serán elementos similares con una clase compartida, por ejemplo. .blocks.

Necesitaba una función que pudiera tomar varios elementos dispares en una página, sin clases comunes, y ecualizar sus respectivas alturas. Entonces esto es lo que escribí:

//EQUAL HEIGHT
equalHeight = function(container1, container2, container3) {

    var mainBlock = container1;
    var secondBlock = container2;
    var thirdBlock = container3;

    // in case the div heights have already dynamically changed,
    // reset the div heights back to their true markup values
    $(mainBlock).css('height','auto');
    $(secondBlock).css('height','auto');
    $(thirdBlock).css('height','auto');

    var highestBlock = 0;

    // determine which is the tallest block before doing anything
    $(mainBlock).each(function(){  
        if($(this).height() > highestBlock){  
            highestBlock = $(this).height();  
        }
    });    

    // Now apply the tallest block value to the heights of all relevant divs
    $(mainBlock).height(highestBlock);
    $(secondBlock).height(highestBlock);
    $(thirdBlock).height(highestBlock);
}

//EQUAL HEIGHT USAGE EXAMPLE
equalHeight('nav#myNav', 'img#someImage', 'section.mySectionClass');


El problema

Esta función funciona exactamente como yo quiero, pero me encuentro con problemas cuando la llamo (window).resize, especialmente en IE8 . Mis sitios responden y necesito reajustar las alturas igualadas de divs una vez que el tamaño de la ventana del navegador ha cambiado de tamaño. Esto parece funcionar bien en otros navegadores, pero debido a la forma en que IE8 trata el evento de cambio de tamaño , llamar a mi función equalHeight dentro del evento de cambio de tamaño desencadena un bucle sin fin, que bloquea el navegador.

La pregunta

Teniendo en cuenta lo anterior, ¿cómo se aseguraría de que los sitios puedan tener bloques/divs del mismo tamaño en IE8 sin comprometer el rendimiento? Me gustaría poder evitar el uso de (window).resize evento, pero no he encontrado una alternativa superior. ¿Hay un mejor momento y lugar para llamar a la función equalHeight? ¿Hay fallas en la función equalHeight que me falta? La única solución que no estoy dispuesto a considerar es 'cambiar el diseño del sitio', ya que esto no es algo sobre lo que tengo control.

1
Candlejack

En primer lugar, supongo que está utilizando respond.js? Es una gran herramienta para hacer que IE8 responda.

https://github.com/scottjehl/Respond

Ahora para la jugosidad. Todo lo que necesitas hacer es "acelerar" el evento.

var throttleTimeout = false,
    throttleTime = 2000; //2 seconds
function throttleHeight(event){
   if(!throttleTimeout){ //check if throttle variable is false
      throttleTimeout = setTimeout(function(){ //set a timeout
         equalHeight('nav#myNav', 'img#someImage', 'section.mySectionClass');
         throttleTimeout = false; //reset variable
      },throttleTime);
      throttleTimeout = true;
   }
}
jQuery(window).resize(throttleHeight);

Lo que esto hace es no permitir que equalHeight se ejecute más de cada 2 segundos, porque a menos que se elimine el tiempo de espera, no se ejecutará. No probado, sin embargo, debería funcionar lo suficiente como para comenzar con la idea.

1
Jordan Ramstad

La única solución que no estoy dispuesto a considerar es 'cambiar el diseño del sitio', ya que esto no es algo sobre lo que tengo control.

Sin embargo, esta es, con mucho, la mejor solución.

Tener columnas de igual altura es una decisión puramente estética con cero relación con la funcionalidad. Como tal, este es un comportamiento que debería agregarse con el principio de mejora progresiva; Un agradable tener para navegadores que pueden soportarlo.

El peor de los casos, el escenario alternativo, es que los usuarios de IE8 (2.1% y que caen http://www.w3schools.com/browsers/browsers_Explorer.asp ) obtienen todo el contenido, toda la funcionalidad , pero no veo columnas de igual altura. Apenas el fin del mundo es? Los usuarios de IE8 ciertamente nunca lo notarán.

Como diseñador web responsable, parte de su trabajo debe ser educar a los clientes sobre lo que es y no es posible/sensible/deseable en la web. Probablemente no tengan idea de por qué hacer algo así es una mala idea, no son diseñadores web.

0
Seth Warburton