Weblog

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)

Vor kurzem habe ich einen knuffigen Bugfix zur Beseitigung des Italics-Bugs vorgestellt. Der Bugfix musste nun aufgrund eines Problems im IE5.x leicht modifiziert werden.

Mein damaliger Beitrag hat daher ein Update erfahren. Die Probleme im IE5.x sollten damit verschwunden sein.

Gerade habe ich in die Kommentare zu Gerrits Rezension meines Buches - für die ich mich hiermit herzlich bedanken möchte - geschaut und dabei ein Thema entdeckt, dem ich mich in der Vergangenheit immer wieder stellen musste, bisher jedoch keinen Blogbeitrag dazu verfasst hatte.

Stein des Anstoßes in allen Diskussionen dieser Art, die ich bisher miterleben durfte, ist die “große” Anzahl von vordefinierten DIV-Containern innerhalb der Quelltextstruktur von YAML. Die Kritik bezieht sich dabei in erster Linie auf die Schachtelungstiefe der Container bis zum eigentlichen Inhalt. Gleiches ist auch für die Grids von Yahoo zu vermuten. Ich möchte hier nicht die Quelltexte auseinander nehmen. Wer die Projekte nicht kennt, für den stehen die jeweiligen Online-Dokumentationen (Grids & YAML) bereit. Stattdessen möchte ich einige, ggf. kontroverse Thesen in den Raum werfen, um die Diskussion anzuregen.

Es stellt sich die Frage: Steht ein XHMTL/CSS-Framework (wie YAML oder Yahoo Grids) ernsthaft in Konkurrenz zu dem Ziel, schlanken Code zu erzeugen?

Und wiedereinmal bin ich erfreut über die wachsende Akzeptanz und Verbreitung von YAML als auch verblüfft darüber, an welch prominenter Stelle mir YAML über den Weg läuft. Diesmal sind es die Unternehmensseiten des ZDF, unter deren Haube offensichtlich das weithin bekannte Open-Source Content-Management-Sytem TYPO3 werkelt. Das schicke ZDF-Layout basiert auf YAML Version 2.5.1. Das Layout ist in weiten Teilen elastisch angelegt und sogar die Grafiken skalieren im Firefox mit.

Und auch die Kombination von TYPO3 mit YAML entwickelt sich prächtig. Erst vor kurzem hat Dieter Bunkerd eine erste Version seines YAML-basiertes Template für TemplaVoila herausgebracht, mit welchem sich die Arbeit mit YAML noch angenehmer gestaltet.

So, nach knapp 2 Jahren ununterbrochener Laufzeit meiner Blogs unter der EE habe ich mein erstes ernsthaftes Problem. Ich habe vor einiger Zeit eine ältere Fassung der “Spam Prevention” Extension für die EE installiert. Überzeugt hat sie mich nicht und daher flog sie wieder raus. Und hier beginnen die Probleme. Seither ist es hier im Highresolution-Forum unmöglich, Kommentare zu hinterlassen. Das Kommentarformular beantwortet jeden Versuch mit einer fiktiven Fehlermeldung.

In meinem Fotoblog, welches zwischenzeitlich vermutlich auch davon betroffen war, ist mittlerweile wieder alles o.k. Hier im Weblog stehe ich aber im Moment vor einem mittelgroßen Rätsel, welches gelöst werden muss. Für alle da draußen, ich bin dran ....

UPDATE: Nach ein wenig Spielerei mit den Kommentareinstellungen scheint sich das Problem in Luft aufgelöst zu haben. Das soll mir in diesem Falle recht sein. Die Kommentare sind also ab sofort wieder eröffnet. Sollte es nochmal irgendwo klemmen, bitte umgehend Bescheid geben.