Equal Heights mit jQuery http://www.highresolution.info/weblog/entry/equal_heights_mit_jquery/ Erst vor ein paar Tagen habe ich hier im Blog über den Ansatz von Chris Heilmann berichtet, gleichlange Spalten nicht mit CSS sondern nachträglich per Javascript zu erzeugen. Dieser Weg ist immer dann sinnvoll, wenn gleichlange Container einen optisch ein reizvollen Effekt darstellen, für die Funktion der Webseite jedoch nicht zwingend relevant sind. Aus eigener Erfahrung würde ich sagen, dass dies in den meisten Fällen zutrifft. Nicht lange nachdem mein Blogbeitrag im Netz stand, meldete sich Dirk Ginader und wir bastelten eine Lösung für YAML auf Basis von jQuery. Die wenigen Codezeilen waren schnell geschrieben,  doch letzte Woche hatten wir beide viel umdie Ohren, sodass ich erst jetzt dazu komme, unser kleines Plugin mit dem Namen SyncHeight kurz vorzustellen. Das Plugin synchronisiert die Höhe einer beliebigen Anzahl von Elementen innerhalb eines Layouts. Einzige Voraussetzung: Die Elemente müssen sich lediglich über einen gemeinsamen CSS Selektor ansprechen lassen (also beispielsweise eine gemeinsame CSS-Klasse). Als Beispiel hier der Aufruf zur Anpassung der Containerhöhen der YAML Subtemplates: $(document).ready(function(){ $('.subcolumns > div').syncHeight(); }); Für Layouts mit fixer Breite war’s das bereits. Innerhalb eines flexiblen Layouts kann es nötig sein, die Angleichung der Containerhöhen zu aktualisieren wenn die Breite des Browserfensters geändert wird. Dazu kann der Resize Event von jQuery genutzt werden: $(document).ready(function(){ $('.subcolumns > div').syncHeight(); $(window).resize(function(){ $('.subcolumns > div').syncHeight(); }); }); Nachtrag 11.9: Befinden sich gleich mehrere Subtemplates auf der Seite empfielt es sich, den gewünschten Subtemplate-Container direkt über eine ID anzusprechen. Sollen hingegen ALLE Subtemplates innerhalb einer Webseite mit einem Schlag bearbeitet werden, so sind noch ein paar mehr Zeilen Javascript nötig. Hier hat sich Reinhard Hiebl bereits Gedanken gemacht schlägt folgenden Code vor: $(document).ready(function(){ var eachCase = '.subcolumns'; // for each lines/paragraphs var element = '> div'; // elements within lines/paragraphs from eachCase $($(eachCase)).each(function() { var el = $(this).find(element); el.syncHeight(); $(window).resize(function(){ el.syncHeight(); }); }); }); In diesem Fall werden alle Subtemplates einer Webseite erfasst, jedoch die Container-Höhen immer nur jeweils innerhalb eines Subtemplates synchronisiert. Letztlich ist die Anwendung nicht auf YAML begrenzt. Über den Selektor können beliebige Elemente in ihrer Höhe manipuliert werden. Download des Plugins (v1.0): jquery.syncheight.zip (Dual licensed under the MIT and GPL licenses) de-de Dirk Copyright 2007 2007-09-10T;08:22:14+00:00 Kommentar von Dirk http://www.highresolution.info/weblog/entry/equal_heights_mit_jquery/ Hallo Johannes, Dein Problem hängt vermutlich mit deiner speziellen Layoutumsetzung zusammen. Allerdings fehlt mir da auf die Schnelle der Überblick und ich löse hier in meinem Blog auch keine Layoutprobleme. Daher musst Du Dich da schon selber durchkämpfen. Ein Hinweis noch: Deine “.h” Klasse an deinem “wrapper” halte ich für überflüssig. Gruß Dirk Hallo Johannes,

Dein Problem hängt vermutlich mit deiner speziellen Layoutumsetzung zusammen. Allerdings fehlt mir da auf die Schnelle der Überblick und ich löse hier in meinem Blog auch keine Layoutprobleme. Daher musst Du Dich da schon selber durchkämpfen.

