Container gleicher Höhe – Newsteaser

Vor kurzem stand ich vor dem Problem, dass der Container der News auf der Startseite, immer eine feste Höhe hatten. Das hatte zur Folge, dass ich den Vorschautext auf x Zeichen kürzen musste. Das war jedoch keine optimale Lösung, da nicht jedes Zeiten die selbe Breite hat. Somit kam es immer wieder dazu, dass der Text über den unteren Rand der Box scheute. Das sah besonders unschön aus. Also suchte ich nach einem Weg die Höhe dynamisch, per JavaScript, anzupassen und bin recht schnell fündig geworden. Da ich in fast allen Projekten jQuery verwende, habe ich mich auch hier auf eine Lösung mit jQuery konzentriert.

Die Theorie

Die Theorie ist relativ simpel. Die Daten kommen meistens aus einer Datenbank und werden in einer Schleife hintereinander ausgegeben. Man muss anschließend jeden Container nacheinander durchgehen, seine Höhe auslesen und diese anschließend an alle Container übertragen. Ein HTML-Gerüst können wir dann mit dem folgendem Code erstellen:

<div id="group">        
  <?php foreach ($articles as $k => $article): ?>
    <?php $zebra = ($k%2) ? 'even' : 'odd'; ?>
    <div class="article <?php echo $zebra; ?>">
      <h1><?php echo $article['title']; ?></h1>
      <p><?php echo $article['content']; ?></p>
    </div>
  <?php endforeach; ?>
</div>

Jetzt müssen wir nur noch eine kleine JavaScript Funktion schreiben, die die DIVs mit der Klasse „article“ einen nach dem andern durchläuft und deren Höhen auslesen. Dabei speichern wir den höchsten Wert immer in einer zusätzlichen Variable.

function equalHeight(container) {
  var maxheight = 0;
  container.each(function() {
    var height = $(this).height();
    if(height > maxheight) {
      maxheight = height;
    }
  });
  container.height(maxheight);
}
equalHeight($('.article'));

Vorschau: Container gleicher Höhe
Jetzt funktioniert das Script. Nach kürzester Zeit wirst du jedoch ein Problem feststellen. In unserem Beispiel ist der Container mit dem Titel „Titel 3“ deutlich höher als die Anderen. Es bekommen jedoch alle Container seine Höhe, auch Container 1 und 2. Diese haben jedoch deutlich weniger Inhalt. Somit müssen wir etwas anpassen. Erreichen möchte ich, dass die Container nur zeilenweise verglichen werden. Beispiel: Container 1 und 2 haben die selbe Höhe, Container 1 und 3 haben dann eine unterschiedliche Höhe, Container 3 und 4 hingegen wieder die Selbe.

Die Lösung

Man erstellt pro Zeile einen Container, in meinem Beispiel mit der Klasse „groups“, der die Artikel einschließt, geht dann einen Container der Klasse „groups“ nach und nach durch und ruft bei jedem dieser Container unsere Methode „equalHeight“ auf.

Dazu müssen wir aber ein bisschen das HTML-Gerüst umbauen. Wir erstellen nun für alle zwei Container der Klasse „article“ jeweils einen Container der Klasse „groups“. Dafür brauchen wir eine zusätzliche Zählervariable „i“, die von NULL läuft und bei jedem Schleifendurchlauf um eins erhöht wird. Nun prüfen wir am Ende jedes Durchlaufes ob „i“ durch 2 keinen Rest hat und ob „i“ kleiner die Anzahl der Artikel minus ein ist. Ist beides der Fall, dann haben wir zwei Artikel ausgegeben und müssen den Container mit der Klasse „groups“ schließen und einen neuen beginnen. Das Ganze könnte dann so aussehen:

<div id="group-0" class="groups">
  <?php $article_number = count ($articles); ?>
  <?php $i = 0; ?>
 
  <?php foreach ($articles as $k => $article): ?>
 
    <?php $zebra = ($k%2) ? 'even' : 'odd'; ?>
    <div class="article <?php echo $zebra; ?>">
      <h1><?php echo $article['title']; ?></h1>
      <p><?php echo $article['content']; ?></p>
    </div>
 
    <?php echo ($i%2 && $i < $article_number-1) ? '</div><div id="group-'.$i.'" class="groups">' : ''; ?>
    <?php $i++; ?>
  <?php endforeach; ?>
</div>

Jetzt muss lediglich die JavaScript Funktion angepasst werden. Dazu durchlaufen wir nun jeden Container der Klasse „groups“ und rufen die erstellte Funktion „equalHeight“ auf. Als Übergabeparameter geben wir die ID des Container und die Klasse des Artikels an:

$(document).ready (function () {
  $('.groups').each (function () {
    equalHeight($('#'+$(this).attr('id')+' .article'));
  });
});

Fertig sind unsere Nachriochten-Container mit einer dynamischen Höhe.
Vorschau: Container gleicher Höhe

ALL-INKL.COM

Ein Kommentar zu dem Artikel “Container gleicher Höhe – Newsteaser”

  1. Avatar von Boris
    Boris

    Danke für den Tipp. Hat mir sehr geholfen!

Kommentar hinterlassen