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


WebKit Sibling Bug

Autor*in: Benjamin Hofmann


Technologie // User Experience & Design


Bei kleineren Anpassungen in einem unserer Projekte ist heute im alten Standard-Browser von Android ein Bug[1] aufgefallen, der dazu führte, dass die Listenelemente mit initial verstecktem Inhalt diesen beim Anklicken nicht anzeigten. Nach einer kurzen Recherche bin ich hier auch auf die Lösung gestoßen, den Checkbox Hack on Mobile Webkit[2]. Klingt fies, ist aber nur …


Beitrag lesen
13
MRZ
15

Messung Dokumentgröße

Autor*in: Bastian Schwarz


Projekte // Technologie


Seit kurzem scheint die Anzeige der Dokumentgröße über die Web Developer Toolbar im Firefox nicht mehr korrekt zu funktionieren. Es wird häufig die Komprimierung von Scripten / Stylesheets nicht mehr korrekt erkannt.  Alternative Google Chrome – Developer Tools  Kurzanleitung Über Tools – Entwicklertools öffnen, auf „Network“ Tab wechseln, Seite mit Strg+F5 neuladen. Jetzt sieht man …


Beitrag lesen
16
APR
13

Mit HeidiSQL per SSH-Tunel auf Live-Systeme verbinden

Autor*in: Stefan Oswald


Technologie


Unsere Produktiv-Systeme akzeptieren aus Sicherheitsgründen keine Verbindungen mit dem MySQL-Server von externen Adressen. Dennoch möchte man manchmal mit einem anderen Tool als phpMyAdmin auf die Datenbanken sehen. Die Lösung hierfür ist ein SSH-Tunnel. Einfacher Hintergrund: Statt auf den normalen MySQL-Port verbinden wir uns über den SSH-Server mit dem Zielsystem. Dort angekommen können wir uns mit …


Beitrag lesen
23
APR
12

Erkenntnisse der IPC 2011

Autor*in: Benjamin Hofmann


Projekte // Technologie // User Experience & Design


Bevor ich lange im Developer Meeting etwas erzähle, was dann sowieso nur wieder in Vergessenheit gerät, dachte ich mir meine Erkenntnisse von der IPC 2011 in Mainz einfach hier niederzuschreiben. Dauerhaft für alle von uns sichtbar und mit einer Möglichkeit Fragen zu stellen. Hier also meine Top 7 (unsortiert) der Dinge, die ich interessant fand …


Beitrag lesen
08
DEZ
11