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


HTML5 Please

Autor*in: Benjamin Hofmann


Technologie


Sehr praktisch um schnell nachschauen zu können, was geht und was man vermeiden sollte.


Beitrag lesen
24
JAN
12

Und täglich grüßt die rote Leiste ;)

Autor*in: Benjamin Hofmann


Technologie


Hier mal ein kleiner Link-Tipp zu einer Seite mit sehr sehenswerten Comics, die sich mit typischen Entwickler-Themen beschäftigt: Geek&Poke. Die letzten drei Comics haben sich mit typischen Problemen beim Unit-Testing in Verbindung mit Continuous Integration beschäftigt und sprechen wahrscheinlich jedem von uns aus der Seele. Und ich glaube nicht daran, dass jemand von uns noch …


Beitrag lesen
20
FEB
17

Infrastructure as Code: Prolog

Autor*in: Bastian Schwarz


Technologie // Über den Tellerrand


Da unsere Developer VM nun auch schon wieder einige Zeit auf dem Buckel hat habe ich mich die letzten Wochen viel mit dem Thema Virtualisierungsmanagement und Provisioning beschäftigt. Mit was?! Beides klingt hochtrabender als es tatsächlich ist. Letztendlich geht es dabei um 2 Themenbereiche: Das Erstellen von virtuellen Umgebungen Das Einrichten und Konfigurieren dieser Umgebungen Das alles gab …


Beitrag lesen
27
MRZ
17

Textfield-Resize des Browsers steuern

Autor*in: Axel Güldner


Technologie


Wer hat dieses Textfield-Resize eigentlich eingeführt? War es der Chrome der es das erste mal angeboten hat? War es der Safari? Egal, Apple oder Google, einer von beiden ist mit Sicherheit schuld. Aber Moment, wovon rede ich da eigentlich? Dem einen oder anderen, vielleicht ja auch jedem, ist evtl. aufgefallen, dass sich Textfields in Formularen …


Beitrag lesen
05
APR
12