kick-image

Seit dem Siegeszug der JavaScript- Bibliothek “jQuery” sind sie kaum mehr weg zu denken: “Bilder- / Inhaltsslider” in allen Variationen.

Auch technisch gesehen sind viele unterschiedliche Anwendungen zu finden, eine sehr empfehlenswerte ist diese: SimpleSlider – A simple, semantic and CSS driven slider (www.madebyrendr.com…simpleslider).

Ja, es stimmt, einfach ist das Teil, auch in der Anwendung. Ob semantisch korrekt liegt in der Verwendung der HTML- Elemente, mit CSS läßt sich jedoch wirklich so gut wie alles optisch anpassen!

Aufgrund einiger Beispiele und guter Dokumentation ist die Umsetzung ein Kinderspiel, eine unserer Anwendungen ist ein Slider mit den Partner- Banner von “Gesund mit Hausmittel”.

Tja, mehr gibt es dazu nicht zu sagen, einfach, effektiv und schön – darum diesmal ein etwas kürzerer Beitrag ;-)

• Dienstag, 27.04.2010, 11:42 Uhr
• Trackback-URL
• Permalink
• Tags: CSS, jQuery
• Kommentare lesen/schreiben

Aus dem hohen Norden, genauer gesagt aus Copenhagen, kommt ein sehr interessantes Add-On für den Mozilla Firefox, der CSS Reloader.

Wie der Name schon aussagt macht diese Erweiterung nichts anderes, als das/die CSS (Cascading Style Sheet) neu zu laden.

“Gut, warum sollte ich dafür ein Add-On installieren, da reicht ja die Funktionstaste F5, die lädt das CSS auch neu.”
Gut gedacht, arbeitet man aber an einer Seite, welche ihre Inhalte per Ajax nachlädt, sieht die Sache schon anders aus. Nachdem man sich da mühsam durch allerlei Ebenen zu der zu Bearbeitenden durchgekämpft hat, würde ein Reload der kompletten Seite (F5) den gesamten Weg wieder von vorne beginnen lassen.

Mit dem “CSS Reloader” aber wird, anders als beim Seiten- Reload, wirklich nur das CSS neu geladen, die Inhalte, ob per Ajax nachgeladen oder direkt in der Seite implementiert, bleiben erhalten.

Es ist auch ganz interessant zu zusehen, wie die Seite sozusagen “nackt” wird, dann wird das CSS neu geladen und die Seite bekommt wieder Form.

Eine sehr praktische Erweiterung für Webworker, für CSS- Entwickler aber beinahe ein Pflicht- Tool!

• Freitag, 12.02.2010, 09:44 Uhr
• Trackback-URL
• Permalink
• Tags: CSS, Gratis
• Kommentare lesen/schreiben

Noch nicht sehr lange im Einsatz, aber trotzdem schon des öfteren nachgefragt: wie funktioniert die kleine Animation beim “MousOver” über die oben ersichtlichen Menü- Punkte.

Es ist leichter als vermutet, eine kleine Spielerei mit CSS- Eigenschaften, gesteuert vom JavaScript- Framework jQuery.

Doch mal ganz von Vorne: für jQuery- Anwendungen benötigt man nat. jQuery ;-)
Diese läßt sich bequem über die Googleapis einbinden oder nach Download auf der jQuery- Site auf dem eigenen Webspace hosten inkl. passender Einbindung.

Ersteres:<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>Zweiteres sollte keiner Erklärung bedürfen…

Unser Menü ist, wie es sich gehört, als “Unordered List” – als <ul>eingebunden:
<ul id="menue">
<li><a href="kundenliste.html">Referenzen</a></li>
<li><a href="weblog">Weblog</a></li>
...
</ul>

Mit diversen CSS- Anweisungen wurde die Liste quergelegt und in der Optik an unsere Vorstellungen angepasst. Dies soll jetzt nicht Inhalt dieses Post sein, es geht alleine um die Animation.

