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


bLazy.js

Autor*in: Benjamin Hofmann


Technologie   //   User Experience & Design


Und schon wieder eine kleine Standalone-Vanilla-JS-Library, die ich am Wochenende entdeckt habe: bLazy.js (GitHub, Demo) In dem ca. 1,5 KB Skript befindet sich die komplette Logik, um Bilder erst dann zu laden wenn sie im Viewport angezeigt werden. Und nicht nur Bilder, sondern auch I-Frames und andere Embeds können dynamisch nachgeladen werden. Und es funktioniert …


Beitrag lesen
26
SEP
16

Caching – Probleme mit Permissions

Autor*in: Florian Müller


Technologie


Ich war gerade an einem Ticket um eine Lösung für das leidige Thema des Caching der Autosuggest zu lösen. Das grundlegende Problem ist, dass das Autosuggest recht umfangreich ist (gecached bis zu 2MB). Sollte nun ein User ein Wort eingeben und kein Autosuggest vorhanden sein, wurde dieser gebaut und gecached. Die hat auch mal gerne eine …


Beitrag lesen
13
JAN
17

Templating with good ol‘ Javascript

Autor*in: Benjamin Hofmann


Technologie


Die letzten Tage bin ich auf eine interessante Technik gestoßen, mit der man ein sehr simples Templating in Vanilla JS umsetzen kann. Das Ganze orintiert sich an den Techniken, die z.B. Handlebars.js oder die originale Micro-Templating-Technik von John Resig nutzen, ist jedoch deutlich kleiner. Der Code Der komplette Code basiert auf RequireJS, kann aber natürlich …


Beitrag lesen
29
SEP
16

imx.Platform News: Der Toureneditor ist da!

Autor*in: Selina Hammerschmid


infomax   //   Technologie


In den vergangenen Wochen hat sich bei uns alles um das Thema Touren gedreht. Sie können jetzt bestehende Touren hochladen, bearbeiten und neue Touren zeichnen.


Beitrag lesen
09
AUG
23