Schieberegler mit JavascriptSchiebung

Eigenbau

Schieberegler mit Javascript

In Flash sind Schieberegler für die eigene Website recht einfach zu realisieren. Mit Javascript ist dieselbe Aufgabe deutlich komplizierter. Vorgefertigte Schieberegler-Skripts gibt es im Web einige, allerdings passen sie nicht unbedingt immer auf jedermanns Bedürfnisse. Deswegen erläutert dieser Javascript-Baustein einen einfachen Schieberegler für W3C-konforme Browser und den Internet Explorer. Der HTML-Code ist sehr schlicht gehalten: Ein absolut platziertes Bild ist der Rahmen für den Schieberegler, ein zweites der Regler selbst. Hier ließe sich natürlich auch mit verschachtelten div-Elementen arbeiten, aber das Skript sollte ja einfach bleiben. Ein div-Element enthält ein wenig Text, dessen Größe per Schieberegler angepasst werden soll:

Variablen

Schieberegler mit Javascript

Nun zum Skript selbst. Hier werden zuerst ein paar Variablen definiert. regler speichert die Namen der Schieberegler und ist schon eine Vorbereitung darauf, mehrere Schieberegler einzusetzen.


var x_koo;
var y_koo;
var regler = new Array("schiebe1");
var element;


In der Funktion start() werden die Regler alle mit dem entsprechenden Ereignis für den Mausklick versehen. Sie wird im body-Tag beim onload-Ereignis aufgerufen. Ein wenig Aufwand macht hier die Browser-Unterscheidung ? sie erfolgt mit den Browser-Objekten:


function start() {
for (var ele in regler) {
if (document.all) {
document.all[regler[ele]].onmousedown = druecken;
} else if (document.getElementById) {
document.getElementById(regler[ele]).onmousedown = druecken;
}}}


Mausklick

Schieberegler mit Javascript

Die nächste Funktion ist druecken(). Sie entspricht der Funktionsweise eines normalen Drag and Drop: Zuerst wird per Event-Handling auf die Elemente zugegriffen, dann werden die Koordinaten gespeichert. Die x-Koordinate ist hier eigentlich nicht notwendig, wird aber mitgenommen, falls Sie das Skript in einen horizontalen Schieberegler umbauen möchten:


function druecken(e) {
if (document.all) {
element = event.srcElement.id;
x_koo = event.offsetX;
y_koo = event.offsetY;
} else if (document.getElementById) {
element = e.target;
x_koo = e.layerX;
y_koo = e.layerY;
}
document.onmousemove = ziehen;
document.onmouseup = aufheben;
return false;
}


Regler bewegen

Schieberegler mit Javascript

Entscheidend sind die weiteren Ereignisse. Für die Mausbewegungen dient die Funktion ziehen() als Event-Handler, für das Loslassen der Maustaste aufheben(). Mit diesen drei Ereignissen haben Sie den Vorgang Drag and Drop sauber abgebildet. Beim Ziehen lohnt nun ein genauerer Blick, denn hier erfolgt die Begrenzung auf den engen Bereich des Schiebereglers. Hier wird zuerst die y-Position ausgemessen. Ist sie innerhalb der für den Schieberegler erlaubten Reichweite, wird das Bild mit dem Regler umpositioniert. Dadurch entsteht der Effekt, dass der Schieberegler sich nur in einem bestimmten Bereich bewegt.


function ziehen(e) {
if (document.all) {
var y_pos = event.clientY - y_koo;
if (y_pos >= 85 && y_pos <= 285) {
document.all[element].style.pixelTop = y_pos;


Um optisch eine Veränderung zu erzeugen, ändert das Skript noch die Schriftgröße:


var font_em = (200 - (y_pos - 85)) / 20;
document.all.inhalt.style.fontSize = font_em + "em"; }


Browser-Anpassung

Schieberegler mit Javascript

Damit alles auch in W3C-konformen Browsern funktioniert, folgt dieselbe Logik noch mit standardkonformem Code:


} else if (document.getElementById) {
var y_pos = parseInt(e.clientY) - y_koo;
if (y_pos >= 85 && y_pos <= 285) {
element.style.top = y_pos;
var font_em = (200-(y_pos-85)) / 20;
document.getElementById("inhalt").
style.fontSize = font_em + "em";
}}
return false; }


Aufgehoben wird das Ziehen schließlich, indem der Event-Handler für die Mausbewegung den Wert null erhält:


function aufheben() {
document.onmousemove = null;
return false;}


Fazit

Schieberegler mit Javascript

Ein Schieberegler in Javascript ist eine nette Funktionalität, sollte aber nur als Ergänzung zu anderen Steuerungsmöglichkeiten eingesetzt werden. Das Hauptproblem ist selbstverständlich, dass der Nutzer dafür Javascript benötigt. Nebenkriegsschauplätze sind unter Umständen irgendwelche ärgerlichen Seiteneffekte mit anderen Skripts.

Alle Listings finden Sie auf der Heft-CD und unter listings.internet-pro.de.