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)
Beispiel:  1.    
a)  
b)  
c)  
2.    
a)  
b)  
c)  
3.    
a)  
4.    
a)  
5.    
a)  
b)  
Text in externer Datei
Lauftext-Auswahl
PingPong-Random
Ping-Shuffle
Text im HTML-Code
Lauftext
PingPong
Ping
Alternativ: Formticker
Lauftext
Alternativ: Statusticker
PingPong
Grafik-Ticker
Lauftext (HTML)
Lauftext (DHTML)
Download:  ticker4all.zip atarifnt.zip (Image-Font)

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():

  1. Name: ID des HTML-Ticker-Elements.
  2. 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!
  3. LCursor: gewünschte(s) Zeichen für den linken Ticker-Cursor.
  4. RCursor: gewünschte(s) Zeichen für den rechten Ticker-Cursor.
  5. 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).
  6. 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.
  7. 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.
  8. 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.
  9. 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.
  10. WhiteSpace: wenn true, dann werden als Leerzeichen "white-spaces" (&#160;/&nbsp;) verwendet - nur JavaScript >=1.2.
  11. Status: wenn true, dann wird im "Notfall" die Statuszeile des Browsers als Tickerbereich mißbraucht.
  12. 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)!
  13. Capitals (nur bei Image-Ticker): true, wenn nur Großbuchstaben dargestellt werden sollen. Im Text eventuell enthaltene Kleinbuchstaben werden automatisch in Großbuchstaben umgewandelt.
  14. Width (nur bei Image-Ticker): Breite eines IMG-Buchstabens (nicht notwendigerweise identisch mit der realen Breite der Grafik).
  15. 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); } }.

Beispiele

TechnikTicker-ArtErsatz-Technik
1a) DHTML (ext.) Lauftext-Auswahl Statischer Text
b) DHTML (ext.) PingPong-Random Statischer Text
c) DHTML (ext.) Ping-Shuffle Keine (externer Text)
2a) DHTML Lauftext-Ticker Marquee-Lauftext
b) DHTML PingPong-Ticker Statischer Text
c) DHTML Ping-Ticker Statischer Text
3) (D)HTML Lauftext-Ticker Formularzeilen-Ticker
4) (D)HTML PingPong-Ticker Statuszeilen-Ticker
5a) Image Lauftext-Ticker Statuszeilen-Ticker
b) DHTML/Image Lauftext-Ticker Statischer Text

HTML-Code (Ticker)

HTML-Code (Images vorab laden)

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.


Kurz-URL dieses Artikels: http://Coding.binon.net/Ticker4All