Und diese ist schnell niedergeschrieben:
Nach dem obligatorischen$(document).ready(function(){

(dies am Ende wieder schließen nicht vergessen ;-)) schreiben wir:
$('ul#menue li a').hover(function(){
$(this).stop().animate({paddingTop: '40px', paddingBottom : '10px'}, 100);
}, function(){
$(this).stop().animate({paddingTop: '50px', paddingBottom : '0'}, 500);
});

Zur Erklärung:$('ul#menue li a').hover(function(){Hier wählen wir das richtige Element (ein Link in einem Listenelement in der Liste mit der ID “menue”) und legen fest, das das folgende bei “Hover”, also bei Berührung mit der Maus passieren soll.

$(this).stop().animate({paddingTop: '40px', paddingBottom : '10px'}, 100);Und hier der Reihe nach:

“this” sagt “mach das Folgende mit dem gerade gewählten Element”,
“stop” beendet eventuell in einer Schleife geratene Animationen,
“animate” erzeugt einen fließenden Übergang zu den in der Klammer definierten CSS- Werten,
“paddingTop” und “paddingBottom” erklärt sich von selber und die abschließende Zahl gibt die Geschwindigkeit der Animation an.

Kurz gesagt: ändere innerhalb von 100 Millisekunden den Abstand oben und unten – der verlinkte Text bewegt sich.

Die letzte Zeile dreht die ganze Animation wieder um, d.h. wenn ich mit der Maus den Link verlasse werden innerhalb von 500 Millisekunden  die Abstände oben und unten wieder zu den Ursprungswerten geändert.

Eine sehr einfache Sache, schnell geschrieben und bei deaktiviertem JavaScript seitens des Besuchers passiert nichts und die Navigation ist trotzdem funktionstüchtig.

• Donnerstag, 19.11.2009, 19:53 Uhr
• Trackback-URL
• Permalink
• Tags: CSS, jQuery
• Kommentare deaktiviert

Aktuell arbeiten wir an einem “Snippet”- System für unser CMS “Self!Service lite”. Damit wird es möglich sein, kleinere Funktionen und Darstellungen direkt über das CMS in den Inhaltsbereich zu laden. Dies werden vor allem div. Media- Player u.ä. sein, aber auch einige Darstellungsänderungen per Javascript und jQuery sind in Planung.

Und da werden auch oft passende CSS- Anweisungen benötigt. Hierbei den Administrator zu nötigen, diese manuell im Head der Datei zu verlinken wollten wir vermeiden. Also auch per Javascript nachladen, nur wie?

Nach einigen Versuchen war die Lösung gefunden, so einfach wie unspektakulär:
$.get("style.css", function(css) {
$("head").append("<style type='text/css'>"+css+"</style>");
});

Der Inhalt der “style.css” wird hiermit in den “Head” des HTML- Dokumentes geschrieben und ist, je nach zeitlicher Abfolge verfügbar.

Und wieder einmal: die einfachen Dinge sind oft so einfach ;-)

• Dienstag, 15.09.2009, 14:45 Uhr
• Trackback-URL
• Permalink
• Tags: CSS, jQuery
• Kommentare deaktiviert

Die Installation eines neuen Wordpress- Weblog ist eigentlich recht einfach gehalten, dafür sorgt die bekannte “1-2-3″- Installtionsroutine.

Beim Layout ist dies jedoch schon etwas aufwändiger. Will man nicht eines der unzähligen kostenlosen Themes verwenden bleibt meist nur eines: das am besten geeignete Theme Suchen und Umgestalten.

Da dies oft der arbeitsintensivste Teil einer Neugestaltung ist – viele Elemente sind nur aus layouttechnischen Gründen so in die Theme- Dateien geschrieben worden und beim eigenen Layout oft nicht nötig oder störend – hat sich so mancher Webdesigner schon seine eigene “Null- Version” als Ausgangsbasis erstellt.

Eine solche “Null- Version” ist nun auch online zu haben: www.elliotjaystocks.com/starkers

Kostenlos, unter GPL- Lizenz und wirklich beinahe “nackt” wurde dieses Theme von Elliot Jay Stocks, Designer aus Cheshire (England) zum Download bereit gestellt.

Wir bedanken uns herzlich dafür!

P.S.: Unsere erste Anwendung – das Gesundheitsportal “Gesund mit Hausmittel”

Grafik © 2009 by Elliot Jay Stocks

• Freitag, 14.08.2009, 16:40 Uhr
• Trackback-URL
• Permalink
• Tags: CSS, WordPress
• Kommentare lesen/schreiben