Kategorien
JavaScript & jQuery Programmierung

Animiertes Scrollen mit jQuery

Sie klicken auf einen Link und anstatt einfach zum entsprechenden Anker zu springen, wird sanft zum gewünschten Anker gescrollt. Ich sehe diesen Effekt in letzter Zeit immer öfter und war erstaunt, wie einfach er mit jQuery umgesetzt werden kann. Selbst die Erhaltung der „richtigen“ URL (www.url.de#anker) stellt keine Probleme dar. Demo im neuen Fenster

jQuery Code

$(document).ready(function() {
	$('a[href*=#]').bind("click", function(event) {
		event.preventDefault();
		var ziel = $(this).attr("href");

		$('html,body').animate({
			scrollTop: $(ziel).offset().top
		}, 2000 , function (){location.hash = ziel;});
});
return false;
});

Erkläuterung

$(document).ready(function() {

Der Effekt soll natürlich erst angewendet werden, wenn die Seite fertig geladen ist.

$('a[href*=#]').bind("click", function(event) {

Mit a[href*=#] wählen wir alle Links aus, deren Ziel mit einer Raute beginnt, also alle Anker-Links. Mit der bind() Funktion binden wir den folgenden Code an das Klick-Ereignis der Links, so dass er nach dem Klick ausgeführt wird.

event.preventDefault();

Der Code wird jetzt zwar erst nach dem Klick ausgeführt, jedoch versucht der Browser immer noch zuerst zum Anker zu springen, was zu einem Flackern vor dem Scrollen führt. Dieses Standardverhalten wird durch die preventDefault() Methode unterbunden. Beispiel zum Flackern

var ziel = $(this).attr("href");

Um gleich einfacher auf das Link-Ziel zugreifen zu können, wird dieses in die Variable „ziel“ geschrieben.

$('html,body').animate({

Nun wählen wir den Bereich aus, den wir animieren wollen, die komplette Seite, als html. Da der Browser Safari den html-selektor nicht erkennt, muss noch „body“ angehängt werden. Die Seite wird nun mit der animate() Funktion animiert.

scrollTop: $(ziel).offset().top

Die scrollTop() Funktion scrollt zu dem Wert, der ihr übergeben wird. scrollTop(400) würde die Seite beispielsweise um 400 Pixel nach unten scrollen. Die genaue Position des Ankers, zu dem wir scrollen wollen, bekommen wir mit der offset() Funktion. Mit ihr kann die genaue Position eines Elementes von links und von oben im Dokument ermittelt werden. Da wir hier nur den Abstand von oben benötigen, nutzen wir „offset().top“.

}, 2000 , function (){location.hash = ziel;});
});
return false;
});

Die Zahl nach der Klammer gibt die Dauer der Animation in Millisekunden an (duration). Jetzt kommt die meiner Meinung nach wichtigste Funktion ins Spiel. Die Callback-Funktion der Animation wird ausgeführt, sobald die Animation vollständig beendet ist, also wenn die Seite zum gewünschten Anker gescrollt ist. Diese Funktion brauchen wir, da wir ja das Standardverhalten des Links unterdrückt haben, also den Sprung zum Anker und die Anpassung der URL. Mit location.hash setzen wir eine neue Textmarke und passen so die URL an. Ohne diese Funktion würde der Anker beim Klick nicht an die URL angehängt.

Beispiel

Ausgangs URL
www.url.de

Nach Sprung zu einem Anker OHNE location.hash
www.url.de

Nach Sprung zu einem Anker MIT location.hash
www.url.de#anker

Fazit

Es darf über die Notwendigkeit dieses Kniffs gestritten werden, ich persönlich halte ihn für einen ansprechenden und interessanten Effekt, der in vielen Seiten gut zur Wirkung kommt und dem Benutzer vielleicht auch besser verdeutlicht, wo er denn nach einem Klick landet. ™

Ergänzung für Opera

Da ich durch den Kommentar von NightWalker auf das Fehlverhalten in Opera hingewiesen wurde ist hier nun der für Opera optimierte Code.

$(document).ready(function() {
	$('a[href*=#]').bind("click", function(event) {
		event.preventDefault();
		var ziel = $(this).attr("href");
                
                if ($.browser.opera) {
                    var target = 'html';
                }else{
                    var target = 'html,body';
                }

		$(target).animate({
			scrollTop: $(ziel).offset().top
		}, 2000 , function (){location.hash = ziel;});
});
return false;
});

Opera Demo im neuen Fenster

Kategorien
JavaScript & jQuery Programmierung

jQuery (und andere Frameworks) direkt via Google Code einbinden

Jedem der jQuery schon einmal benutzt hat ist die lokale Einbindung mittels <script type=“text/javascript“ src=“js/jquery-1.3.2.js“></script> bekannt. Es gibt allerdings eine Möglichkeit das Framework zu nutzen ohne es lokal zu speichern. Google Code stellt mit den Google AJAX Libraries API das jQuery Framework in der aktueller Version, sowie ältere Ausgaben zum direkten Einbinden bereit. Das spart Traffic und verringert die Ladezeit. jQuery kann auf zwei Arten eingebunden werden.

Einbinden mit direktem Link

Diese Art der Einbindung stellt sich als vertraut dar. In dem Aufruf

<script type="text/javascript" src=" "></script>

wird als Quelle (src=) nicht wie gewohnt der Pfad zum lokalen Speicherort von jQuery angegeben, sondern die URL von Google.

http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js

Somit sieht der komplette Aufruf wie folgt aus:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

Live Demo im neuen Fenster

Durch den direkten Link ist nur eine Anfrage an den Server notwendig um jQuery einzubinden, somit ist diese Methode (in meinen Tests) schneller als die unten vorgestellte Methode mit google.load().  Auf diese weiße lassen sich natürlich auch andere Versionen von jQuery einbinden. Google stellt momentan (Stand 22.06.09) folgende Versionen bereit:

Version 1.2.3
http://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js
Version 1.2.6
http://ajax.googleapis.com/ajax/libs/jquery/1.3.6/jquery.min.js
Version 1.3.0
http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js
Version 1.3.1
http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js
Version 1.3.2
http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js

Einbinden mit google.load()

Die andere Möglichkeit ist die Einbindung mittels google.load(). Hier wird zuerst durch den folgenden Befehl die AJAX Libraries API von Google eingebunden um die google-load() Funktion nutzen zu können.

<script type="text/javascript" src="http://www.google.com/jsapi"></script>

Nun kann jQuery folgendermaßen eingebunden werden.

<script type="text/javascript">
// jQuery laden
google.load("jquery", "1.3.2");
</script>

Live Demo im neuen Fenster

Da hier zuerst die AJAX Libraries API von Google geladen wird sind zwei Anfragen an den Server notwendig, was diese Methode etwas langsamer macht als einen direkten Link.  Durch den direkten Link ist nur eine Anfrage an den Server notwendig um jQuery einzubinden, somit ist diese Methode (in meinen Tests) schneller als die unten vorgestellte Methode mit google.load(). Auch hier stehen natürlich die folgenden Versionen zur Verfügung.

Version 1.2.3
google.load(„jquery“, „1.2.3“);
Version 1.2.6
google.load(„jquery“, „1.2.6“);
Version 1.3.0
google.load(„jquery“, „1.3.0“);
Version 1.3.1
google.load(„jquery“, „1.3.1“);
Version 1.3.2
google.load(„jquery“, „1.3.2“);

Diese Methode bietet sich vor allem an wenn mehrere Frameworks eingebunden werden sollen. Die google.load() Funktionen können einfach nacheinander ausgeführt werden. Beispiel:

<script type="text/javascript">
google.load("jquery", "1.3.2");
google.load("prototype", "1.6");
google.load("scriptaculous", "1.8.2");
google.load("mootools", "1.2.3");
</script>

Versionsauswahl

Bisher war die Rede davon die gewünschte Version durch die komplette Versionsnummer auszuwählen, Google bietet jedoch noch andere Möglichkeiten. Wird anstatt der Vollständigen Nummer „1.2.3“ nur „1.2“ angegeben wählt Google die die neuste verfügbare Version dieses Zweiges(1.2) aus, hier also „1.2.6“. Somit bewirkt die Angabe von „1“ dass hier die Version „1.3.2“ eingebunden wird. Diese Versionssemantik funktioniert bei beiden Arten der Einbindung.

Google stellt nicht nur jQuery zur Verfügung

jQuery ist jedoch nicht das einzige Framework, dass sich von Google einbinden lässt. Google stellt momentan(Stand 22.06.09) folgenden Frameworks zur Verfügung:

  • jQuery
  • jQuery UI
  • Prototype
  • script.aculo.us
  • MooTools
  • Dojo
  • SWFObject
  • Yahoo! User Interface Library (YUI)
  • Ext Core

Die Einbindung der verschiedenen Frameworks geschieht auf die gleiche Weise wie sie hier exemplarisch für jQuery beschrieben wurde. (sl)

Kategorien
JavaScript & jQuery Programmierung

50+ nützliche Plugins für jQuery

Diese Sammlung enthält mehr als 50 nützliche Plugins für das schnelle und beliebte JavaScript-Framework „jQuery“. Das Ganze ist bunt gemischt und bietet Plugins zu den verschiedensten Einsatzbereichen von jQuery. Einen Anspruch auf Vollständigkeit bietet diese Liste nicht.

Canvas Rounded Corners
Abgerundete Ecken für DOM-Objekte mit dem Element „canvas“.

CrossSlide
Stellt verschiedene Standard-Animationseffekte für Slideshows zur Verfügung.

SpaceGallery
Gallery, die ein wenig an „Time Machine“ auf dem Mac erinnert.

ZoomImage
Zoom für einzelne Bilder mit der Möglichkeit zum Durchblättern und verschiedenen Optionen.

FancyBox
Weiteres Zoom-Plugin für Bilder, bietet auch die Möglichkeit, Videos von YouTube oder anderen Diensten einzubinden.

Facebox
Facebook ähnliche Lightbox mit verschiedenen Verwendungsmöglichkeiten.

Masked Input Plugin
Ermöglicht es, die Input-Felder von Formularen zu maskieren, um den User zur Eingabe in einem bestimmten Format zu zwingen.

jQuery Corners
Ein weiteres Plugin zur Erzeugung von runden Ecken.

sIFR-Plugin
Ermöglicht es, Text durch Flash-Text (sIFR) zu ersetzen.

Gallerific
Schlankes Galerie-Plugin (Vorstellung bei Dr. Web)

Select Box Factory
Eine schicke Auswahlbox mit zahlreichen Features.

scrollable
Stellt die Möglichkeit horizontalen Scrollens für HTML-Elemente bereit, zum Beispiel horizontale Video-Playlisten.

overlay
Bietet Overlay-Funktionalität mit einigen Optionen zur Gestaltung an.

expose
Expose-Funktion für verschiedene Elemente wie Videos und Bilder.

Pirobox
Image-Zoom und Gallery-Funktionen mit einigen schicken Möglichkeiten.

jCarousel
Objektkarusell für vertikalen und horizontalen Einsatz, bringt verschiedene Optionen mit.

jquery.combobox
Combobox mit jQuery die sich vollständig mit CSS stylen lässt.

CSS3-Clock
Eine Analoguhr mit CSS3 und jQuery.

jClock
Einfache Zeitausgabe.

ClockPick
Timepicker für jQuery, nicht zu verwechseln mit Datepickern.

jQuery Feed Menüs
Schickes Feed-Menü, welches das aus den Browsern bekannte imitiert.

Impromptu
Einfaches UI-Element um Alerts und Eingabe-Aufforderungen zu ersetzen.

tablesorter
Plugin für clientseitiges Sortieren von Tabelleninhalten.

DateRangePicker
Modifizierter DateRangePicker mit Shortcuts und Anpassung für große Datenmengen.

jQuery File Tree
Stellt einen Dateibaum für das Filebrowsing zur Verfügung.

s3slider
Stellt unter anderem Animationseffekte für Slideshows bereit.

Coda Slider Effect
Imitiert den Slider-Effekt aus der Mac-Software Coda von Panic.

jQuery Timers
Simples Timerplugin für jQuery.

Jeditable
Lässt den User Inhalte direkt an Ort und Stelle editieren, statt Formulare zu öffnen.

innerfade
Stellt Fader-Effekte für beliebige Elemente zur Verfügung.

Jcrop
Cross-Plattform „Imagecropping“ für nahezu jede Webapplikation.

jRails
Macht Rails-Methoden in jQuery nutzbar.

autocomplete
Automatische Vervollständigung mit Caching zur Reduzierung von Serveranfragen.

jQuery Form Plugin
Gibt eine Rückmeldung über den Versand von Daten via Formular.

jScrollPane
Ermöglicht die Kontrolle über Scrollbars im Browser.

BlockUI
Einfache Blockade des User-Interface mit einigen Optionen.

browserDetect
Eine Browser-Weiche mit jQuery als Ersatz für CSS-Browserweichen.

jTemplate
Eine Template-Engine für Javascript als Plugin für jQuery.

seekAttention
Experimentelles Plugin, um die Aufmerksamkeit des Besuchers auf bestimmte Objekte zu lenken.

Context Menu Plugin
Ermöglicht es, eigene Kontextmenüs zu gestalten.

jScroller
Ein Autoscroller für verschiedene Zwecke.

jQuery Marquee
Eine jQuery-Alternative zur Verwendung der Variante unter CSS 3.

jQuery.utils
Eine Sammlung von Standard-Plugins für jQuery.

jwysiwyg
Ein WYSIWYG-Editor als Plugin für jQuery.

ListNav-Plugin
Ein Plugin für Listennavigationen mit alphabetischer Reihenfolge.

Modalpreview
Vorschau des Inhalts einer Textarea vor dem absenden

jQuery Fling
Stellt einen Eventlistener bereit, der es ermöglicht auf Aktionen mit mehreren Ereignissen zu reagieren.

Path
Das Plugin ermöglicht die vereinfachte Arbeit mit Pfaden, zum Beispiel im Zusammenspiel mit Navigationen.

Star Rating
Stellt die notwendigen Funktionen für Bewertungssternchen bereit.

Flexigrid
Ein flexibles Datagrid auf jQuery-Basis kann unter anderem auch direkt mit XML-Dateien arbeiten.

Simple Tree
Stellt eine einfache Baumstruktur mit Drag&Drop bereit.

hoverIntent
Verzögerte Reaktion des mouseOver-Effekts, sodass die „hover“-Aktion nur beim Verharren der Maus ausgelöst wird.

Flip!
Eine Box die sich nach den Anweisungen drehen lässt und verschiedene Inhalte beherbergen kann.

Galleria
Eine weitere einfache Image-Galerie.

jQuery Corner Gallery
Eine Sammlung von verschiedenen Ecken für Elemente, mehr als nur rund.

iPod-style Drilldown Menu
Ein Menü mit Imitation des Effekts auf den iPods.

Autobox
Eine dynamische Textbox mit Auto-Ergänzung. Ähnlichkeit zur Inputkontrolle bei Facebook und Apple Mail.

Lightbox
Einfaches und häufig verwendetes Lightbox-Plugin für jQuery. ™