Archive aufgeräumt und aufgewertet

• Mi, 13. Februar 2008,
• 690 Wörter,
• 1 Kommentar,
• Tags:
• CSS,
• Firefox,
• Java,
• jQuery,
• Website,
• Wordpress

Neue Platt­form, neue Test-Seite. Jeder Tüft­ler braucht so seine kleine abge­le­gene Werk­statt. Wie vor­her auch, habe ich wie­der eine Test-Seite für kom­mende Ände­run­gen und Skript-Spielerein ein­ge­richte. jQuery ist schon auf den ers­ten Blick beein­dru­ckend. Was ist damit eigent­lich nicht mög­lich?

Wer sich die Test­seite kurz anschaut ent­deckt ein klei­nes dezen­tes Skripts zum Aus- und Ein­blen­den der kur­zen Aus­züge der jewei­li­gen Ein­träge. Ich bin rund um zufrie­den damit. Der Effekt ist nicht zu auf­ge­setzt, sin­voll, artet nicht in einer Klick­or­gie aus und auch ohne akti­vier­tes Skript blei­ben alle Infor­ma­tio­nen erhal­ten.

script to the res­cue

Google Rea­der, besitzt für das eigent­li­che Lesen der Feeds eine ganz sim­ple Lösung, um zwi­schen Lesen der Über­schrift und aus­klap­pen der Texte hin- und her­zu­schal­ten. Mit einem Klick auf den Titel, klappt der kom­plette Ein­trag auf und wird oben im Brow­ser aus­ge­rich­tet. Die Lösung ist so sim­pel und funk­tio­niert so gut, dass man es ein­fach nicht bes­ser machen kann. Im Prin­zip würde ich das ein­fach so gern über­neh­men, aber diese Seite ist kein Feed-Reader und man kann bei der Funk­tion zwi­schen Lesen der Über­schrift und dem Lesen der eigent­li­che Seite, noch einen Maus-Klick spa­ren, indem man eben wie in mei­nem Bei­spiel, das Aus­klap­pen aller mit einem Klick steu­ert. Bei mir macht das auch Sinn, da die Höhe der Aus­züge nicht son­der­lich groß ist.

Ok ich habe also einen Effekt, der sinn­voll und dezent ist, aber irgend­wie nicht vor­her ein­ge­plant war und somit zum Pro­blem wird. Der Effekt braucht einen sicht­ba­ren ver­ständ­li­chen Aus­lö­ser, der sich nicht so ein­fach sinn­voll auf dem Ras­ter plat­zie­ren lässt. Ich möchte die Funk­tion auch nich hin­ter irgend­ei­nem win­zi­gen Icon ver­ste­cken. Die jet­zige Lösung gewinnt zwar keine Pho­to­shop­wett­be­werbe, aber sie fällt optisch auf und man ver­steht worum es geht.

Dar­stel­lungs­feh­ler im Fire­fox. Linien zwi­schen Text­zei­len, die unge­wollt sind. Scheint ein glo­ba­ler Firefox-Bug zu sein, erscheint sowohl in der Mac- als auch PC-Version.

Zusätz­lich zickt Safari rum und machte das Posi­tio­nie­ren die­ser Liste zum Pro­blem. Das Style­s­heet ins­ge­samt geht wie­der an die Gren­zen des­sen, was man als Cross-Browser-kompatibel bezeich­nen mag. IE7 hat wie üblich sein sepa­ra­tes Style­s­heet, IE6 teste ich hier gar­nicht mehr. Safari, IE7 und Fire­fox soll­ten ohne grö­ßere Män­gel arbei­ten. Ein­zig Fire­fox pro­du­ziert opti­sche Feh­ler und erschafft irgend­wie immer wie­der unge­wollte Linien zwi­schen Text­zei­len.

Ansons­ten arbei­ten nun alle Archiv-Seiten mit die­sem klei­nen neuen Skript und erlau­ben so den Wech­sel, zwi­schen einer Ansicht der rei­nen Über­schrif­ten und einen detailier­te­ren, mit einem kur­zen Aus­szug des Tex­tes inklu­sive einer Übericht der Schlag­wör­ter. Wenn sich nur die­ser Firefox-Fehler behe­ben ließe. Wün­schens­wert wäre auch eine WordPress-Funktion, um Archive mit einer Sei­ten­über­sicht - oder auch hier wie­der der eng­li­sche Begriff Pagi­na­tion - zu ver­se­hen. Irgend­wie navi­giert man hier doch sehr blind hin und her.

jQuery

Ich bin kein Pro­gram­mie­rer, nie gewe­sen, werde ich sicher­lich auch nicht mehr sein. Den­noch oder gerade des­halb ist jQuery rela­tiv logisch und des­halb ein­fach, beson­ders wenn man sich mit CSS aus­kennt. Das kom­plette Skript für meine kleine Spie­le­rei hier umfasst ganze 7 Zei­len.

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

Es exis­tiert eine große Liste, die wie­der­rum kleine Unter­lis­ten ent­hält. Diese Unter­lis­ten beinhal­ten die Zusam­men­fas­sung und die Tags und besit­zen die CSS-Klasse “.exerpt”. Wenn die Seite gela­den ist (Zeile 1) wer­den alle Lis­ten mit die­ser Klasse ver­steckt (Zeile 2). Der Link der als Trig­ger dient besitzt die CSS-ID #toggle. Zeile 3 im Skript lei­tet eine neue Funk­tion ein, wenn eben jeder Link mit der ID #toggle geklickt wird. Zum einen wer­den die vor­her ver­steck­ten Lis­ten ein­ge­blen­det - genauer gesagt in einer 500 mili­se­kun­den­lan­gen “Ani­ma­tion” (Zeile 4) und in Zeile 5 wird schließ­lich der Link als HTML-Element deak­ti­viert, damit der Brow­ser nicht dem Link folgt. Viel ein­fa­cher geht es kaum. Das alles war nach 10 Minu­ten lesen der Doku­men­ta­tion und der ers­ten Tuto­ri­als der offi­zi­el­len Seite geschrie­ben. Für den Anfang reicht mir das erst­mal, die tie­fe­ren Funk­tio­nen wol­len etwas aus­gie­bi­ger als 10 Minu­ten getes­tet wer­den.

Zum gleichen Thema

• zweite Auszeit des JahresFundstücke

• Eintrags-DetailsCSS

• Blick zurückFundstücke

• PionierarbeitFundstücke

• Gestaltung und Philosophie für cold-heat.deOff-Topic

• ein typischer MontagseintragFundstücke

• zu viel SorgfaltZeugs