Archive aufgeräumt und aufgewertet

Neue Plattform, neue Test-Seite. Jeder Tüftler braucht so seine kleine abgelegene Werkstatt. Wie vorher auch, habe ich wieder eine Test-Seite für kommende Änderungen und Skript-Spielerein eingerichte. jQuery ist schon auf den ersten Blick beeindruckend. Was ist damit eigentlich nicht möglich?

Wer sich die Testseite kurz anschaut entdeckt ein kleines dezentes Skripts zum Aus- und Einblenden der kurzen Auszüge der jeweiligen Einträge. Ich bin rund um zufrieden damit. Der Effekt ist nicht zu aufgesetzt, sinvoll, artet nicht in einer Klickorgie aus und auch ohne aktiviertes Skript bleiben alle Informationen erhalten.

script to the rescue

Google Reader, besitzt für das eigentliche Lesen der Feeds eine ganz simple Lösung, um zwischen Lesen der Überschrift und ausklappen der Texte hin- und herzuschalten. Mit einem Klick auf den Titel, klappt der komplette Eintrag auf und wird oben im Browser ausgerichtet. Die Lösung ist so simpel und funktioniert so gut, dass man es einfach nicht besser machen kann. Im Prinzip würde ich das einfach so gern übernehmen, aber diese Seite ist kein Feed-Reader und man kann bei der Funktion zwischen Lesen der Überschrift und dem Lesen der eigentliche Seite, noch einen Maus-Klick sparen, indem man eben wie in meinem Beispiel, das Ausklappen aller mit einem Klick steuert. Bei mir macht das auch Sinn, da die Höhe der Auszüge nicht sonderlich groß ist.

Ok ich habe also einen Effekt, der sinnvoll und dezent ist, aber irgendwie nicht vorher eingeplant war und somit zum Problem wird. Der Effekt braucht einen sichtbaren verständlichen Auslöser, der sich nicht so einfach sinnvoll auf dem Raster platzieren lässt. Ich möchte die Funktion auch nich hinter irgendeinem winzigen Icon verstecken. Die jetzige Lösung gewinnt zwar keine Photoshopwettbewerbe, aber sie fällt optisch auf und man versteht worum es geht.

Darstellungsfehler im Firefox. Linien zwischen Textzeilen, die ungewollt sind. Scheint ein globaler Firefox-Bug zu sein, erscheint sowohl in der Mac- als auch PC-Version.

Firefox CSS-Bug Linien

Zusätzlich zickt Safari rum und machte das Positionieren dieser Liste zum Problem. Das Stylesheet insgesamt geht wieder an die Grenzen dessen, was man als Cross-Browser-kompatibel bezeichnen mag. IE7 hat wie üblich sein separates Stylesheet, IE6 teste ich hier garnicht mehr. Safari, IE7 und Firefox sollten ohne größere Mängel arbeiten. Einzig Firefox produziert optische Fehler und erschafft irgendwie immer wieder ungewollte Linien zwischen Textzeilen.

Ansonsten arbeiten nun alle Archiv-Seiten mit diesem kleinen neuen Skript und erlauben so den Wechsel, zwischen einer Ansicht der reinen Überschriften und einen detailierteren, mit einem kurzen Ausszug des Textes inklusive einer Übericht der Schlagwörter. Wenn sich nur dieser Firefox-Fehler beheben ließe. Wünschenswert wäre auch eine WordPress-Funktion, um Archive mit einer Seitenübersicht – oder auch hier wieder der englische Begriff Pagination – zu versehen. Irgendwie navigiert man hier doch sehr blind hin und her.

jQuery

Ich bin kein Programmierer, nie gewesen, werde ich sicherlich auch nicht mehr sein. Dennoch oder gerade deshalb ist jQuery relativ logisch und deshalb einfach, besonders wenn man sich mit CSS auskennt. Das komplette Skript für meine kleine Spielerei hier umfasst ganze 7 Zeilen.

1.   $(document).ready(function(){
2.     $("ul.excerpt").hide();
3.     $('a#toggle').click(function() {
4.          $('ul.excerpt').toggle(500);
5.          return false;
6.        });
7.   });

Es existiert eine große Liste, die wiederrum kleine Unterlisten enthält. Diese Unterlisten beinhalten die Zusammenfassung und die Tags und besitzen die CSS-Klasse “.exerpt”. Wenn die Seite geladen ist (Zeile 1) werden alle Listen mit dieser Klasse versteckt (Zeile 2). Der Link der als Trigger dient besitzt die CSS-ID #toggle. Zeile 3 im Skript leitet eine neue Funktion ein, wenn eben jeder Link mit der ID #toggle geklickt wird. Zum einen werden die vorher versteckten Listen eingeblendet – genauer gesagt in einer 500 milisekundenlangen “Animation” (Zeile 4) und in Zeile 5 wird schließlich der Link als HTML-Element deaktiviert, damit der Browser nicht dem Link folgt. Viel einfacher geht es kaum. Das alles war nach 10 Minuten lesen der Dokumentation und der ersten Tutorials der offiziellen Seite geschrieben. Für den Anfang reicht mir das erstmal, die tieferen Funktionen wollen etwas ausgiebiger als 10 Minuten getestet werden.