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


Der „Checkbox-Hack“ oder wie mache ich eine Weiterlesen-Funktion

Autor*in: Florian Müller


Technologie


Da ich immer wieder von Unsicherheiten für eine Weiterlesen-Funktion lese, wollte ich euch eine schöne und schnell zu implementierende Möglichkeit zeigen, wie man diese auch Implementieren kann. Diese wurde mir von Benni vor ein paar Wochen vorgestellt und ist auch schon bei ein paar Projekten im Einsatz. Die HTML Struktur ist relativ einfach und kann …


Beitrag lesen
01
AUG
16

JavaScript Days Berlin und online 2022

Autor*in: Magdalena Piller


Technologie // Über den Tellerrand


Ein kurzes Wrap-Up meiner diesjährigen Teilnahme an den JS-und Angular-Days. Leider wurde in diesem Jahr die Konferenz nicht als volle „Hybrid“-Veranstaltung gehalten, so dass nur eine geringe Auswahl an Sessions online zur Verfügung standen. Sehr schade! Trotzdem fanden sich noch einige spannende Themen.


Beitrag lesen
07
NOV
22

The Vanilla Javascript Repository

Autor*in: Benjamin Hofmann


Technologie   //   User Experience & Design


Und gleich noch ein Linktipp für all diejenigen, die wie ich, nur ungern jQuery einsetzen und ihre Seiten dadurch aufblähen oder verlangsamen. Unter Vanilla List gibt es eine optisch sehr ansprechende Sammlung von Skripten, die auf Vanilla JS aufbauen und viele unserer Anwendungsfälle abdecken können. Sehr schön ist auch die direkte Anzeige davon, ob eine …


Beitrag lesen
23
SEP
16

Java-Orbit 2024

Autor*in: Tobias Pfannkuche


Technologie   //   Über den Tellerrand


Foto von Nicolas Gras auf Unsplash

Der Hype der vergangenen Jahre rund um AI lässt spürbar nach, die immer noch verhältnismässig junge Technologie hat den Einzug in den Alltag gerade auch in der Software-Entwicklung gefunden und steht nun vor der Herausforderung, sich zu bewähren. So wie davor zahlreiche andere technologische Entwicklungen und Veränderungen.


Beitrag lesen
18
NOV
24