Bei der Verwendung von JavaScript in einer Webseite ist es nach wie vor wichtig, dass man die mächtige Scriptsprache “unobtrusive” (engl.: unaufdringlich) einsetzt. Das bedeutet, dass die eingebundenen Funktionen nur aufgerufen und genutzt werden, wenn der Browser dies unterstützt. Kann der Browser JavaScript nicht verwenden, kommen stattdessen die standardmäßig vorhandenen HTML-Funktionen zum Einsatz. So wird gewährleistet, dass die Benutzung der Seite mit als auch ohne clientseitigem Scripting funktioniert.Normalerweise präpariert man in diesem Sinne zunächst die HTML-Funktionen und lädt die gewünschten JavaScript-Funktionen über den Eventhandler onload dazu. Die Webseite wird dadurch zunächst vom Browser normal geladen, erst nach Abschluss des Ladevorgangs werden die JavaScript-Funktionen hinzugefügt, welche nachträglich einige Standardfunktionen (z. B. Hyperlinks) ergänzen oder ersetzen. Jeremy Keith hat diesem Thema in seinem (hervorragenden) Buch Dom Scripting ganze Kapitel gewidmet. In einem Beispiel-Abschnitt seines Buches beschreibt er unter anderem diese Unaufdringlichkeit.
Der Anwendungsfall
Beim Redesign der Webseite der Kölner Agentur mediastyles, beschlossen wir zum einen, die gesamten Informationen auf einer Seite abzubilden und zum anderen, die freie, unaufdringliche Diashow lightbox2 von Lokesh Dhakar zu verwenden. Lightbox2 öffnet – sofern JavaScript aktiviert oder verfügbar ist – verlinkte Bilder in einer Ebene oberhalb des Inhalts und blendet die Webseite mit einem halb-transparenten Layer aus. Die Bibliothek ist sogar in der Lage, automatisiert Diashows zu erzeugen, wenn die Links zu den Bildern entsprechend attributiert sind. Ist JavaScript nicht verwendbar, werden die Bilder wie gewohnt im Browserfenster angezeigt. Den Effekt kann man mit den Beispielen auf der offiziellen Webseite nachvollziehen.Lightbox2 verwendet dazu die in letzter Zeit oft erwähnten JavaScript-Bibliotheken, bzw. -Frameworks prototype und script.aculo.us, um die entsprechenden Bild- und Diashoweffekte zu erzeugen. Während prototype als sogenanntes Framework (man mag über diesen Titel streiten) ergänzende Funktionen zum Standardumfang von JavaScript bereitstellt, enthält script.aculo.us eine Vielzahl von Effekten, die – je nachdem – die Verwendung einer Webseite oder einer Web-Applikation durch bestimmte Visualisierungen vereinfachen.Unter anderem gibt es in der Bibliothek script.aculo.us einen Scrolleffekt, der das herkömmliche Anspringen eines Ankerlinks durch ein langsames Scrolling ergänzt. Da nun die mediastyles-Webseite sehr gross war, empfanden wir diese Art Scrolling als eine unterstützende Massnahme bei der Navigation durch die Seite. Der Usability-Aspekt mag diskutierbar bleiben, aber den Effekt an sich empfanden wir als sehr angenehm, da die Bewegung durch die Seite für den Benutzer nachvollziehbar wurde. Effect.ScrollTo erwartet als Parameter die #id des anzuspringenden Elementes.
Die Umsetzung
Es wurde also geplant, zunächst normale Ankerlinks zu verwenden (…a href=”#objektid…). Nach Laden des Dokumentes und bei vorhandener JavaScript-Unterstützung seitens des Browsers sollte ein onload-Handler eine JavaScript-Funktion aufrufen, die das normale Sprungverhalten, durch den Scrolleffekt ergänzt. Um die Ankerlinks per JavaScript ansprechen zu können, wurden sie alle mit der Klasse “softscroll” versehen. prototype führt unter anderem das Äquivalent zur nativen JavaScript-Funktion getElementsByID für Klassen ein: getElementsByClassName – so blieb das selbstgebastelte Klettern durch einen Array von Links auf der Suche nach den korrekten Klassen schon einmal aus – sehr hilfreich.Der Funktionsablauf in der Theorie:
- Sicherheitscheck zur Fehlervermeidung (Prüfung ob die benötigte Funktion zur Verfügung steht)
- Alle mit der Klasse “softscroll” versehenen Links in einen Array lesen
- Den Array durchlaufen
- In der Schleife für jeden Link einen onclick-Eventhandler hinzufügen, der den Effekt aufruft und als Parameter den vormaligen Wert des Ankerlinks verwendet
Jetzt an das Eingemachte:Zunächst wollten wir prüfen, ob überhaupt ein mit “softscroll”-attributierter Link da ist, um ggf. ohne Fehlermeldung abbrechen zu können, gleichfalls wird überprüft, ob der Browser das DOM unterstützt:
function loadSoftScroll (){if (!document.getElementsByClassName('softscroll')) {return false;}}
Nun werden die Links in den Array “links” gelesen:
function loadSoftScroll (){if (!document.getElementsByClassName('softscroll')) {return false;}var links = document.getElementsByClassName('softscroll');}
Es folgt der Aufbau der Schleife und darin die Erzeugung eines onclick-Handlers für die Links:
function loadSoftScroll (){if (!document.getElementsByClassName('softscroll')) {return false;}var links = document.getElementsByClassName('softscroll');for (var i = 0; i < links.length; i++) {links[i].onclick = function () {}}}
Schliesslich muss noch der Anker aus dem Link gezogen (Browser ergänzen dort den gesamten URL) und der Effekt hinzugefügt werden:
function loadSoftScroll (){if (!document.getElementsByClassName('softscroll')) { return false;}var links = document.getElementsByClassName('softscroll');for (var i = 0; i < links.length; i++) {links[i].onclick = function (){var parts = this.href.split('#');new Effect.ScrollTo(parts[1]);return false;}}}
Ein onload-Handler sorgt für den Abruf der Funktion:
window.onload = function (){loadSoftScroll ();}
Das wär’s, klappt prima :) Alle Ankerlinks (die auch ohne JavaScript funktionieren) werden nach Laden des Dokumentes mit dem script.aculo.us-Scrolleffekt versehen, so dass dem Benutzer beim Navigieren durch eine große Seite veranschaulicht wird, wohin und wie weit er sich denn gerade bewegt. Der Effekt kann auf der mediastyles-Webseite angesehen und ausprobiert werden.
Weitere Links (Update: 11. März 2007)
Viel Spass beim Basteln!
Ohne Worte