Einfacher DIV-Scroller für DOM-fähige Browser

[seb]

Tataaaa....mein erstes mehr-als-fünf-Zeilen-JavaScript :

Ein simpler DIV-Scroller auf DOM-Basis. Da es konsequent für moderne Browser geschrieben wurde, besteht der Code aus sehr wenigen Zeilen, ist einfach einzubinden und, wie im Titel bereits angekündigt, nur funktionsfähig auf neueren Browsern, die das DOM (Document Objekt Model) unterstützen, sprich Internet Explorer 5 und höher sowie dem neuen Mozilla und seinen Ablegern (Netscape 6/7, KMeleon usw.).

Das Script ermöglicht beliebig viele Scrollbare DIVs auf einer Seite, die unabhängig voneinander gesteuert werden können, ohne dass der Javascript-Code modifiziert werden muss.

Das Script in Aktion

Falls jemand von euch Interesse daran hat, hier die Installationsanleitung:

1.
divscroller.js downloaden und ins website-Verzeichnis kopieren

2.
divscroller.js in HTML-Dokument einbinden

3.
<div>-Element als Scrollrahmen anlegen. Folgende Attribute MÜSSEN angegeben werden:

id="scrollframeID"

'scrollframe' ist zu übernehmen ist und 'ID' kann frei gewählt werden -> siehe Beispiel unten)

style="overflow:hidden; position:absolute; width: ? px; height: ? px; "

width und height sind frei wählbar (logisch). Zusätzliche Eigenschaften, z.b. Positionsangaben ('top' und 'left') sind möglich, aber nicht erforderlich.


4.)
Innerhalb dieses <div>-Elements ein zweites für den zu scrollenden Inhalt erstellen, mit ID = "ID" (gleiche wie beim Rahmen-DIV, nur ohne vorangestelltes 'scrollframe').
CSS-Angaben sind nicht erforderlich, allerdings ausser 'margin' (alle?) erlaubt (hier bin ich mir nicht sicher, müsste auch getestet werden )


5.)
HTML-Elemente mit event-Handlern für die Steuerung erstellen, z.b. onmouseover-Grafiken.

Das Script kann mit folgenden zwei Funktionsaufrufen gesteuert werden:

start_scroll(ID, speed)

(scrolling starten)
------------------------------

ID = HTML-ID des zu scrollenden DIV's

speed = Geschwindigkeit, z.B. 10 oder -10 (für Gegenrichtung)


stop_scroll(ID)

(scrolling anhalten)
------------------------
ID = HTML-ID des zu stoppenden DIV's




BEISPIEL:
------------

<img src="scroll_up.gif" onmouseover="start_scroll('Test', 10);" onmouseout="stop_scroll('Test');">

<img src="scroll_down.gif" onmouseover="start_scroll('Test', -10);" onmouseout="stop_scroll('Test');">


<div id="scrollframeTest" style="height:128px;width:320px;overflow:hidden;border-style:solid;border-width:1px;border-color:#000000;position:absolute; left: 312px; top: 352px;"> 

<div id="Test" style="padding:4px;font-family: verdana; font-size: 10px;line-height:14px;" >

- - Zu scrollender Inhalt - -
</div>

</div> 

------------------------------
update:

der Anhang enthält jetzt eine neue Version. Ich hab weder neue Features eingebaut noch die Browser-Kompatibilität verbessert - ledigiglich den Code um noch ein paar Zeilen verkürzt

[Lars]

Hmm, ich dachte eigentlich immer, der Internet Explorer 5 Macintosh Edition sei beherrsche das DOM - aber da das Script bei mir nicht funktioniert, scheint das nicht zu stimmen.

[seb]

Möglicherweise beherrscht ers durchaus und hat mit irgendwas anderem in meinem Script Probleme?

Auf Cross-Browser-Kompatiblität hab ich zugegebenermaßen kein bisschen geachtet - aus Mangel an Wissen über die verschiedenen Element-Zugriffsmethoden der verschiedenen Browser und fehlender Motivation, mich damit zu befassen und es umzusetzen.

Eigentlich diente mir dieses Script hauptsächlich dazu, n bisschen Javascript zu lernen - es is meine erste JS-Kreation, die über die bisherigen primitiven Popupfenster-Funktionen herausgeht.

Gut, Netscape 4 ist mir wurscht, aber auf dem Mac sollt's wohl schon laufen, falls man es ernsthaft verwenden will.

Getestet hab ich diese Version nur mit IE6 und Mozilla 1.1a auf Windows, weiß aber zumindest von einer etwas älteren Fassung, dass sie auch unter IE5 läuft (von Bekanntem getestet).

Wie siehts mit den neuren Opera-Versionen aus? Hat das mal jemand ausprobiert?

Und was für ne Fehlermeldung gibt der Mac-IE aus?

[Lars]

Gar keine! Ich kann den Scrollbalken zwar einmal (!) nach unten ziehen, es passiert aber rein gar nix.

[seb]

Den Scrollbalken kann man nicht ziehen, es is mir noch nicht gelungen, das umzusetzen (deshalb hab ihn in der 'Installationsanleitung' auch nicht erwähnt).

