Boah, Newsticker sind doch so…. 2016


Einige von uns haben sich ja schon die Augen gerieben: Der tot geglaubte Newsticker erhält bei vielen Kunden im Portal wieder Einzug. Leider kam es bei diversen Umsetzungen mit fertigen Tickern in letzter Zeit aber zu einigen Problemen.

Problem 1: Responsivität
Die Liste an fertigen Tickern im Netz ist lange und die Fähigkeiten der Ticker sind umfangreich, doch eines haben die meisten gemeinsam: Auf responsiven Seiten kommen sie nicht klar und verrechnen sich, sobald das Tablet geschwenkt oder das Browser-Fenster verändert wird.

Problem 2: CSS & IE
Neueste Trends gehen dahin, den Ticker per CSS3 zu animieren. An sich keine schlechte Idee, leider aber noch nicht praxistauglich, da der liebe Internet Explorer das nicht akzeptiert. Daher muss nach wie vor auf JS zurückgegriffen werden.

Problem 3: CSS & Tickerlänge
Kurioserweise werden viele Ticker neuerdings per CSS gebaut und die Länge des Tickers abhängig vom Anzeigefenster gemacht, nicht jedoch von der Textlänge. Dies geht bei kurzen Meldungen vielleicht gut, mit längeren Texten und kleinen Anzeigefenstern im responsiven kann das aber nicht funktionieren. Der Ticker bricht natürlich mitten im Text ab und beginnt von vorne.

Lösung
Daher habe ich nun bei meinen Projekten den Ticker durch einen eigenen JS-Ticker ersetzt. Dieser ist äußerst simpel aufgebaut und kann nur wenig. Aber er kann das, was er können muss: Er funktioniert in allen Browsern, stoppt beim Mouseover, berechnet sich anhand der tatsächlichen Textlänge und verrechnet sich vor allem im responsiven Verhalten nicht dauernd. Die Lösung ist also wie so oft: Selber bauen. Dauert meist nicht länger, als fertigen Code zu suchen und anzupassen.

Kommentare

Selber kommentieren:






Weitere Beiträge zum Thema Technologie


ML Conference 2018

Autor*in: Tobias Pfannkuche


Technologie // Über den Tellerrand


„Your scientists were so preoccupied with whether or not they could, they didn’t stop to think if they should.“ Ian Malcolm, Jurassic Park „Machine Learning sucks. It really does.“ Dr. Pieter Buteneers, ML Conference 2018 „Don’t wait for perfection.“ Dr. Ulrich Bodenhausen, ML Conference 2018 Ein Bericht zur ML-Konferenz rund um das Thema Künstliche Intelligenz …


Beitrag lesen
27
JUN
18

Probleme mit Hochkommas in Produktliniennamen

Autor*in: Darian Dragut


Projekte // Technologie


Nach dem Basis-Setup der imx.Platform Instanz für Chiemgau wurde ich mit einem merkwürdigen Fehler konfrontiert. Sowohl in den Suchen für Stämme und Angebote als auch in deren Pflegemasken wurde der Produktlinienbaum nicht angezeigt. Noch merkwürdiger erschien mir der Fehler, nachdem ich feststellte, dass die Produktlinien in der Produktlinien-Administration hingegen problemlos angezeigt werden. Da keinerlei Fehler …


Beitrag lesen
02
DEZ
15

Embedded JavaScript

Autor*in: Benjamin Hofmann


Technologie


Dank Christian Heindl bin ich auf EJS aufmerksam geworden, einer Template-Engine für Javascript, die Smarty gar nicht so unähnlich ist. Damit ist es ein leichtes HTML in Javascript zu bauen und auch wiederzuverwenden. Aktuell habe ich das in der Karte von NÖW so eingebaut, wo unter anderem die Infowindows durch diese Logik generiert werden. Das Schöne …


Beitrag lesen
07
NOV
14

Parallax Scrolling – ein cooler Effekt der nicht ganz neu ist

Autor*in: Axel Güldner


Technologie // User Experience & Design


Heute wollte ich mal kurz einen Effekt vorstellen, den viele sicher schon mal gesehen haben, ihn toll fanden, aber keine Ahnung hatten wie das eigentlich funktioniert. Das Thema ist Parallax Scrolling, ein Effekt der auf Websites auftritt, wenn verschiedene Hintergrund Ebenen ein unterschiedliches Scrollverhalten aufweisen. Dies wirkt unerwartet und frisch, da dies nicht die gewohnte …


Beitrag lesen
17
NOV
11