Lauftext per „innerHTML”
^{Kristof Lipfert
Dipl.-Des.(FH)}

Web-Design Beispiel zu den Tutorien JavaScript für alle Browser und CSS für alle Browser, innerHTML

Als Beispiel für die Möglichkeiten von innerHTML ein Nachrichtenticker mit einheitlicher Syntax bei JavaScript, HTML und CSS für Netscape und Internet Explorer ab Version 4. Ergänzung zu innerHTML für Netscape 4.

Mögliche Probleme

Die Abhängigkeit von aktiviertem JavaScript gilt es zu bedenken, weiterhin gibt es Browser die innerHTML bzw. DHTML kaum können, so müßte für frühe Operas DHTML über eine komplett neu aufgebaute Seite, etwa in einem Frame, realisiert werden, und bei Mozilla ist innerHTML oft unzulänglich, ggf. muss doch auf textNode ausgewichen werden.

Auch unter Netscape 4 sind Probleme vorstellbar, da die zugrundelegende neue Funktion getElementById einen Timeout benötigt, um die anstehende Umsetzung bzw. Änderung des innerHTML abfragen zu können. Zusammen mit dem Aufruf per setInterval sind Verzögerungen der Funktion vorstellbar. Das hier gezeigte Beispiel hat Tests mit Netscape 4.07, 4.51, 4.61 und 4.70 bestanden. Es empfiehlt sich den Resizebug dieser Browser zu berücksichtigen.

JavaScript Code Lauftext

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17

/*   Kristof Lipfert Duesseldorf (c) 2002             */
/*   Lauftext per getElementId und innerHTML          */

var txt=" + Dies ist der Lauftext. + "+
        "Er läuft immer wieder erneut ab. + Tickertext";

function nPos(){ window.txt=
window.txt.substring(2,window.txt.length)+
window.txt.substring(0,2);
document.getElementById("lt").innerHTML=window.txt;
}
window.onload=function(){
var laufen = window.setInterval("nPos()",300);
                        }

Alternativen

Lauftexte können natürlich auch anders realisert werden., InnerHTML für Netscape 4 war hier der Anlass, und für wechselnde Informationen wäre es auch ein geignetes Mittel, bei statischen Textelementen kann aber clip ein eleganteres Werkzeug darstellen.

Marquee wird von einigen Browsern unterstützt, bei Mozilla aber wenn überhaupt in Verbindung mit aktiviertem JavaScript. Sonst ist Marquee auch als Noscriptvariante zusätzlich zum Script einsetzbar, und der Inhalt wird auch als statischer Text von Lynx ausgegeben:

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12

<noscript>
  <marquee 
            width="600"
            direction="left" 
            scrollamount="4" 
            scrolldelay="80"> 
                 + Dies ist der Lauftext. 
                 + Er läuft immer wieder erneut ab.
                 + Tickertext 
  </marquee>
</noscript>

Code mit TextNode

Bei Browsern wie Mozilla kann die Methode createTextNode statt innerHTML nötig oder vorteilhaft sein:

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17

/*   Kristof Lipfert Duesseldorf (c) 2002             */
/*   Lauftext innerHTML und createTextNode            */

function nPos(){
window.txt=
window.txt.substring(1,window.txt.length)+window.txt.substring(0,1);

if(document.createTextNode)

 document.getElementById("lt").replaceChild(
        document.createTextNode(window.txt),
    document.getElementById("lt").firstChild);

else document.getElementById("lt").innerHTML=window.txt;
}

Als Browserweiche wird hier entsprechend document.createTextNode abgefragt. Für die Browser IE und Netscape 4 wird hier getElementById und für Netscape 4 noch innerHTML als Methode bereitgestellt.