Bisher funktioniert lediglich das Scrollen per event-Handler bei onclick, onmouseover etc - der Scrollbalken kann zwar eingebaut werden und bewegt sich beim Scrollen auch schön mit, aber wie gesagt - bisher ist er unempfänglich für äußere Einflüsse.

Wie sieht's mit den Buttons aus (eigentlich dumme Frage, da du die wohl kaum übersehn hast...)?

[Lars]

Ich habe mich wohl etwas mißverständlich ausgedrückt: Natürlich meine ich das "Herunterziehen" des Balkens per Schaltfläche, nicht das Bewegen des Balkens selber. Aber genau das lässt sich ja leider nur ein eiziges mal machen, ohne dass der DIV-Inhalt davon tangiert wird.

[seb]

achso....hm...(keine Ahnung )

[Lars]

Macht ja nix, ich bin der festen Überzeugung, dass Du das Problem beheben wirst. Übrigens Respekt, wenn das wirklich Dein erstes grösseres Script ist.

[Thomas]

w2k:
IE 5.5/Mozialla 1.0/NN 6.2: alles topp, funktioniert wie du beschreibst

Opera 6.03: nee
witzigerweise bewegt sich aber der "Pseudo"scrollbalken des oberen Layers 1 x ganz kurz

[seb]

Macht ja nix, ich bin der festen Überzeugung, dass Du das Problem beheben wirst.

Unwahrscheinlich angesichts der Tatsache, dass ich nicht den geringsten Anhaltspunkt dafür hab, woran es liegen könnte.

Übrigens Respekt, wenn das wirklich Dein erstes grösseres Script ist.

Danke

Mein erstes 'richtiges' JavaScript isses tatsächlich (würde ich jeeeemals lügen??? ), allerdings wars keine sooo große Sache, da ich allgemein halbwegs programmiern kann (behaupt ich jetzt einfach mal...).

Unter der Voraussetzung muss man ja 'nur' die Syntax lernen und verstehen, wie Javascript auf die Elemente eine HTML-Seite zugreifen und sie verändern kann.

[Flixxtoras]

Habe mit Scroll Layern auch schon viel gemacht und kann aus Erfahrung nur sagen das man es in jeden Browser lauffähig machen kann außer Opera da dieser nicht mit den komplexen DHTM und JS auskommt.

[Flixxtoras]

Achja man kann auch einen Windows -artigen Scrollbalken machen den man ziehen kann das ist echt lustig und der user muss nicht so lange auf den Pfeilen bleiben auch Sprungmarken gehen also so ne Art Anker.

[seb]

Joa, hab ich auch schon hie und da gesehn, und (wie weiter oben erwähnt) auch schon einzubauen versucht, allerdings bisher vergeblich - ein mit der Maus ziehbarer Scrollbalken übersteigt meine JS-Fähigkeiten wohl noch etwas. Nichtsdestotrotz - was nicht ist, kann noch werden.

Aber mal was ganz anderes:

Welchen Sinn machen selbstprogrammierte DIV-Scroller überhaupt, angesichts der Tatsache, dass man bei IFrames die gleichen Möglichkeiten zur freien Gestaltung der Scroll-Elemente hat?


Gut, unter Netscape 4 ist es die einzige Lösung für sowas, da der ja weder Standard-Scrollbalken für DIVs noch IFrames kennt, aber wenn einem das egal ist, weil einem der Browser am ***** vorbei geht?

Obwohl man DIVs einfach per CSS mit Standard-Scrollbalken versehen kann, ohne den geringsten Programmieraufwand betreiben zu müssen, bietet Javascript ja leider keine Möglichkeit, sie mit einfachen Funktionsaufrufen zu scrollen, wie es bei Frames und IFrames kinderleicht möglich ist - eigentlich verwunderlich, dass die Damen und Herren vom W3C daran offensichtlich noch nicht gedacht haben.

Aaaaber da es bei IFrames ja geht, und es in Sachen Optik und Funktionalität keinen Unterschied zwischen einem 'normal' scrollbaren DIV und einem IFrame gibt, bzw. der Iframe Vorteile bietet, da er sich auch per Tastatur scrollen lässt und allgemein die sauberere weil immerhin etwas kompatiblere Lösung ist?

Ich kann also einen IFrame nehmen, die Standard-Scrollbalken abschalten und mir dafür per JS eigene Scroll-Buttons und theoretisch auch einen eigenen ziehbaren Scrollbalken basteln - wo bleibt da dem DIV ein Vorteil? Gibt keinen, oder?

[Stuck Mojo]

Moin !

Ein Vorteil von DIV-Containern ist, dass man sie im IE5.0 auch durch andere Container überlagern kann, was mit IFrames im IE5.0 nicht möglich ist. Erst ab IE5.5 ist der IFrame zu einem windowless-Element geworden und kann mit dem z-Index genauso wie ein DIV-Container behandelt werden.

und...selbst für den Opera kann man solche Scroller bauen.

Gruss Jan

[seb]

Stimmt...das is mir beim Mozilla mal aufgefallen - da isses nach wie vor so, oder?

Aber selbst wenn...dieser Vorteil is so minimal, dass ich eher auf das Überlagern verzichten würde, als ein scrollbares DIV zu verwenden