web output :: JavaScript ListNewsTicker

JavaScript ListNewsTicker

Diese JavaScript Klasse ist schon recht weit entwickelt (Aktuell ist Version 2.1 und begonnen habe ich mit Version 0.1 Anfang 2004) und ich habe Sie seither schon bei diversen Jobs erfolgreich eingesetzt.

Der Große Vorteil dieses Tickers ist, daß sämtliche Daten des Tickers im Quellcode vorhanden sind, und somit von Suchmaschinen und/oder Screenreadern problemlos erfasst werden können.

Durch die Klasse ".tickerAttached" die nach erfolgreicher Initialisierung des Tickers an das umgebende Element angeheftet wird, kann die Liste mit Inhalten auch für User ohne JavaScript komplett anders formatiert werden und so stets zugänglich bleiben.

Die Anwendung ist denkbar einfach und sehr Flexibel.

Beispiel:


<script src="js/listNewsTicker.js" type="text/javascript" language="JavaScript"></script>
<script type="text/javascript" language="JavaScript">

window.onload = function(){
newsTicker = new JsListNewsTicker('tickerh','newsTicker',5,true,'tick');
newsTicker2 = new JsListNewsTicker('ticker','newsTicker2',3000,true,'blend');
newsTicker3 = new JsListNewsTicker('ticker','newsTicker2',3000,true,'lettertick');
}

</script>

Erklärung:
Die Instanz "newsTicker" die in dem ersten Beispiel auf das Element "tickerh" angewendet wird, wird die enthaltene Liste in einen horizontalen Ticker transformieren, in dem sich die einzelenen Listitems in einer Reihe mit einer Geschwindigkeit von einem Pixel pro 5 Milisekunden von flüssig rechts nach links bewegt.

In dem zweiten Beispiel wird die Instanz "newsTicker2" einen Newsticker erzeugen, der die enthaltenen Texte der Listitems der Reihe nach, in einem Intervall von 3000 Milisekunden (3 Sekunden), ein und ausblendet.
Hier können optional über das Stylesheet auch Übergangseffekte für den Internet Explorer angewendet werden.


filter:revealTrans(Duration=1,Transition=12);

An einer Lösung auch den anderen Browsern ein bisschen Effekthascherei zu gönnen arbeite ich noch, es wird aber wohl auf einfache Alphaüberblendungen hinauslaufen. Vielleicht werde ich aber auch das ganze Script nochmal mit jQuery, Mootools oder Script.aculo.us nachbauen und dann einfach die eingebauten Effekte nutzten - mal sehen :-)

Der Testcase wurde in folgenden Umgebungen fehlerfrei getestet:

  • Windows
    • Firefox 1.5
    • IE 7 Beta 2
    • IE 6
    • IE 5.5
    • IE 5.01
    • Opera 8.02
  • MAC OS X
    • Firefox 1.5
    • Safari 2.03
    • IE 5.02 MAC
  • Linux (Ubuntu)
    • Firefox 1.07
Eine funktionierende Demo findet Ihr hier
Runterladen könnt Ihr Euch die Files hier: JsStyledForm_2.1.zip
Kommentare hierzu bitte bei dem zugehörigen Blogeintrag abgeben.

more

EntryID: