Newsticker

Nur um das klarzustellen: Ich mag keine Newsticker, sie haben keinen Wert, belasten die Performance und nerven die Besucher. Aber die Website Betreiber wollen sie, also muss ich mich damit befassen.

Newsticker sind so eine Sache ... die einen lieben sie, die anderen hassen sie. Das marquee Element ist kein html Standard, deshalb haben Experten In der Vergangenheit Lösungen mit CSS3 und JavaScript oder beiden zusammen präsentiert, nur um marquee zu umschiffen.

Meine Tests haben ergeben, dass die Browserhersteller auf den html Standard pfeifen und marquee unterstützen, sogar ziemlich einheitlich im Design. Da sich aber das W3C aus ideologischen Gründen standhaft weigert, marquee in den html Standard aufzunehmen, validiert marquee nicht nach html.

Um das zu umgehen, kann man marquee per JavaScript ausgeben. Man muss sich halt entscheiden, ob der Newsticker ohne JavaScript nicht funktioniert, oder ob man eine Fehlermeldung bei der html Validierung akzeptiert. Ich habe mich für die JavaScript Variante entschieden.

Das ist ein horizontaler NewsTicker « » marquee mit verschiedenen per inline-CSS gestalteten Trennelementen +++ und in Standard Geschwindigkeit Das ist ein horizontaler NewsTicker « » marquee mit verschiedenen per inline-CSS gestalteten Trennelementen +++ und in Standard Geschwindigkeit Das ist ein horizontaler NewsTicker « » marquee mit verschiedenen per inline-CSS gestalteten Trennelementen +++ und in Standard Geschwindigkeit

vertikaler Newsticker

Pianobar


Veranstaltungen dieses Jahr

jeden Samstag ab 20:00 Uhr Musik und Tanz mit dem Piano Man

jeden 2. Freitag ab 21:00 Uhr mit Livemusik ins Wochenende


nächstes Jahr

wird rechtzeitig bekanntgegeben


übernächstes Jahr

wird rechtzeitig bekanntgegeben


Hier der JavaScript Code für die beiden Ticker. Er kann sowohl im Template als auch im CMSimple Inhalt verwendet werden, im CMSimple Inhalt muss er in der Quelltext Ansicht eingefügt werden.

An Stelle der newsbox() Funktion, die eine versteckte CMSimple Seite aufruft, kann auch direkt der Text, der im Ticker erscheinen soll, geschrieben werden.

Gestaltung per CSS

So können die Ticker aussehen, wenn sie per CSS getaltet werden:

horizontal

vertikal

Demo Ticker vertikal

Inhaltsverzeichnis

nach oben