Bernhard Häussner

Blogpopst-Previews

26.07.2009, 16:42
Blogpost Tooltips

Blogpost Tooltips

Heute hatte ich mal wieder einen Einfall, was meinem Blog noch fehlt, also außer dem Refactoring der MySQL API. Irgendwie nicht zufriedenstellend waren nämlich die Post-Listen in der Sidebar, da durch das Datum neben dem Titel kaum eine Überschrift in eine Zeile gepasst hat. Nun habe ich das Problem „gelöst“, indem bei Mouseover ein Tooltip mit Meta-Infos angezeigt wird.

Das Ganze läd von einer simplen PHP-Schnittstelle mit AJAX bzw. „AJAJ“ (J für JSON) die Metadaten, also die Anzahl der Kommentare und die Tags, aber auch einen kleinen Textausschnitt („Teaser“). Mit jQuery geht das recht fix und mit wenig Code. Auch die Anzeige als Tooltip war recht einfach. Die runden Ecken werden im Firefox mit -moz-border-radius gemacht und auch die Transparenz wird von der CSS-Eigenschaft opacity geregelt, sodass kein weiteres Hintergrundbild nötig ist. Mit if ($(bla).width()<400) wird verhindert, dass bei genug Platz das Datum entfernt wird, zu sehen auf der Seite Archiv. Dank jQuery bleibt es bei 29 Zeilen JS-Code.

Auch der PHP-Teil ist recht simpel und besteht eigentlich nur aus einer SQL-Abfrage und der Funktion json_encode(), das sind dann 16 Zeilen.

Jetzt bin ich nur gespannt, wie sich das auf den Traffic bzw. die Reqeusts auswirkt, da jedes mal, wenn jemand über einen Link fährt, ein Request an den Server gesendet wird.

Achja, bisher gab es auch keine ausgefeilten 404-Seiten, aber jetzt gibt es eine Fehlerseite, die z.B. auch einen Link zur Suche anbietet.

Update 2009-08-01

Ich habe jetzt auch noch meine Lightbox an das Look & Feel der Blogpopst-Previews angepasst, sodass sie jetzt nicht nur individuell, sondern auch (im Firefox) gut aussehend ist. Außerdem läd sie jetzt keine Graphiken mehr, nur um „prev“, „next“ und „close“ anzuzeigen. Zu testen hier:

Obwohl ich es eigentlich nicht so mag, in jQuery Plugins herumzubasteln, habe ich doch eine ganze Passage gerefactort und hoffe jetzt einfach mal, dass es auch im IE noch halbwegs klappt.

Kurze URL http://1-co.de/b/1H. Post to twitter

Kommentare

keine





 
Χρόνογραφ
© 2008-2014 by Bernhard Häussner - Impressum - Login
Kurz-Link zu dieser Seite: http://1-co.de/b/1H