it-swarm-eu.dev

Blocchi reattivi di uguale altezza in fila - problematico in IE8

Requisito: blocchi di uguale altezza nelle righe

Lavoro su molti siti di joomla i cui progetti richiedono che le varie div della pagina siano uguali in altezza. CSS Tricks ha un buon esempio di come allineare ed equalizzare le altezze di più file di blocchi. Tuttavia, l'esempio Trucchi CSS presuppone che tutti i tuoi div/blocchi saranno elementi simili con una classe condivisa, ad es. .blocks.

Avevo bisogno di una funzione che potesse contenere diversi elementi disparati su una pagina, senza classi comuni, e di uniformare le rispettive altezze. Quindi questo è quello che ho scritto:

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


Il problema

Questa funzione funziona esattamente come la voglio, ma ho dei problemi quando la chiamo su (window).resize, specialmente in IE8 . I miei siti sono reattivi e devo modificare le altezze equalizzate dei div una volta che le dimensioni della finestra del browser sono cambiate. Questo sembra funzionare bene in altri browser, ma a causa del modo in cui IE8 gestisce l'evento di ridimensionamento , chiamando la mia funzione equalHeight all'interno dell'evento di ridimensionamento si avvia un ciclo infinito, che provoca l'arresto anomalo del browser.

La domanda

Considerato quanto sopra, come faresti per garantire che i siti possano avere blocchi/div di dimensioni uguali in IE8 senza compromettere le prestazioni? Vorrei poter evitare di usare il (window).resize evento, ma non ho trovato un'alternativa superiore. C'è un momento e un posto migliori per chiamare la funzione equalHeight? Ci sono difetti nella funzione equalHeight stessa che mi manca? L'unica soluzione che non sono disponibile a prendere in considerazione è "cambia il design del sito", poiché non è qualcosa su cui ho il controllo.

1
Candlejack

Prima di tutto, suppongo che tu stia usando respond.js? È un ottimo strumento per rendere IE8 reattivo.

https://github.com/scottjehl/Respond

Ora per la succosità. Tutto quello che devi fare è "limitare" l'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);

Ciò non consente a equalHeight di essere eseguito più di ogni 2 secondi, poiché a meno che il timeout non venga azzerato, non verrà eseguito. Non testato, tuttavia, dovrebbe funzionare abbastanza per iniziare l'idea.

1
Jordan Ramstad

L'unica soluzione che non sono disponibile a prendere in considerazione è "cambia il design del sito", poiché non è qualcosa su cui ho il controllo.

Questa è di gran lunga la soluzione migliore però.

Avere colonne di uguale altezza è una decisione puramente estetica con zero cuscinetto sulla funzionalità. Come tale, questo è un comportamento che dovrebbe essere aggiunto con il principio del miglioramento progressivo; un piacere per i browser che può supportarlo.

Lo scenario peggiore, fallback, è che gli utenti IE8 (2,1% e in calo http://www.w3schools.com/browsers/browsers_Explorer.asp ) ottengono tutto il contenuto, tutte le funzionalità , ma non vedi colonne di uguale altezza. Difficilmente la fine del mondo è? Gli utenti di IE8 non lo noteranno mai.

In qualità di web designer responsabile, la parte del tuo lavoro dovrebbe essere quella di educare i clienti su ciò che è e non è possibile/ragionevole/desiderabile sul web. Probabilmente non hanno idea del perché fare una cosa del genere sia una cattiva idea, non sono web designer.

0
Seth Warburton