jQuery: Gleiche Höhe für verschiedene Elemente in Abhängigkeit vom Inhalt dynamisch einstellen

Mit meinem kleinen JavaScript kann man verschiedenen Elementen in Abhängigkeit von ihrem Inhalt dynamisch die gleiche Höhe vergeben.

Für die ganz Eiligen geht es hier direkt zur Demo, hier zur Sandkiste (jsFiddle) und hier zum Code (GitHub). Wer mehr zum Script erfahren möchte, liest weiter… :-)

Praktischer Hintergrund

Ich brauchte so ein Script, weil der Header in meinem WordPress-Theme MinMax zu klein ist, wenn man in der Hauptnavigation sehr-sehr viele Navigationselemente auf die erste Ebene packt. Das Navigationsmenü erstreckt sich dadurch über mehrere Zeilen und kann sogar über den Header laufen, wie hier im Screenshot zu sehen:

MinMax-Menü überlang
image-188

MinMax-Theme mit überlangem Menü. Es ragt über den Header hinaus.

Man würde auf dem ersten Blick erwarten, dass der Header mit der Höhe seiner (Kind-)Elemente mit-wächst. Das tut er auch. Aber die Hauptnavigation ist in diesem Theme kein Kind-Element des Headers. Sie liegt nicht im Header-Bereich, sondern ist mit Hilfe einer absoluten Positionierung über(!) den Header gelegt.

Da die Navigation keinen Einfluss auf den Header hat, brauchte ich eine Möglichkeit, wie ich die Höhe der Hauptnavigation ermitteln kann und diesen Wert – falls er größer als die Höhe des Headers ist – dem Header als Wert für die Höhe zuweisen kann. Das lässt sich wunderbar mit Javascript bzw. jQuery erledigen.

Also habe ich im Netz recherchiert, bin aber nirgends richtig fündig geworden. Es gab zwar verschiedene Ansätze, aber ich musste mir daraus ein eigenes Script zusammenpuzzeln.

Das Prinzip

Das Prinzip des Scriptes ist einfach: Nach dem vollständigen Laden des Dokumentes beginnt das Script damit, aus den Elementen, die abgeglichen werden sollen (=Bund), die höchste Höhe zu ermitteln und überträgt dann den Wert dieser maximale Höhe per CSS-Style in das entsprechende Element.

In meinem konkreten Fall mit dem WordPress-Theme ist es so, dass die Höhe der Navigation ausgelesen wird und – wenn dieser Wert größer als die Höhe des Headers ist – dem Header als Höhe zugewiesen wird.

Das sieht dann im Endeffekt so aus:

MinMax-Menü lang, aber im Header

MinMax-Theme mit überlangem Menü. Der Header ist diesmal "mit-gewachsen".

Nun überragt die Navigation den Header nicht mehr, sondern wird vom Header umschlossen.

Der Code

[js]
var sameHeight = function() {
var maxHeight = -1;

$(‚.one, #two, p‘).each(function() {
maxHeight = maxHeight > $(this).height() ? maxHeight : $(this).height();
});

$(‚.one, #two, p‘).each(function() {
$(this).height(maxHeight);
});
};

$(document).ready(function() {
sameHeight();
});
[/js]

Die Variable „sameHeight“ ist eine Funktion, welche die größte Höhe von bestimmten Elementen berechnet. In Zeile 4 werden die Elemente festgelegt, von welchen die größte Höhe ermittelt erden soll. Im obigen Code-Beispiel sind es:

  • alle Elemente mit der CSS-Class „one“
  • alle Elemente mit der CSS-ID „two“
  • und alle p-Elemente

In der folgenden Zeile findet die eigentliche Ermittlung des Wertes statt. Anschließend wird diese Höhe dann allen Elementen zugewiesen, die in Zeile 8 festgelegt sind. Im Code-Beispiel sind es die selben Elemente wie in Zeile 5. Wenn das Dokument geladen ist, wird die Funktion ausgeführt.

Bonus: Wenn sich die Fenstergröße ändert.

