NetAndif

Es sind ja diverse Javascripts, um ‘Schneefall’ in die eigene Homepage oder den Blog einzubauen, im Internet erhältlich.
Als ich mich kürzlich vor die Aufgabe gestellt sah, eines dieser Schneefall-Skripts in eine Webseite zu integrieren, tauchten dabei Probleme mit unterschiedlichen Browsern auf. Über Umwege bin ich nun wieder mit dem Thema in Berührung gekommen bin, und fand ein Wordpress-Plugin, welches die Aktivierung des Schneefalls halt per Plugin statt Einbinden als Javascript, sowie sogar die Einstellung der Grafik für den ‘Schnee’ ermöglicht. Das Problem mit dem Plugin ist aber, dass es nicht mit den Smarty-Templates von CornBlogs zusammenarbeitet, und somit leider nutzlos ist.
Dennoch habe ich den Javascript-Code, welchen das Plugin verwendet, als .js Datei gespeichert und festgestellt, dass sich dieses von www.dynamicdrive.com stammende Skript problemlos verwenden und sehr einfach in die eigene Seite einbauen lässt, sowie anscheinend auch in den meisten (modernen) Browsern funktioniert.
Hier das Skript in Aktion: Samselt-Blog und dummfug.de

Download: snow1.zip (Skript, Grafik und Readme als zip-Datei gepackt)

To-Do: Ein Smarty-Plugin inklusive der Möglichkeit, Variablen an das Skript zu übergeben…

Update: Smarty-Plugin nun vorhanden
Siehe http://de.cornblogs.com/admin/?p=96

Auf der Suche nach diversen Javascripts bin ich mal wieder auf eine echt geniale Sache gestossen. Das Skript nennt sich ‘Nifty Corners’ und bietet abgerundete Ecken (rounded corners) für HTML Elemente.
Am besten funktioniert das Ganze mit DIVs, für welche jeweils eine bestimmte ID vergeben werden muss. Vorteilhaft ist, wenn der eigentliche Inhalt durch dieses zusätzliche DIV umschlossen wird.
Das Abrunden der Ecken erfolgt mit einer Kombination aus CSS und Javascript, welche im HTML Dokument geladen werden müssen. Dann fügt man noch eine kleine js-Funktion ein, welche die IDs der abzurundenden Elemente erhält. Beim Laden der Funkion (z.B. body onload=…) tritt die Umwandlung in Kraft.
Soweit so gut. Es hat sich jedoch herausgestellt, dass durch das verzögerte Laden des Seiten-Inhalts die Umwandlung in abgerundete Ecken sich ebenfalls verzögert. Dieser Effekt ist natürlich unschön. Vielleicht liegt es ja nur an meinen Browsern (IE und FF).
Wie auch immer, um das Problem zu eleminieren, habe ich eine kleine Idee umgesetzt: das DIV, welches den Inhalt enthält, wird standardmässig auf visibility: hidden gesetzt. Im Header der Seite wird per Javascript vor dem Laden der nifty - Funktion das DIV sichtbar gemacht. Dadurch erscheint das DIV erst, wenn der Inhalt komplett geladen ist. Um die Ladezeit zu ‘überbrücken’, habe ich nun noch ein absolut positioniertes SPAN Element mit einer ‘Laden’ Anzeige eingebaut, welche nach dem Laden des Inhalts automatisch ausgeblendet wird (ebenfalls im Skript im Header).

Witzig, oder?
Ok, ich weiss, man hätte sich das ganze auch sparen können indem man einfach Grafiken für die abgerundeten Ecken genommen hätte, aber…

Links:

• Nifty Corners
• Showing and hiding layers

Wieder einmal benötigt der verbreitetste Browser besondere Aufmerksamkeit. Hier eine Zusammenfassung meiner letzten Erkenntnisse über die Eigenheiten des Internet Explorers:

• INPUT, FORM und SELECT Tags stellt der IE inklusive vordefinierter Abstände dar. Deshalb muss man im Style explit margin=0 und padding=0 angeben.
• Auch für BODY und HTML müssen margin=0 und padding=0 definiert werden, will man keine Abstände haben
• Die Ausrichtung von Text in Tabellen und DIV’s muss definiert sein (z.B. text-align: left), ansonsten zentriert der IE den Text standardmässig
• Javascript Code in Links funktioniert oft nicht, obwohl alle anderen Browser damit kein Problem haben. Der IE bringt einen Syntax Error, und zwar immer in Zeile 1, Zeichen 6. Ursache bisher nicht gefunden.