Montag,
10. September 2007

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)


Du kannst die Kommentare zu diesen Eintrag durch den RSS 2.0 Feed verfolgen. Du kannst einen Kommentar schreiben, oder einen Trackback auf deiner Seite einrichten.

Dieser Eintrag kann nicht mehr kommentiert werden.