ti-enxame.com

Blocos de altura igual responsivo em uma linha - problemático no IE8

O requisito: blocos iguais de altura em linhas

Eu trabalho em muitos sites joomla cujos designs exigem que as várias divs de páginas sejam iguais em altura. CSS Tricks tem um bom exemplo de como alinhar e igualar as alturas de várias linhas de blocos. No entanto, o exemplo CSS Tricks assume que todos os seus divs/blocks serão elementos semelhantes a uma classe compartilhada, por exemplo. .blocks.

Eu precisava de uma função que pudesse levar vários elementos díspares em uma página, sem classes comuns, e igualar suas respectivas alturas. Então é isso que eu escrevi:

//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');


O Problema

Essa função funciona exatamente como eu quero, mas encontro problemas ao chamá-la (window).resize, especialmente no IE8 . Meus sites são responsivos e preciso reajustar as alturas equalizadas dos divs assim que o tamanho da janela do navegador mudar de tamanho. Isso parece funcionar bem em outros navegadores, mas devido à maneira como o IE8 lida com o evento resize , chamar minha função equalHeight dentro do evento redimensionar aciona um loop sem fim, que trava o navegador.

A pergunta

Dado o exposto, como você garantiria que os sites pudessem ter blocos/divs de tamanhos iguais no IE8 sem comprometer o desempenho? Eu gostaria de evitar o uso do (window).resize evento, mas não encontrou uma alternativa superior. Existe um momento e um local melhores para chamar a função equalHeight? Existem falhas na função equalHeight que estou perdendo? A única solução que não estou disposta a considerar é 'alterar o design do site', pois isso não é algo sobre o qual tenho controle.

1
Candlejack

Primeiro de tudo, suponho que você esteja usando o respond.js? É uma ótima ferramenta para tornar o IE8 responsivo.

https://github.com/scottjehl/Respond

Agora para a suculência. Tudo o que você precisa fazer é "acelerar" o 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);

O que isso faz não permite que o equalHeight seja executado mais que a cada 2 segundos, porque, a menos que o tempo limite seja liberado, ele não será executado. Não testado, no entanto, deve funcionar o suficiente para você começar a ideia.

1
Jordan Ramstad

A única solução que não estou disposta a considerar é 'alterar o design do site', pois isso não é algo sobre o qual tenho controle.

Esta é, de longe, a melhor solução.

Ter colunas de altura igual é uma decisão puramente estética, sem nenhuma influência sobre a funcionalidade. Como tal, esse é um comportamento que deve ser adicionado ao princípio do aprimoramento progressivo; Um bom para ter em navegadores que podem suportá-lo.

O pior cenário possível é o de que os usuários do IE8 (2,1% e em queda http://www.w3schools.com/browsers/browsers_Explorer.asp ) obtenham todo o conteúdo e toda a funcionalidade , mas não vêem colunas de altura igual. Dificilmente o fim do mundo é? Os usuários do IE8 certamente nunca perceberão.

Como web designer responsável, parte do seu trabalho deve ser educar os clientes sobre o que é e o que não é possível/sensato/desejável na web. Eles provavelmente não têm idéia do porquê fazer uma coisa dessas é uma má idéia, eles não são web designers.

0
Seth Warburton