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


Besuch der c’t WebDev 2020

Autor*in: Florian Sauer


Technologie


Logo c't WebDev 2020

Vom 4.-6. Februar 2020 haben Matthias und ich in Köln die zweite c’t WebDev, eine Frontend Konferenz, besucht. Diese war in zwei Teile aufgegliedert. Am ersten Tag wurden optionale Workshops angeboten. Die folgenden zwei Tage über fand die eigentliche Konferenz mit den Vorträgen statt.


Beitrag lesen
13
FEB
20

Augmented Reality trifft TYPO3: POIs neu erleben

Autor*innen: Verena Schmuck, David Kelemen


infomax   //   Projekte   //   Technologie   //   Über den Tellerrand


Wie bringt man POIs auf mobilen Geräten intuitiv und platzsparend zur Anzeige? Diese Frage stand am Anfang von Davids Abschlussprojekt der Ausbildung zum Fachinformatiker Anwendungsentwicklung und wurde mit einer innovativen Lösung beantwortet: dem imx.ARBrowser, einer TYPO3-Erweiterung zur Darstellung von POIs in einer Augmented-Reality-Ansicht.


Beitrag lesen
29
JUL
25

Spamschutz-Alternative: MotionCAPTCHA

Autor*in: Stefan Oswald


Projekte // Technologie // Über den Tellerrand // User Experience & Design


Sehr interessanter Ansatz: > MotionCAPTCHA > Beispielseite Die Idee dahinter ist, dass der Benutzer eine vorgegebene Form (z.B. einen Kreis, einen Stern oder ein Häkchen) nach malen muss. Bots dürften daran zuverlässig scheitern. Der Autor betrachtet die derzeitige Version 0.2 als „Proof of Concept“ und noch nicht aus produktiv einsetzbare Lösung. Wir sollten das im …


Beitrag lesen
20
MAI
14

XAMPP: PHPUnit installieren

Autor*in: Stefan Oswald


Technologie


Im Auslieferungszustand funktioniert das in XAMPP installierte PHPUnit nicht, bzw. nicht so wie wir das bei infomax gerne hätten. Folgende Anleitung beschreibt die Einrichtung einer aktuellen PHPUnit-Installation, die mit XAMPP, NetBeans und unserer imx.Platform zusammen arbeitet. PHPUnit lässt sich am besten mittels PEAR installieren. Folgende Datei herunter laden und nach x:xamppphp kopieren: http://pear.php.net/go-pear.phar Sollte die …


Beitrag lesen
05
AUG
13