Ein Hinweis noch: Deine “.h” Klasse an deinem “wrapper” halte ich für überflüssig.

Gruß
Dirk

]]> 2012-01-18T;11:39:34+00:00 Kommentar von Johannes http://www.highresolution.info/weblog/entry/equal_heights_mit_jquery/ Hallo Dirk, unter http://johannes.theile.org/groups/idee2_2.html findest Du mein Beispiel mit Padding und unter http://johannes.theile.org/groups/idee2_2_kein_padding.html ist die Version ohne Padding. Wenn ich dem DIV content padding von 30px gebe, dann sind die Spalten links und rechts nicht lang genug. Lasse ich das Padding weg, dann grenzen die Spalten direkt an den Footer an, womit aber auch der Text in “content” direkt dran klebt. Vielleicht habe ich auch nur was falsch verstanden?! Danke für Deine Hilfe! Grüße, Johannes Hallo Dirk,
unter http://johannes.theile.org/groups/idee2_2.html findest Du mein Beispiel mit Padding und unter http://johannes.theile.org/groups/idee2_2_kein_padding.html ist die Version ohne Padding.

Wenn ich dem DIV content padding von 30px gebe, dann sind die Spalten links und rechts nicht lang genug. Lasse ich das Padding weg, dann grenzen die Spalten direkt an den Footer an, womit aber auch der Text in “content” direkt dran klebt.

Vielleicht habe ich auch nur was falsch verstanden?!

Danke für Deine Hilfe!

Grüße,
Johannes

]]> 2012-01-18T;11:39:34+00:00 Kommentar von Dirk http://www.highresolution.info/weblog/entry/equal_heights_mit_jquery/ Hallo Johannes, nein, Paddings sollten berücksichtigt werden, da die Gesamthöhe der Container ausgewertet wird. Allerdings - speziell bei den Subtemplates - kann die Eigenschaft <div class=“codeblock”> overflow:hidden  </div> für Dein Problem verantwortlich sein. Damit werden “unnötige” Paddings abgeschnitten. Teste das mal bitte und gib mir notfalls Bescheid, falls es doch woanders klemmen sollte. Gruß Dirk Hallo Johannes,

nein, Paddings sollten berücksichtigt werden, da die Gesamthöhe der Container ausgewertet wird. Allerdings - speziell bei den Subtemplates - kann die Eigenschaft <div class=“codeblock”> overflow:hidden  </div> für Dein Problem verantwortlich sein. Damit werden “unnötige” Paddings abgeschnitten.

Teste das mal bitte und gib mir notfalls Bescheid, falls es doch woanders klemmen sollte.

Gruß
Dirk

]]> 2012-01-18T;11:39:34+00:00 Kommentar von Johannes http://www.highresolution.info/weblog/entry/equal_heights_mit_jquery/ Hallo, kann es sein, dass das Plugin padding-Angaben nicht in die Höhe der Elemente miteinberechnet? Sobald ich nämlich padding-bottom für ein Element angebe, stimmt die Höhe der anderen Columns nämlich nicht mehr. Kann man das irgendwie umgehen? Grüße, Johannes PS: Abgesehen davon ein super Plugin! Hallo,
kann es sein, dass das Plugin padding-Angaben nicht in die Höhe der Elemente miteinberechnet?

Sobald ich nämlich padding-bottom für ein Element angebe, stimmt die Höhe der anderen Columns nämlich nicht mehr.

Kann man das irgendwie umgehen?

Grüße,
Johannes

PS: Abgesehen davon ein super Plugin!

]]> 2012-01-18T;11:39:34+00:00 Kommentar von Nina http://www.highresolution.info/weblog/entry/equal_heights_mit_jquery/ Feine Sache, werde ich auf jeden Fall ausprobieren :) Feine Sache, werde ich auf jeden Fall ausprobieren :)

]]> 2012-01-18T;11:39:34+00:00