Homepagebau
Dateiversion:
diesen Beitrag diskutieren,
ergänzen, eine Frage stellen

HTML - Newsticker

Schwierigkeit: für Fortgeschrittene

 
Skript downloadenversion: 24.06.2004

Newsticker (Version 2.0)

Newsticker (Version 2.5)


2 kbyte


2 kbyte

Beispiel

Beispiel

Beschreibung:

Neuere Browser, wie Netscape und Internet Explorer 6, Mozilla und Firefox bieten via DOM (Dynamic Object Model) die Möglichkeit auch kompletten HTML-Code in einem Newsticker zu verwenden. Dies war in früheren Versionen dem IE vorbehalten und in anderen Browsern nicht möglich. Es gibt mehrere verschiedene Ansätze, den Buchstaben das Laufen beizubringen. Version 2.0 ist der klassische Ansatz und die stabilere Variante. Version 2.5 sieht besser aus, hat ein sanfteres Scrolling, ist aber auch anfälliger für Störungen.

Im Folgenden Abschnitt werde ich den Ansatz für Version 2.0 erläutern. In diesem kurzen Tutorial werden sie einen Mini-HTML Parser schreiben, etwas über die Grundstruktur von HTML, und einige (neue) Befehle lernen.

Wie wird's gemacht ...

Die Eigenschaft "innerHTML" beschreibt den Quellcode, der sich zwischen einem öffnenden und schließenden Tag befindet. Diese Eigenschaft ist les- und schreibbar. Dadurch ist es nun nicht mehr erforderlich puren Text in ein normales Textfeld zu übertragen, sondern es lässt sich echter HTML-Code überall dort einfügen, wo es gewünscht ist.

Beispiel:

 

Auf geht's!

Diesen Ticker wollen wir nun gemeinsam ausarbeiten. Und zwar wollen wir dazu in regelmäßigen Zeitintervallen eine feste Anzahl von Zeichen darstellen. Pro Intervall tauschen wir ein Zeichen aus, so dass die Illusion einer Animation entsteht.

Zwei Dinge erschweren uns die Arbeit dabei ein wenig.
Erstens: die Breite des Textes. Wir müssen berechnen, wie viele Zeichen gerade dargestellt werden. Damit wir entscheiden können, welcher Teil des Textes im Moment sichtbar ist, und welcher Teil im nächsten Animationsschritt sichtbar werden sollte.
Zweitens: Ein Tag oder eine Entity sind nicht das Gleiche wie ein Zeichen. Wir müssen also quasi einen Mini-Parser schreiben. Dieser Mini-HTML Parser muss können:

Der erste Entwurf:

Zunächst brauchen wir aber einen Container. Meist verwendet man hierfür einen DIV-Tag - hier soll später der Ticker erscheinen. In diesem Fall habe ich das Objekt auf den passenden Namen "ticker" getauft... (das ist die "ID" welche wir benutzen werden um den Tag anzusprechen)

<DIV ID="ticker">&nbsp;</DIV>

<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">
<!--
//Dieses Skript ist kostenlos erhaeltlich unter www.all-community.de
//Bitte diesen Hinweis nicht entfernen !

  var txt = "Das wird unser Ticker!";

  function scroll() {

Wir verschieben das erste Zeichen von links nach rechts -
das ist natürlich noch nicht ausreichend (siehe oben) um die Feinheiten kümmern wir uns aber später ...

txt = txt.substring(1, txt.length) + txt.substring(0,1);

Und so ersetzen wir den Inhalt des Formularfeldes durch unseren eigenen Text!

document.getElementById('ticker').innerHTML = txt;

setTimeout("scroll()", 100);

  };

  scroll();

//-->
</SCRIPT>

Das Skript:

Um es mit J. Puetz zu sagen: "Ich habe da schon einmal etwas vorbereitet"...
Keine Sorge - das Skript ist zwar lang, aber leicht verständlich.

<DIV ID="ticker">&nbsp;</DIV>

<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">
<!--
//Dieses Skript ist kostenlos erhaeltlich unter www.all-community.de
//Bitte diesen Hinweis nicht entfernen !

Wir initialisieren unseren Text und die Breite des Tickers:

var txt = 'Das ist <i>unser</i> <b>Ticker</b><img src="ausrufezeichen.gif">';
var breite = 60;

Hilfsvariablen:
'temp' speichert dabei die Tags, welche gerade aktiv sind. Wenn wir einen öffnenden Tag finden, wird er hier zwischengespeichert, bis wir den passenden schließenden Tag dazu gefunden haben.

var timer;
var temp = '';

Nun folgt die Funktion, welche den Text scrollt 

