Seiteninhalt

• Ticker (JS)
• Demonstration
• Ticker (qpAnimMove)
• Methoden
• Beispielaufruf
• Browserkompatibilität
• Anregungen und Verbesserungsvorschläge

Ticker (JS)

Das Script realisiert einen Ticker, der einzelne News der Reihe nach in den Anzeigebereich schiebt. Dort werden sie für einen bestimmten Zeitraum angezeigt, um den Inhalt lesen oder Links anklicken zu können.

• JavaScript (kommentiert, ca. 7kB)

Demonstration

In diesem Beispiel wird zunächst ein RSS-Feed zu den Themen CSS und JS von tutorials.de geholt. Der Feed wird geparst und Kategorie, Titel und Link zum Thema im Ticker angezeigt.

Ticker (qpAnimMove)

Zuerst muss das benötigte JavaScript in das Dokument eingebunden werden.

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

Um einen Ticker zu erstellen, muss ein Tickerobjekt ereugt werden. Die gewünschten Eigenschaften können dem Konstruktor mittels eines Objektes (objAttr) übergeben werden.

objTicker = new qpAnimMove(objAttr);

Attribute

• objAttr

  Mit objAttr kann ein Objekt mit Attributen übergeben werden, mit deren Hilfe die Grösse und das Verhalten des Tickers individuell eingestellt werden kann.

  Die Angabe der Attribute sind bis auf das News-Array otional. Fehlt dieses oder enthält keine Werte, wird das Instanziieren des Tickers abgebrochen.

  objAttr = {id: string,
           width: integer,
           height: integer,
           first: 0/1,
           type: string,
           duration: integer,
           news: array,
           wait: integer});
   
  • id - Eindeutige ID des Tickers (über #ID können zusätzliche CSS-Formatierungen zugewiesen werden)
  • width - Breite des Tickers
  • height - Höhe des Tickers
  • first - Soll die erste News beim Laden angezeigt werden (1) oder hereingeschoben werden (0)
  • type - Bewegungstyp, mit der die News in den Anzeigebereich geschoben werden. Derzeit stehen die Typen quadratic, sine und linear zur Verfügung.
  • duration - Animationsdauer zum Schieben einer News in den Anzeigebereich
  • news - Ein Array mit den anzuzeigenden News (mehr Informationen weiter unten)
  • wait - Zeitraum in Sekunden, den die News nach der Animation stehen bleiben sollen
   

News-Array - news

Das News-Array muss eine vorgeschriebene Syntax einhalten. In der ersten Komponenete wird die Nachricht angegeben. Diese kann auch HTML-Tags (außer DIV) enthalten. Die zweite Komponente dient zur Aufnahme einer CSS-Klasse, die der zugehörigen Nachricht zugeordnet ist. So ist es möglich, jede News mit individuellen Formatierungen auszeichnen zu können.

news: [{html: string, css: string},
       {html: string, css: string},
       // ...
       {html: string, css: string}]

Das Nachrichtenfeld kann auch als eigenständiges Array außerhalb angelegt werden. Dem Attribut news wird in einem solchen Fall die Variable zugewiesen.

Methoden

Die Tickerklasse unterstützt zwei Methoden, die zum Steuern der Anzeige dienen.

qpAnimMove.StartTicker()

Diese Methode startet den Ticker. Sie kann zum Beispiel manuell über einen Button oder automatisiert im onload-Event des Dokuments aufgerufen werden.

qpAnimMove.Stop()

Diese Methode kommt zum Einsatz, wenn der Ticker gestoppt werden soll.

Beispielaufruf

Das nachstehende Codefragment zeigt, wie der Aufruf zum Erzeugen eines Tickers mit drei Nachrichten aussehen könnte.

Start Ticker Stop Ticker

objMover = new qpAnimMove({
  id: 'tickerID',
  width: 240,
  height: 24,
  first: 0,
  type: 'quadratic',
  duration: 30,
  news: [{html: "Erste Nachricht", css: "class1"},
         {html: "Zweite Nachricht", css: "class2"},
         {html: "<b>Dritte</b> Nachricht", css: ""}],
  wait: 2
});

CSS

Die CSS-Definitionen zum obigen Beispiel sehen wie folgt aus.

#tickerID{
  border: 1px solid #aaa;
  font-size: 14px;
  margin-bottom: 6px;
}
.class1{ color: #000;
         background: #fc0;}
.class2{ color: #fff;
         background: #369;}

Browserkompatibilität

Das Script wurde in folgenden Browsern erfolgreich getestet.

• Firefox 1.5+
• Seamonkey
• Netscape 7.1+
• Mozilla
• IE 5.0+
• Opera 7.54+
• Safari 3.1 (Win)
• Google Chrome

Anregungen und Verbesserungsvorschläge

Anregungen und Verbeserungsvorschläge können gerne hier gepostet werden. Selbstverständlich steht dafür auch das Kontaktformular zur Verfügung.

Foto: aboutpixel.de | snygo