IT-Academy Logo
Sign Up Login Help
Home - Programmieren - JavaScript - Javascript: Newsticker



Javascript: Newsticker

Dieser Artikel zeit wie man mittels JavaScript - Newsticker realisieren kann.


Autor: Patrick Faes (dreamer)
Datum: 23-02-2004, 14:39:59
Referenzen: keine
Schwierigkeit: Fortgeschrittene
Ansichten: 10372x
Rating: 8 (1x bewertet)

Hinweis:

Für den hier dargestellte Inhalt ist nicht der Betreiber der Plattform, sondern der jeweilige Autor verantwortlich.
Falls Sie Missbrauch vermuten, bitten wir Sie, uns unter missbrauch@it-academy.cc zu kontaktieren.

[Druckansicht] [Als E-Mail senden] [Kommentar verfassen]



Einführung

Newsticker sind sehr nützlich um die News auf wenig Platz zeigen zu können. Daher werde ich mal erklären wie man das macht. Die meisten Newsticker nutzen aber ein Formularfeld um die News an zu zeigen. Da diese nur bedingt mit CSS formatiert werden können (vor allem der Internet Explorer streikt da), benutze ich lieber eine einen DIV-Bereich der in einer Tabellenzelle eingebaut wurde. Diese sind leichter formatierbar. Hier erst mal ein Beispiel:


Die Praxis

Und hier ist der Code des obigen Beispieles:
<script type="text/javascript">
var nachricht="Dies ist also ein Newsticker.
Da sie in eine Tabellenzelle eingebaut wurde,
ist sie leichter zu formatieren als ein Formularfeld.";
document.write('<table><tr><td style="padding:2px;color:blue;
background-color:red;border:5px solid black;
"><div  id="news" style="width:10em;height:1em;overflow:hidden;
">'+ nachricht +'</div></td></tr></table>');
var anfang = -1;

function ticker() {
anfang++;
if (anfang == (nachricht.length + 1) ) anfang=0;
var nachricht2 = nachricht + " " + nachricht;
if (document.all)
 {document.all('news').firstChild.data = nachricht2.substr(anfang,25);}
if (document.layers)
 {document.layers('news').firstChild.data = nachricht2.substr(anfang,25);}
if (document.getElementById)
 {document.getElementById('news').firstChild.data = nachricht2.substr(anfang,25);}
}

setInterval("ticker()",300);
</script>
Der Text der Angezeigt werden soll, wird in eine Variable gespeichert. Da diese jedesmal wenn man eine News hinzufügt oder herausnimmt den Code bearbeiten muss, wäre es einfacher diesen durch PHP und MySQL zusammen zu setzen, aber das wird hier nicht behandelt (wenn es Fragen dazu gibt, bitte ich zum Forum auf dieser Seite). Der Text steht zwischen doppelte Anführungszeichen. Wenn Sie doppelte Anführungszeichen im Text nutzen möchten, können Sie diesen escapen indem Sie " schreiben.
Danach schreiben Sie die Variable in zum Schirm. Der Text steht in einem DIV-Bereich der in einer Tabelle sitzt. Sie können diese beiden völlig frei stylen, das DIV-Element muss aber unbedingt eine ID haben (sodass es später im Script aufgerufen werden kann) und die folgende Style-Eigenschaften:
  • overflow:hidden; definiert dass Content der nicht im Bereich des DIVs passt, nicht angezeigt wird.
  • width: wenn keine feste Breite angegeben wurde, wird sich der Bereich selbst ausdehnen
  • height: wenn keine feste Höhe angegeben wurde, wird sich der Content über mehrere Zeilen verteilen
Die Elementen wurden zwischen einfache Anführungszeichen geschrieben. Wenn Sie im Text solche nutzen wollen, benutzen Sie für ein linkes, und für ein rechtes.
Danach wird die Variable den Wert minus eins gegeben. Warum zeigt sich in der Funktion. Lass uns aber erst mal sehen was darunter steht. Mit setInterval wird festgelegt dass sich die Funktion alle 300 Millisekunden wiederholt. So wird der Inhalt (also der Text) jede 300 Millisekunden geändert, und so entsteht also der scrollende Effekt.
Aber zurück zu der Funktion: gleich zu Beginn wird die Variable Anfang mit 1 erhöht, wodurch der Wert 0 ist. Jedesmal wenn die Funktion aufgerufen wird, wird die Variable erhöht. Diese Variable bestimmt ab welcher Buchstabe der Text gezeigt wird. Wenn dieser Wert die Anzahl von Charakteren im Text + 1 erreicht hat, bekommt die Variable wieder den Wert 0, sodass der Text wieder ganz von vorn gezeigt wird.
Der Text der angezeigt werden soll, wird zusammen gesetzt aus zweimal den Text mit dazwischen ein Leerzeichen um den Text fließender wirken zu lassen.
Zuletzt wird getestet welcher der drei Referenzen der Browser erkennt:

- document.all ist für ältere Versionen von Internet Explorer
- document.layers ist für ältere Versionen von Netscape
- document.getElementById ist der heutige Standard

Darin wird dann referenziert zum DIV-Bereich (daher dass es eine ID haben muss) und mit der Funktion substr() wird dann der Inhalt geändert (Achtung PHP'ler: die Funktion substr() in Javascript ist unterschiedlich zu der in PHP). Und das geht so:

substr(anfang,25): Die Funktion zählt ab dem ersten Zeichen bis es soviele Zeichen gezählt hat wie es in der Variable anfang definiert wurde, Javascript fängt allerdings an von 0 zu zählen, z.B. wenn die Variable den Wert 24 hat, zeigt er den Text an ab dem 25sten Buchstaben. Von da an zeigt er 25 Buchstaben an.


no_comment
Professonial
Beitrag vom:
24-02-2004, 11:55:03

Der Newsticker ist merkwürdig und zeigt nicht, wie gewohnt, die Sätze und Worte zeichen für Zeichen an, sondern wartet, bis genug Platz für ein entsprechendes Wort ist. Es wirkt irgendwie immer so hingeschoben.

Angesehen hab ich ihn mir Mit Mozilla Firebird 0.61

-----------------------------------------------------
Es gibt nur 3 natürliche Feinde des Programmierers: Tageslicht, frische Luft und das unerträgliche Gebrüll der Vögel -- http://pc-intern.com http://straightvisions.com


[back to top]



Userdaten
User nicht eingeloggt

Gesamtranking
Werbung
Datenbankstand
Autoren:04508
Artikel:00815
Glossar:04116
News:13565
Userbeiträge:16552
Queueeinträge:06245
News Umfrage
Ihre Anforderungen an ein Online-Zeiterfassungs-Produkt?
Mobile Nutzung möglich (Ipone, Android)
Externe API Schnittstelle/Plugins dritter
Zeiterfassung meiner Mitarbeiter
Exportieren in CSV/XLS
Siehe Kommentar



[Results] | [Archiv] Votes: 1147
Comments: 0