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


Einschränkung für Video AutoPlay ab Chrome 66

Autor*in: Stefan Oswald


Technologie // User Experience & Design


Seit der Verteilung von Chrome Version 66 tritt das Problem auf, dass Videos plötzlich nicht mehr von alleine starten, obwohl Autoplay vorgesehen und auch richtig konfiguriert ist. Besonders unpraktisch ist das für Bewegtbilder-Keyvisuals. Die Debug-Konsole liefert dabei folgenden Hinweis: Uncaught (in promise) DOMException: play() failed because the user didn’t interact with the document first. https://goo.gl/xX8pDD …


Beitrag lesen
07
MAI
18

Marzipano – a 360° viewer for the modern web

Autor*in: Benjamin Hofmann


Projekte   //   Strategie & Konzeption   //   Technologie


Marzipano Alt
Beschreibungstext Beschreibungstext

Im Zuge einer Aufwandsschätzung für zur Einbindung von 360°-Panoramen, die vom Kunden selbst erstellt und eingebunden werden können, bin ich auf Marzipano gestoßen. Ein Skript, welches das mit Bravour erledigt und mit 55 KB Dateigröße (komprimiert) auch einen relativ kleinen Footprint hat. Das Tool wird übrigens von Mitarbeitern von Google entwickelt, ist aber kein offizielles …


Beitrag lesen
16
JAN
17

GOTO Berlin 2017 – Teil 2

Autor*in:


Technologie


Hier nun Teil 2 meines Berichts zur GOTO Berlin. Nach dem Container & Kubernetes Security Workshop am Mittwoch und dem ersten Haupt-Konferenztag am Donnerstag (Bericht hier), rundete der ML-Track am Freitag, 17. November, meine Themenwahl ab. Einen beeindruckenden Einstieg in den Tag lieferte Prof. D’Andreas Keynote „Drones on Broadway“, bei der auf die Forschung im …


Beitrag lesen
19
DEZ
17