web-dev-qa-db-fra.com

Blocs de même hauteur réactifs dans une rangée - problématique dans IE8

L'exigence: blocs de hauteur égale dans les lignes

Je travaille sur de nombreux sites joomla dont les conceptions exigent que les différentes pages div soient de la même hauteur. CSS Tricks en a un bon exemple explique comment aligner et égaliser les hauteurs de plusieurs rangées de blocs. Cependant, l'exemple des astuces CSS suppose que tous vos divs/blocs seront des éléments similaires avec une classe partagée, par exemple. .blocks.

J'avais besoin d'une fonction capable de prendre plusieurs éléments disparates sur une page, sans classes communes, et d'égaliser leurs hauteurs respectives. Donc voici ce que j'ai écrit:

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


Le problème

Cette fonction fonctionne exactement comme je le souhaite, mais je rencontre des problèmes lorsque je l’appelle sur (window).resize, en particulier dans IE8 . Mes sites sont réactifs et je dois réajuster les hauteurs égalisées des div lorsque la taille de la fenêtre du navigateur a changé. Cela semble bien fonctionner dans les autres navigateurs, mais à cause de la façon dont IE8 traite l'événement de redimensionnement , appeler ma fonction equalHeight dans l'événement de redimensionnement déclenche une boucle sans fin qui bloque le navigateur.

La question

Compte tenu de ce qui précède, comment feriez-vous pour que les sites puissent avoir des blocs/divs de taille égale dans IE8 sans compromettre les performances? J'aimerais pouvoir éviter d'utiliser le (window).resize _ événement, mais n’avez pas trouvé d’alternative supérieure. Existe-t-il un meilleur moment et un meilleur endroit pour appeler la fonction equalHeight? Existe-t-il des lacunes dans la fonction equalHeight elle-même qui me manque? La seule solution que je ne suis pas prête à envisager est de "changer la conception du site", car ce n'est pas quelque chose sur lequel je contrôle.

jqueryjavascriptresponsive-web-design
1
Candlejack

Tout d’abord, je suppose que vous utilisez respond.js? C'est un excellent outil pour rendre IE8 réactif.

https://github.com/scottjehl/Respond

Maintenant pour le juteux. Tout ce que vous avez à faire, c'est "étrangler" l'événement.

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

Cela ne permet pas à equalHeight de s'exécuter plus de toutes les 2 secondes car, à moins que le délai d'attente ne soit effacé, il ne s'exécutera pas. Non testé, cependant, cela devrait fonctionner suffisamment pour vous aider à démarrer sur l'idée.

1
Jordan Ramstad

La seule solution que je ne suis pas prête à envisager est de "changer la conception du site", car ce n'est pas quelque chose sur lequel je contrôle.

C’est pourtant de loin la meilleure solution.

Avoir des colonnes de hauteur égale est une décision purement esthétique sans aucune incidence sur la fonctionnalité. En tant que tel, il s’agit là d’un comportement qui devrait s’ajouter au principe de l’amélioration progressive; un bon à avoir pour les navigateurs qui peuvent le supporter.

Le pire scénario, scénario de repli, étant que les utilisateurs d’IE8 (2,1% et en baisse http://www.w3schools.com/browsers/browsers_Explorer.asp ) obtiennent tout le contenu, toutes les fonctionnalités. , mais ne voit pas les colonnes de hauteur égale. À peine la fin du monde est-ce? Les utilisateurs d'IE8 ne le remarqueront certainement jamais.

En tant que concepteur web responsable, votre travail devrait consister à éduquer les clients sur ce qui est ou non possible/raisonnable/souhaitable sur le Web. Ils ne savent probablement pas pourquoi faire une telle chose est une mauvaise idée, ils ne sont pas des concepteurs de sites Web.

0
Seth Warburton