function scroll() {

Die Variable 'gefunden' soll uns anzeigen, wann wir tatsächlich ein Zeichen verschoben haben.
Solange wir nur Tags verschieben, bleibt der Wert auf 'false' 

  while (var gefunden != true) {

Es gibt 5 mögliche Fälle.
1. Fall - wir finden eine Entity (&...;). Dann schneiden wir die Entity komplett aus und setzen sie am rechten Ende wieder an.

    if (txt.indexOf('&') == 0) {
      txt = txt.substring(txt.indexOf(';')+1, txt.length) + txt.substring(0,txt.indexOf(';')+1);
      gefunden = true;

2. Fall - es handelt sich um ein Bild (IMG-Tag). Wenn dem so ist, verschieben wir den kompletten Tag ebenfalls ans rechte Ende

    } else if (txt.indexOf('<img') == 0) {
      txt = txt.substring(txt.indexOf('>')+1, txt.length) + txt.substring(0, txt.indexOf('>')+1);

3. Fall - es handelt sich um einen schließenden Tag. Dann schieben wir diesen ans rechte Ende UND löschen den zuletzt in unsere temporäre Variable verschobenen Tag aus dieser, damit er nicht mehr aktiv ist. 

    } else if (txt.indexOf('</') == 0) {
      temp = temp.substring(0,temp.lastIndexOf('<'));
      txt = txt.substring(txt.indexOf('>')+1, txt.length) + txt.substring(0, txt.indexOf('>')+1);

4. Fall - ein öffnender Tag. Diesen schneiden wir auch aus und verschieben ihn nach rechts. Damit er aber trotzdem noch aktiv bleibt, bis er geschlossen wird, speichern wir ihn zwischen in der Variable 'temp' 

    } else if (txt.indexOf('<') == 0) {
      temp += txt.substring(0,txt.indexOf('>')+1);
      txt = txt.substring(txt.indexOf('>')+1, txt.length) + txt.substring(0,txt.indexOf('>')+1);

5. (und letzter) Fall - ein ganz normales Zeichen... dieses verschieben wir einfach nur nach rechts

    } else {
      txt = txt.substring(1, txt.length) + txt.substring(0,1);
      gefunden = true;
    }; // end if

  }; // end while

Fertig! Nun brauchen wir das Ergebnis nur in den Tag schreiben.
Unsere Hilfsvariable 'temp' setzen wir vor den String - denn sie enthält die gerade aktiven Tags
Die Funktion 'cut(txt)' berechnet die korrekte Position, an welcher der Text "abgeschnitten" werden muss, damit er die durch die Variable 'breite' vorgegebene Breite hat. 

  document.getElementById('ticker').innerHTML = temp + txt.substring(0, txt.length - cut(txt));

  timer = setTimeout("scroll()", 150);

}; // end scroll

Diese Funktion berechnet die korrekte Position, an welcher der Text "abgeschnitten" werden muss. 

function cut(msg) {

  var j = 0;

So funktioniert dieses Skript: es schneidet solange Zeichen und Tags aus, bis die Zahl der ausgeschnittenen Zeichen = der vorgegebenen Breite ist. Übrig bleibt ein Rest. Wenn man die Anzahl der Zeichen dieses "Rests" von der Anzahl aller Zeichen des Strings abzieht, erhält man genau die Position bei der man den String abschneiden muss, damit er exakt die vorgegebene Breite in "echten" Zeichen hat.

  while(j < breite && msg.length > 0) {

    if (msg.indexOf('<img') == 0) {
      msg = msg.substring(msg.indexOf('>')+1, msg.length);
      j++;
    } else if (msg.indexOf('<') == 0 && msg.indexOf('>') > 0) {
      msg = msg.substring(msg.indexOf('>')+1, msg.length);
    } else if (msg.indexOf('&') == 0 && msg.indexOf(';') > 0) {
      msg = msg.substring(msg.indexOf(';')+1, msg.length);
      j++;
    } else {
      msg = msg.substring(1,msg.length);
      j++;
    }; // end if

  }; // end while

  return msg.length;

}; // end cut

Abschließend muss der Ticker nur noch gestartet werden... 

scroll();

// -->
 </SCRIPT>

Tipps:

Um das Skript nicht noch komplizierter und umfangreicher zu machen als es ohnehin schon ist, setzen wir voraus, dass der verwendete HTML-Code "kontextfrei" ist. Das heißt, folgendes ist nicht erlaubt: <b><i>Text</b></i> und muss so umgeschrieben werden: <b><i>Text</i></b>. Außerdem dürfen "<" und "&" als Zeichen nicht vorkommen und müssen durch die ihnen entsprechenden Entities "&lt;" und "&amp;" ersetzt werden.

Diese Einschränkungen werden zwar ohnehin für sauberen Quellcode dringend empfohlen, sind aber normalerweise nicht bindend.

 

Autor: Thomas Meyer

Home: www.All-Community.de

 Kontakt: