it-swarm.com.de

Reaktionsschnelle Blöcke gleicher Höhe hintereinander - problematisch in IE8

Die Anforderung: Blöcke gleicher Höhe in Zeilen

Ich arbeite an vielen Joomla-Sites, für deren Gestaltung die verschiedenen Seitenteile gleich hoch sein müssen. CSS Tricks hat ein gutes Beispiel wie man die Höhen mehrerer Reihen von Blöcken ausrichtet und ausgleicht. Das Beispiel für CSS-Tricks geht jedoch davon aus, dass alle Ihre divs/blocks ähnliche Elemente mit einer gemeinsam genutzten Klasse sein werden, z. .blocks.

Ich brauchte eine Funktion, die mehrere unterschiedliche Elemente auf einer Seite ohne gemeinsame Klassen aufnehmen und ihre jeweiligen Höhen ausgleichen konnte. Das habe ich geschrieben:

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


Das Problem

Diese Funktion funktioniert genau so, wie ich es möchte, aber ich habe Probleme, wenn ich sie auf (window).resize Aufrufe, insbesondere in IE8 . Meine Websites reagieren, und ich muss die ausgeglichenen Höhen von divs neu einstellen, sobald sich die Größe des Browserfensters geändert hat. Dies scheint in anderen Browsern gut zu funktionieren, aber aufgrund der Art und Weise, wie IE8 mit dem Größenänderungsereignis umgeht , löst der Aufruf meiner Funktion equalHeight innerhalb des Größenänderungsereignisses eine Endlosschleife aus, die den Browser zum Absturz bringt.

Die Frage

Wie würden Sie in Anbetracht des oben Gesagten sicherstellen, dass Websites gleich große Blöcke/Divs in IE8 aufweisen können, ohne die Leistung zu beeinträchtigen? Ich möchte die Verwendung des Ereignisses (window).resize Vermeiden, habe aber keine bessere Alternative gefunden. Gibt es eine bessere Zeit und einen besseren Ort, um die Funktion equalHeight aufzurufen? Gibt es Fehler in der EqualHeight-Funktion selbst, die ich vermisse? Die einzige Lösung, die ich nicht in Betracht ziehen kann, ist, das Design der Website zu ändern, da ich keine Kontrolle darüber habe.

1
Candlejack

Zunächst nehme ich an, dass Sie reply.js verwenden. Es ist ein großartiges Tool, um IE8 reaktionsfähig zu machen.

https://github.com/scottjehl/Respond

Nun zur Saftigkeit. Alles was Sie tun müssen, ist das Ereignis zu "drosseln".

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

Dies führt dazu, dass equalHeight nicht mehr als alle 2 Sekunden ausgeführt wird, da es nur ausgeführt wird, wenn das Zeitlimit gelöscht wird. Ungetestet sollte es jedoch ausreichen, um Ihnen den Einstieg in die Idee zu erleichtern.

1
Jordan Ramstad

Die einzige Lösung, die ich nicht in Betracht ziehen kann, ist, das Design der Website zu ändern, da dies nicht unter meiner Kontrolle steht.

Dies ist jedoch bei weitem die beste Lösung.

Säulen gleicher Höhe zu haben, ist eine rein ästhetische Entscheidung, bei der die Funktionalität keine Rolle spielt. Als solches ist dies ein Verhalten, das mit dem Prinzip der fortschreitenden Verbesserung ergänzt werden sollte. Ein Nizza für Browser, die es unterstützen können.

Das schlimmste Fall-Back-Szenario ist, dass IE8-Benutzer (2,1% und weniger http://www.w3schools.com/browsers/browsers_Explorer.asp ) den gesamten Inhalt und die gesamte Funktionalität erhalten , aber Spalten mit gleicher Höhe werden nicht angezeigt. Kaum das Ende der Welt ist es? Nutzer von IE8 werden es sicherlich nie merken.

Als verantwortungsbewusster Webdesigner sollten Sie Ihre Kunden darüber informieren, was im Web möglich/sinnvoll/wünschenswert ist und was nicht. Sie haben wahrscheinlich keine Ahnung, warum so etwas eine schlechte Idee ist, sie sind keine Webdesigner.

0
Seth Warburton