Coding-Schatzkästlein Kleine Tips & Scripts zum Webdesign Start > DHTML > Ticker4All
DHTML: Universal-Newsticker "Ticker4All"
Zusammenfassung
Name:
Ticker4All (extern)
Aufgabe:
Tickert Text oder Grafiken nach Wunsch & Möglichkeit in Text- (DHTML), Formular- oder Statuszeile. Der Text kann übergeben bzw. aus einer externen Liste geholt werden (auf Wunsch auch selektiv und/oder in zufälliger Reihenfolge), oder er wird direkt aus dem HTML-Code ausgelesen (und bliebe somit noch mindestens als Fließtext lesbar).
Benötigt:
JavaScript 1.1 (ungesichert) und höher (gesichert)
Dies sind verschiedene Lauftext- und "PingPong"-Ticker
für HTML-, erst recht aber für DHTML-Browser, die allesamt ein und
dieselbe Routine benutzen. Die Besonderheit: Je nach Funktionalität des Browsers
(und Wunsch des HTML-Autors) kann der Ticker verschiedene Formen annehmen und
selbst auf Browsern ohne JavaScript bleibt der Text des Tickers ggf. erhalten -
er "tickert" halt nur nicht. Im einzelnen stehen zur Verfügung:
ab JScript 3.0/JavaScript 1.5: DHTML-Text-Ticker (z.B. Mozilla, IE ab 5, Opera ab 7, Konqueror)
ab JScript 3.0/JavaScript 1.2: Ticker mit Buchstaben-Grafiken (z.B. Netscape ab 4, IE ab 4)
ab JScript 3.0/JavaScript 1.1: Ticker in einem Formularfeld oder in der Statuszeile (z.B. Netscape ab 3)
Kein JavaScript/JScript 1.0/JavaScript 1.0: Ggf. statischer Text
Der Ticker-Text kann dabei entweder als normaler Fließtext direkt in der
Seite stehen (ein DHTML-Browser kann ihn dort auslesen - und anschließend
löschen), oder in einer Formularzeile vordefiniert sein (auslesbar von jedem
JavaScript-Browser), oder er kann dem Ticker direkt übergeben werden. Der
Übergabe-Text hat dabei Priorität vor dem Formular-Text, der
wiederum Priorität vor dem Fließtext hat.
Parameter für Ticker():
Name: ID des HTML-Ticker-Elements.
Text: Ticker-Text, die Zeilen getrennt durch | (Pipe); ist der Text-Parameter leer, dann wird der Ticker-Text direkt aus dem HTML-Ticker-Element ermittelt!
LCursor: gewünschte(s) Zeichen für den linken Ticker-Cursor.
RCursor: gewünschte(s) Zeichen für den rechten Ticker-Cursor.
Size: Größe des Tickers:
wenn >=1, dann Anzahl der gleichzeitig dargestellten Zeichen im Ticker: Lauftext (eine Zeile, konstante Zeichenzahl);
wenn 0, dann wird jede Zeile komplett von links nach rechts aufgebaut: "Ping" (variable Zeichenzahl);
wenn -1, dann wird sie auch wieder von rechts nach links abgebaut: "PingPong" (variable Zeichenzahl).
Filler: wenn true, dann werden Füllzeichen zwischen den Zeilen generiert:
bei konstanter Zeichenzahl (Size>=1) ist dies ein kompletter Leerbereich;
bei variabler Zeichenzahl (Size<=0) sind dies Auslassungpunkte.
FillerCheck: enthält die (Satz-)Zeichen, mit denen die Füllzeichen gesteuert werden:
Ein Leerbereich (Pause zw. Zeilen) entsteht nach den angegebenen (Satz-)Zeichen.
D.h, wenn FillerCheck einen Punkt enthält, und eine Ticker-Zeile
(begrenzt durch | bei der Übergabe oder <br>,
<hr> bzw. <!-- --> im HTML-Code) endet
mit einem Punkt, dann kommt im Lauftext nach dieser (logischen) Ticker-Zeile
eine Leerzeile. Endet die (logische) Ticker-Zeile nicht mit einem Punkt (z.B.
neue "Zeile", aber nicht neuer Satz), dann läuft der Text kontinuierlich.
Die Auslassungspunkte (Verbindung zw. Zeilen) werden vermieden nach den
(Satz-)Zeichen. D.h., wenn FillerCheck einen Punkt enthält,
und eine Ticker-Zeile endet mit einem Punkt, dann hängt der ein
"Ping(-Pong)"-Ticker an die Zeile keine Auslassungspunkte (die Zeile hat ja
einen inhaltlichen Abschluß). Andernfalls werden Auslassungspunkte angefügt (auch
zu Beginn der folgenden Zeile), da der Satz unterbrochen und fortgeführt wird.
Chardelay: Wartezeit bis zum nächsten Buchstaben in Millisekunden; bei einem negativem Wert gilt die Wartezeit nur für den Hinlauf - die Rücklauf-Wartezeit ist 0.
Linedelay: Wartezeit bis zur nächsten Zeile in Millisekunden; bei einem negativem Wert gilt die Wartezeit nur nach dem Hinlauf - nach dem Rücklauf ist die Wartezeit 0.
WhiteSpace: wenn true, dann werden als Leerzeichen "white-spaces" ( / ) verwendet - nur JavaScript >=1.2.
Status: wenn true, dann wird im "Notfall" die Statuszeile des Browsers als Tickerbereich mißbraucht.
ImgMask (für Image-Ticker - sonst leer!): Maske für Pfad und Namen der Buchstabendateien des Image-Tickers: Bei "img/char.gif" ist z.B. die Datei für A "img/char65.gif". Wenigstens die Angabe der Dateiextension (hier: ".gif") ist also zwingend erforderlich (für A müßte dann die Datei "65.gif" im gleichen Verzeichnis existieren)!
Capitals (nur bei Image-Ticker): true, wenn nur Großbuchstaben dargestellt werden sollen. Im Text eventuell enthaltene Kleinbuchstaben werden automatisch in Großbuchstaben umgewandelt.
Width (nur bei Image-Ticker): Breite eines IMG-Buchstabens (nicht notwendigerweise identisch mit der realen Breite der Grafik).
Height (nur bei Image-Ticker): Höhe eines IMG-Buchstabens (nicht notwendigerweise identisch mit der realen Höhe der Grafik).
Der Image-Ticker ist nur als Lauftext möglich! Die benötigten IMG-Tags
werden erst beim Aufruf des Tickers erzeugt (an der Stelle, an der im HTML-Code
der Ticker aufgerufen wird). Der als Tickerbereich gekennzeichnete Code wird nur
zum Auslesen des Textes verwendet (ist dies geschehen, wird der Text dort gelöscht).
Der Bereich des Image-Tickers (er wird durch ein SPAN-Tag umfaßt) hat
die gleiche ID wie der "originale" Tickerbereich, erweitert um ein Img.
Wurde der Tickerbereich z.B. mit der ID Ticker versehen, so hat der
Image-Ticker entsprechend die ID TickerImg (also
<span id="TickerImg"><img ... ></span>).
Außerdem sind Funktionen enthalten, um den Ticker-Text auch aus einer
speziellen (externen) (JavaScript-)Textdatei zu holen, die einen oder mehrere
Texte enthalten kann (Tip: wer Daten aus einer reinen, "echten" Textdatei in
seine Seite laden möchte, der sollte sich einmal mit Ajax
beschäftigen). Aus diesen Texten kann man dann wie folgt auswählen:
Ein bestimmter Text anhand der Textnummer mit xGetTicker(Nr), wobei
Nr zw. 1 und der Gesamtzahl der Texte (Wert von
TickerText.length) liegen darf (jeweils inkl.). Ist Nr
größer als die enthaltene Zahl der Texte (oder negativ), so wird nach
einem Text gesucht, der diese Zahl enthält. Wird kein Parameter übergeben,
dann wird der 1. Text geholt. Beispiel:
xGetTicker(3) holt den 3. Texteintrag (entspricht TickerText[2])
Ein bestimmter Text anhand einer enthaltenen Zeichenkette mit xGetTicker(String,All).
String steht dabei für die gesuchte Zeichenkette
(Groß-/Kleinschreibung wird nicht beachtet) und All kann
true (alle passenden Texte werden übergeben) oder false
sein (nur der erste passende Text wird übergeben). Beispiele:
xGetTicker("Schriftsteller",true) holt alle Texte, die die
Zeichenfolge "Schriftsteller" (oder z.B. auch "schriftsteller") enthalten
xGetTicker("schriftsteller") holt den ersten gefundenen Text, der
die Zeichenfolge "schriftsteller" (oder z.B. auch "Schriftsteller") enthält
Ein zufälliger Text mit xRandomTicker(String). Wird eine
Zeichenkette übergeben, dann wird der Text nur aus den Texten ausgewählt, die
diese Zeichenkette enthalten (Groß-/Kleinschreibung wird nicht beachtet).
Beispiele:
xRandomTicker() holt einen beliebigen Text
xRandomTicker("Schriftsteller") holt einen Text, der die
Zeichenfolge "Schriftsteller" (oder z.B. auch "schriftsteller") enthält
Mehrere Texte in zufälliger Reihenfolge mit xShuffleTicker(String).
Wird eine Zeichenkette übergeben, dann werden nur Texte ausgewählt, die
diese Zeichenkette enthalten (Groß-/Kleinschreibung wird nicht beachtet).
Beispiele:
xShuffleTicker() holt alle Texte in zufälliger Reihenfolge
xShuffleTicker("Schriftsteller") holt alle Texte, die die
Zeichenfolge "Schriftsteller" (oder z.B. auch "schriftsteller") enthalten,
in zufälliger Reihenfolge
Alle Texte mit xAllTicker(ReverseFlag). Wenn false (oder
nichts) übergeben wird, werden die Texte in genau der Reihenfolge geholt, in der
sie in der Textdatei eingetragen sind. Bei true wird die Reihenfolge
umgekehrt (letzter Eintrag tickert zuerst).
Um Fehler bei fehlendem (oder nicht ausführbarem) Script zu vermeiden, kann man
sich an einigen globalen Variablen orientieren. Die JavaScript-Variable
xJSticker ist true, wenn die (externe) Quell-Datei
des Tickers (ticker.js) korrekt geladen wurde. Die JavaScript-Variable
xJStickertext ist true, wenn die (externe) Textdatei des
Tickers (ticktext.js) korrekt geladen wurde. Der Rückgabewert der
Ticker-Routine selbst ist true, wenn der Ticker erfolgreich
gestartet wurde (somit kann bei erfolgreichem Ticker die Seite speziell angepaßt
werden).
Die verwendeten Sprachen sind JavaScript 1.1 (ungesichert - d.h., es wird nicht
überprüft, ob der Browser wirklich JavaScript 1.1 beherrscht; wird der
Ticker als externes Script eingebunden, ist dies kein Problem, da JavaScript 1.0
keine externen Dateien einbinden kann), JavaScript 1.2 (gesichert - es wird also
überprüft, ob die jeweils benötigten Funktionen überhaupt vorhanden
sind) & JavaScript 1.5/W3C-DOM (ebenfalls gesichert).
Wird ein Image-Ticker gewünscht, dann sollten die benötigten Grafiken
bereits auf einer vorhergehenden HTML-Seite mit der Funktion cacheTicker(ImgMask,Capitals)
(oder z.B. als versteckte 1-Pixel-Grafiken) vorab geladen werden, um
Verzögerungen zu vermeiden. Eine andere Möglichkeit: Grafiken in der Seite
laden und den Ticker nicht direkt, sondern erst nach dem Laden der Seite starten (mit
onLoad und einer Zwischenfunktion, da man bei onLoad weder
Parameter übergeben kann, noch das Funktionsergebnis bekommt - Beispiel:
<body onLoad="startTicker();"> mit der JavaScript-Funktion
function startTicker() { if(xJSticker) { ticking=Ticker(Parameter); } }.
Der externe Quellcode (inkl. JS-Textdatei): ticker4all.zip
Die Buchstaben-Grafiken für einen Image-Ticker können leicht aus der
CharCode-Tabelle ausgeschnitten
werden. Die hier verwendeten Buchstaben-Grafiken (Atari-System-Font 8x16)
sind als ZIP-Archiv abrufbar.
Updates:
31.01.2004:
Die Verarbeitung der externen Textdatei ticktext.js wurde erweitert, um sie auf verschiedene Arten auslesen zu können (xGetTicker(), xAllTicker(), xRandomTicker() oder xShuffleTicker()).
08.11.2003:
Korrektur: Wegen unzureichender Unterstützung, wurde der IE 4 von der DHTML-Nutzung wieder ausgenommen.