Textticker im Text mit Javascript

Hier finden Sie nun einen Textticker, den Sie frei platzieren können.

Darüber hinaus können Sie das Javascript direkt von meinem Server laden und nutzen.

Der Source

Wir erstellen eine Datei textticker.js, die das Javascript enthält (oder laden es direkt von meinem Server, siehe Beispiel):

// textticker II - Thomas Salvador, 2010, https://brauchbar.de
// free to use, if this notice is kept intact

var textticker_data = new Array();
var textticker_cursor = '#';
var textticker_delay_line = 1000;
var textticker_delay_char = 50;
var textticker_x, textticker_y, textticker_id, textticker_line;

function textticker_define(line) {
  textticker_data[textticker_data.length] = line;
}

function textticker_next() {
  if (textticker_x++ == textticker_data[textticker_y].length) {
    textticker_x = 0;
    textticker_line = '';
    if (textticker_y++ == textticker_data.length-1) {
      textticker_y = 0;
    }
    return true;
  } else {
    return false;
  }
}

function textticker_update() {
  if (textticker_data[textticker_y].charAt(textticker_x) == '#') {
    setTimeout('textticker_update()',
      1000*textticker_data[textticker_y].charAt(textticker_x+1));
    textticker_x++;
    textticker_next();
  } else {
    textticker_line = textticker_line
      + textticker_data[textticker_y].charAt(textticker_x);

    container = document.getElementById(textticker_id);
    container.innerHTML = textticker_line+textticker_cursor;

    if (textticker_next())
      setTimeout('textticker_update()', textticker_delay_line);
    else
      setTimeout('textticker_update()', textticker_delay_char);
  }
}

function textticker_start(id, cursor, delayline, delaychar) {
  textticker_id = id;
  textticker_cursor = cursor;
  textticker_delay_line = delayline;
  textticker_delay_char = delaychar;
  textticker_x = 0;
  textticker_y = 0;
  textticker_line = '';
  textticker_update();
}

Die Dokumentation

Die Daten zum Textticker werden in textticker_data und einigen Hilfsvariablen gehalten.

Die Funktion textticker_define(line) fügt eine Zeile Text hinzu. Dabei wird das Gatter # im Fließtext unterstützt, welches 1-9 Sekunden lange Pausen markiert.

Ist alles definiert, kann der Ticker mit textticker_start() gestartet werden, wobei der Platzhalter für den Ticker, das zu nutzende Cursorzeichen und die Verzögerungen zwischen Zeilen und zwischen Zeichen übergeben werden.

Die eigentliche Arbeit macht die Funktion textticker_update(), die das jeweils aktuelle Zeichen des Textes betrachtet.

Ist es das Pausenzeichen #, so wird eine neue Ausführung angesetzt, die je nach Länge der gewünschten Pause verzögert wird und ein etwaiges Zeilen- oder Textende mit textticker_next() behandelt.

Ist es kein Gatter, wird die aktuelle Zeile textticker_line um dieses Zeichen erweitert. Die Zeile wird dann in dem Platzhalter ausgegeben, dessen id bei textticker_start() angegeben wurde. Er wurde in textticker_id gemerkt. Auch hier wird das etwaige Zeilenende mit textticker_next() verarbeitet. Je nachdem, ob ein Zeilenende vorlag oder nicht, wird um textticker_delay_line bzw. textticker_delay_char verzögert.

textticker_next() setzt den Zeiger auf das aktuelle Zeichen weiter und prüft, ob das Zeilen- bzw. Textende erreicht ist. Ist dies der Fall, wird in die nächste Zeile bzw. an den Anfang des Textes gegangen.

Die Verwendung

Zur Einbindung platzieren Sie im Kopfbereich Ihres Dokumentes die Anweisung

<script type="text/javascript" src="textticker.js"></script>

Sie können das Javascript direkt von meinem Server laden:

<script type="text/javascript"
  src="https://brauchbar.de/services/textticker-100.js"></script>

Nun legen Sie fest, wo der Textticker erscheinen soll und erzeugen dort einen leeren Container mit entsprechendem Namen:

<div id="meinticker"></div>

Erzeugen Sie im Kopfbereich eine Funktion, die ihren Ticker definiert und die Ausgabe fordert:

<script type="text/javascript"><!--
function myticker() {
  textticker_define('Zeile1...');
  textticker_define('Zeile 1..#2..aehm..Zeile 2...');
  textticker_start('meinticker', '#', 1000, 50);
}
//-->
</script>

Die Funktion textticker_define(line) unterstützt das Pausenzeichen # im Fließtext. Die darauf folgende Ziffer beschreibt die Länge der Pause in Sekunden.

Abschließend lassen Sie dieses Script starten, wenn das Dokument geladen wurde. Geeignet ist hier der onload-Event des <body>-Tag:

<body onload="myticker();">

Das Beispiel

In diesem Beispiel tickern wir etwas Text und streuen ein paar Pausen ein.

<html>
<head>
<title>Ticker-Beispiel</title>
<script type="text/javascript"
  src="https://brauchbar.de/services/textticker-100.js"></script>
<script type="text/javascript"><!--
function myticker() {
  textticker_define('JavaScript Beispiele...');
  textticker_define('Text - ein einfacher Text-Ticker...');
  textticker_define('mit einstellbaren#2 Verzoegerungen...');
  textticker_define('etwas#1 mehr#2 Code... besserer#2 Effekt...');
  textticker_define('Have Fun !');
  textticker_define('Schauen Sie sich doch auch die anderen Beispiele an...');
  textticker_start('meinticker', '#', 1000, 50);
}
//-->
</script>
</head>
<body onload="myticker();">
<p>Vor dem Ticker.</p>
<div id="meinticker" style="width:100%;"></div>
<p>Nach dem Ticker.</p>
</body>
</html>

Das sieht so aus:

Viel Spaß.