Coole Sideboxen

In Web

Obwohl ja morgen der CSS Reboot ansteht, haben meine Änderungen damit nichts zu tun. Schließlich habe ich auch kein vollständiges Redesign durchgeführt, sondern nur den Sidebar rechts verhübschelt.
Der Grund dafür liegt darin, dass ich auch einen Link zu meinem eigenen Spreadshirt-Shop mit dem schönen Namen Blogshirts in den rechten Seitenbalken integrieren wollte. Da dieser aber schon ziemlich voll ist und immer unübersichtlicher wurde, wurde es Zeit, daran etwas zu ändern.

Als erstes habe ich deshalb die ganzen einzelnen Blöcke in Rahmen gesteckt. Das macht es aber nicht kleiner, deshalb musste noch mehr her.
Da zurzeit JavaScript verbandelt mit XMLHttpRequest (aka AJAX) mit hübschen Client-seitigen Effekten ziemlich in ist, wollte ich auch damit etwas rumexperimentieren. Reine Technikverliebtheit, gebe ich gerne zu. Allerdings habe ich auch vor, dass evtl. demnächst in echten Kundenprojekten einzusetzen, dafür kann ich hier ja auch rumspielen. Nur für den Sidebar brauchte ich aber kein AJAX, sondern nur etwas JavaScript, das ich mir der Bibliothek sript.aculo.us entliehen habe. Mit Hilfe der Effekte daraus kann man jetzt die Boxen auf die Titelzeile zusammenschrumpfen. Das sieht dann so aus:

Schrumpfend:

Und komplett kollabiert:

Leider kann man nicht wirklich gut Screenshots von der Animation machen, also probiert es einfach mal aus.

Da es sinnlos wäre, dies einfach nur zu kollabieren, muss die Einstellung auch gespeichert werden. Auch dazu habe ich mich wieder fremder Quellen bedient, diesmal der Cookie-Library von Netspade. Die habe ich genommen, weil es der erste Hit bei Google war und direkt passte, besondere Gründe dafür gibt es nicht. Für jede Box wird die Einstellung (kollabiert oder expandiert) in einem Cookie gespeichert.

Echtes AJAX gibt es dafür jetzt in der Suchbox, die nun eine Live-Suche ist:

Das habe ich aber nicht mit script.aculo.us ausgeführt, obwohl dies auch gegangen wäre, sondern das fertig existierende Livesearch-Plugin von Rob Sable genommen, dessen Live-Archive-Plugin hier schon länger erfolgreich seinen Dienst versieht.

Allerdings habe ich durch diese gesamten Erweiterungen nun so viel unterschiedlichen Javascript-Code in den Seiten, dass es langsam an der Zeit wird, dieses mal zu konsolidieren und alles auf eine einheitliche Basis zu stellen, die in meinem Fall wohl dann Script.aculo.us und die Prototype Javascript Library (die auch Script.aculo.us benutzt) werden wird. Aber das hat noch ein paar Wochen Zeit, bis dahin hoffe ich, dass die jetzigen Änderungen gefallen. Und wer weiß, evtl. baue ich dann auch eine ajax-ified Kommentarabgabe ein.