Besonders unter dem Gesichtspunkt des Responsive Design ist es meiner Meinung nach sehr wichtig, zu beachten, dass sich die Fenstergröße beim Lesen öfter mal ändern kann. Erfahrungsgemäß ist das bei kleineren Smartphones der Fall, weil Texte besser im Hochformat, aber Bilder besser im Querformat zu rezipieren sind.

Wie auch immer. Wenn man die Fenstergröße ändert, muss der alte Wert entfernt und die Maximale Höhe neu berechnet und eingetragen werden… Auch daran ist im Script gedacht!

[js firstline=“16″]
$(window).resize(function() {
$(‚.one, #two, p‘).css({
"height": ""
});
sameHeight();
});
[/js]

Mit diesem Code wird – wenn sich die Fenstergröße ändert – der oben festgelegt Wert für die Höhe entfernt und die Funktion neu ausgeführt. Somit passt sich die Höhe immer an.

Live-Demo

Eine kleine Live-Demo für das Script findet sich hier:
https://heikomamerow.de/demo/sameHeight/sameHeight.html

Und wer gerne mit dem Script etwas ausprobieren möchte, kann das hier:
http://jsfiddle.net/HeikoMamerow/xcnda/

Download

Das Script habe ich bei GitHub veröffentlicht. Dort kann es jeder gerne ausprobieren, kopieren oder forken:
https://github.com/HeikoMamerow/Same-height-for-all-in-the-bunch/blob/master/sameHeight.html

Bekannte Fehler

Beim Testen ist mir bisher aufgefallen, dass das Script im Opera Mini nicht arbeitet. Wer Abhilfe weiß, ist herzlich eingeladen. Ansonsten freue ich mich über Kritik und Fehlermeldungen. Aus Fehlern lernt man. ;-)

This entry was posted on by .

Heiko Mamerow

Buddhist, Vater, Freund, Internetseitenbauer, Sportler, Musikliebhaber & Verkehrsteilnehmer ;-)

6 Gedanken zu „jQuery: Gleiche Höhe für verschiedene Elemente in Abhängigkeit vom Inhalt dynamisch einstellen

  1. Monika T-S

    ich versteh das Script und finds an sich gut,
    aber eine Navi, die derart viele Punkte anzeigt ist schlicht ein usability Horror ;)

    1. der 1. Eindruck
    ich öffne die Website und anstatt eines ansprechenden Headers oder von mir aus keinen Header, dafür den Inhalt seh ich NavigationsPunkte (!)
    das wirkt wie die NudelAuswahl im Supermarkt => einfach zuviel

    2. eine Webseite , die solche eine Navi hat ist schlicht schlecht konzipiert

    was bewog dich diesen Fall zu durchdenken?

    Antworten
    1. Heiko Mamerow Beitragsautor

      Hallo Monika,

      …keine Bange, die Navigation ist für weniger Menüpunkte vorgesehen. Der Screenshot zeigt einen „theoretischen Extremfall“, bei dem ich das Verhalten der Navi mit einer sehr großen Anzahl von Listen-Items getestet habe. So ist das von WordPress in der „Template File Checklist“ vorgeschrieben: https://codex.wordpress.org/Theme_Development#Navigation_Menus_.28header.php.29

      Normalerweise gehören da natürlich nur fünf bis sieben Menüpunkte hin. Dann sieht der Header ungefähr so aus: https://heikomamerow.de/wordpress/wp-content/uploads/2012/05/minmax-screenshot.jpg

      Antworten
  2. Monika T-S

    ah! weil du es bei WP-org promoten magst

    ich gebe dir den heißen Tipp,
    selbst, wenn der User dir einen Link spendiert, lass den nicht auf allen Unterseiten anzeigen, sonst rauscht deine Seite bei Google schneller ab, als du guggen kannst ;)

    Antworten
  3. Pingback: Anonymous

  4. Pingback: Rundungs-Chaos bei Sub-Pixeln und wie man damit klar kommt | Heiko Mamerow

  5. Stiemi

    Das Script funktioniert eigentlich gut. Nur wenn die Div´s in der CSS mit box-sizing:border-box; deklariert sind, läuft der Inhalt unten aus den Boxen raus. Kann man das irgendwie umgehen ohne box-sizing zu entfernen?

    Antworten

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.