Ein vertikal scrollender javascript-Newsticker in 2 Versionen
Der javascript-Newsticker scrollt vertikal und liegt in 2 Versionen vor (DIV und IFrame-basierend).
Wie es anfing:
Ein Bekannter wollte in seine frisch erstellte Bandseite einen vertikal scrollenden Newsticker einbauen.
Im Web fanden sich Unmengen an Downloads für Flash-, Java- und javascript-basierte Newsticker.
Leider konnten viele auf der lokalen Festplatte nicht ausprobiert werden,
da sie auf Serverskripte (z.B. php) angewiesen waren
oder das Bearbeiten der Inhalte für einen Laien unzumutbar war.
Wir wollten aber einen einfachen Newsticker, der auch lokal funktioniert
und dessen Inhalte einfach gepflegt werden können.
Die Inhalte sollten obendrein auch graphisch gestaltbar sein.
nach oben
Der Newsticker:
ist in html und javascript realisiert, nur ein paar hundert Byte groß und liegt in 2 Versionen vor: mit und ohne IFrame.
Für den Newsticker lassen sich Schrittweite und Pausenzeit in der Datei "ticker/ticker.js" einstellen.
Beide Versionen bringen auch mit abgeschaltetem javascript vernünftige Ergebnisse.
Beim Testen wollten meine Internet Explorer das Frameset nicht transparent anzeigen,
sogar die Inhalte wurden unterbunden.
Wer mit der IFrame-Lösung Probleme hat, ist mit der DIV-Version besser bedient.
-
Beide Versionen enthalten eine html-Beispieldatei sowie Newsticker-Daten in einem Unterverzeichnis "ticker".
-
Beide Beispiel-html-Seiten enthalten einen Bereich, der in die Webseite übernommen werden kann,
in der der Newsticker stehen soll.
Dieser Bereich steht innerhalb der html-Kommentare "BEGIN TICKER SECTION" und "END TICKER SECTION".
Das Erscheinungsbild des Ticker-Bereiches (Rahmen, Größe) kann frei gestaltet werden.
-
Das Tickerfenster sowie die darin angezeigten Daten sind in einfachem html geschrieben
und können manuell oder per Software (wie z.B. Dreamweaver) angepasst werden.
nach oben
Demo DIV/IFrame:
nach oben
Integration DIV:
Wer den Inhalt von div.zip in das gewünschte Verzeichnis entpackt,
wird dort die Dateien beispiel.html und beispiel.jpg finden.
Zusätzlich wird ein Unterverzeichnis "ticker" angelegt, in dem die Datei ticker.js liegt.
Die DIV-Lösung kommt ohne IFrames aus.
Dafür müssen aber die News-Daten sowie 2 weitere html-Schnipsel in die eigene Wunschseite übernommen werden.
- Aus beispiel.html den mit "BEGIN TICKER SECTION" und "END TICKER SECTION" eingefassten Bereich in die eigene Seite kopieren.
- In den head-Bereich der Webseite muß die Zeile (!)
<script src="ticker/ticker.js" type="text/javascript"></script> eingefügt werden.
- Das body-Tag der Seite muß um den Eintrag
onLoad="init();" erweitert werden.
Falls bereits ein onLoad vorhanden ist, dann ist innerhalb der doppelten Anführungszeichen ein 'init(); ' einzufügen.
- Die News sind sichtbar für Browser mit aktiviertem wie auch abgeschaltetem javascript.
- Größe, Rahmen und evtl. die Position des DIV-Bereiches kann frei verändert werden.
- In der DIV-Version stehen die eigentlichen News-Daten ebenfalls in beispiel.html in der Einfassung von "BEGIN of editable section" und "END of editable section" und können frei gestaltet werden.
- Der javascript-Code steht in ticker/ticker.js und erlaubt die Anpassung von Schrittweite und Geschwindigkeit.
- Bei unschönen Übergängen zum "Neustart" kann in "ticker/ticker.js" der Wert für die Variable "ausgleich" in Zeile 5 verändert werden.
nach oben
Integration IFrame:
Wer den Inhalt von iframe.zip in das gewünschte Verzeichnis entpackt,
findet dort die Dateien beispiel.html und beispiel.jpg.
Zusätzlich wird ein Unterverzeichnis "ticker" angelegt, in das die Dateien ticker.html und ticker.js abgelegt werden.
- Aus beispiel.html den mit "BEGIN TICKER SECTION" und "END TICKER SECTION" eingefassten Bereich in die eigene Seite kopieren.
- Der IFrame ist doppelt vereinbart: für Browser mit aktiviertem wie auch abgeschaltetem javascript.
- Größe, Rahmen und evtl. die Position der IFrames kann frei verändert werden.
- Die eigentlichen News-Daten stehen in ticker/ticker.html zwischen der Einfassung von "BEGIN of editable section" und "END of editable section" und können frei angepasst werden.
- Der javascript-Code steht in ticker/ticker.js und erlaubt die Anpassung von Schrittweite und Geschwindigkeit.
- Bei unschönen Übergängen zum "Neustart" kann in "ticker/ticker.js" der Wert für die Variable "ausgleich" in Zeile 5 verändert werden.
nach oben
Javascript-Kompatibilität:
In Browsern, bei denen javascript abgeschaltet wurde, werden die Newsdaten direkt im dann unbewegten Tickerfenster angezeigt.
Das Tickerfenster erhält automatisch einen eigenen Scrollbalken, wenn die Inhalte nicht ganz dargestellt werden können.
Der Quelltext kommt mit minimalem Einsatz von javascript aus.
Vorausgesetzt werden DOM-kompatible Webbrowser wie z.B. Firefox (ab 1.0) oder Internet Explorer (ab 5.5).
nach oben
Download:
nach oben
