kick-image.at - Webdesig | CMS | Printdesign, c/o Reynhard Boegl, A - 4020 Linz, Herrenstrasse 7, Tel.: +43 (0)676 75 63 079, Web: www.kick-image.at

kick-image

High End Webdesign

Archiv des Begriffes "jQuery"

Hier finden Sie alle Beiträge welche dem Begriff "jQuery" zugeordnet sind.

jQuery Plugin “Simple Slider”

simplesliderSeit 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 ;-)

Tweet! – Twitter- Stream mit jQuery

tweetTwitter und Facebook – DIE Social Network Plattformen mit absolutem Boom- Faktor, und dieser ist nun auch bei uns angekommen.

So mancher will nun seine hart erarbeiteten Twitter- Beiträge (”Tweets”) auch in seinem Blog oder auf seiner Website herzeigen.

Eigentlich sehr einfach, Twitter selber bietet hierfür eigene Apis bzw. Widgets an. Flexibler und schneller verspricht dies aber “Tweet!”, ein kleines und schnell geladenes jQuery- Plugin.

Und wirklich, die bisherigen Tests ergaben keine bis kaum Verzögerungen beim Laden und Aufbau der Webseite. Die Tweets werden quasi im Hintergrund bzw. parallel geladen und danach sofort dargestellt.
Einige Einstellungen und die standardkonforme Auflistung (als “ul – unordered list”) der Tweets läßt auch viel Spielraum bei der optischen Einbindung, und mit ein wenig Schrauberei direkt im Plugin ist sogar die Zeitangabe u.ä. in deutscher Sprache möglich.

Aktuell haben wir dieses Script auf “Gesund mit Hausmittel” eingebunden und testen noch ausgiebig, aber in den ersten Tagen wurden die Versprechungen (”small size and fast download time – will not slow down or pause your page while tweets are loading – display up to 100 tweets, as permitted by the twitter search api…”) erfüllt.


Alles ist unter der sehr großzügigen “MIT”- Licence auf der Site http://tweet.seaofclouds.com erklärt, vorgeführt und zum Download verlinkt.

Kleine Menü- Animation mit jQuery

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.

CSS mit jQuery nachladen

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 ;-)

jQuery – Anleitungen / Tutorials

jquery.jpgjQuery, ein freies und sehr umfangreiches JavaScript- Framework (Info bei wikipedia), wird auch bei uns immer mehr eingesetzt. Nie war es so einfach, Effekte und Animationen auf Websites einzusetzen.
Einige Lehr- Bücher sind schon erhältlich, die in deutscher Sprache lassen aber noch etwas auf sich warten.

Aber es gibt ja im WWW unzählige Seiten mit Anleitungen und Plugins, hier eine lose Liste derer, die wir so in letzter Zeit gefunden haben:

Vor allem die beiden letzten Links sind sehr interessant. Und wie immer bei solchen Listen besteht nicht der geringste Anspruch auf Vollständigkeit!


Viel Spaß beim studieren…

Archiv / Übersicht

zur Weblog Startseite

Nach Begriffe sortiert ("Tag Cloud"):

2011

2010

2009

2008

2007

2006