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


Docker – Bereitstellung von Betriebs-Umgebungen über Container

Autor*in: Marc Kurzmann


Projekte // Technologie


Wie der eine oder andere Kollege bereits mitbekommen hat, war unser Informatik-Praktikant Lukas die vergangenen Wochen intensiv mit dem Thema Docker und der Möglichkeit zur effizienten Bereitstellung von Deployment-Umgebungen aus der Produktentwicklung heraus beschäftigt. Das Ergebnis kann sich sehen lassen: Es ist nun möglich mit minimalem Aufwand eine vollständige Betriebsumgebung einschließlich eines deployten Produkts eines …


Beitrag lesen
12
DEZ
14

Mass Apache .htaccess redirect generator

Autor*in: Benjamin Hofmann


Technologie


Vielleicht für den einen ganz nützlich wenn in einem Projekt mal wieder gefühlt hunderttausende Redirects notwendig sind: http://redirectgenerator.netmagnet.cz/. Hiermit ist es sehr einfach statische Redirects zu generieren, also ohne reguläre Ausdrücke in den URLs, die dann an Variablen übergeben werden. Das Tool habe ich schon ein paar mal kurz genutzt und fand es durchaus hilfreich …


Beitrag lesen
18
JAN
17

Photoshop-Ebenenstile als CSS3-Code exportieren

Autor*in: Michael Degener


Technologie   //   User Experience & Design


Ob Designer oder Entwickler, jeder der schon einmal eine Screen-Vorlage mit all seinen Ebenen mittels HTML und CSS zum Leben erwecken musste, hat sich insgeheim sicherlich schon einmal gewünscht, dass sich dabei manche Arbeitsschritte beschleunigen ließen. Wer kennt sie nicht, die allgegenwärtigen Buttons in Formularen, Teasern und Schnellsuchen. Von runden Ecken über Konturen und Schlagschatten …


Beitrag lesen
03
AUG
12

Google Maps und der Wikipedia-Layer

Autor*in: Benjamin Hofmann


Technologie


Seit dem Release von Google Maps v3 gab es keinen Wikipedia-Layer mehr, den man einfach so einblenden konnte. Laut diesem Issue bei Google wird das auch nicht mehr passieren, da der Layer zu wenig genutzt wird und der Aufwand für die Integration in keiner Relation zum Nutzen steht. Jedoch wurde dort eine API von einem …


Beitrag lesen
17
JUL
12