FHEM Forum

Hallo setstate,

1. Danke!

2. Danke!

und dann noch eine Kleinigkeit:
im o.g. commit https://github.com/knowthelist/fhem-tablet-ui/commit/c249a7e2a2bc8cdaea50ad7328b87138af599e10#diff-0d4947d75566cda636dde54ce99ac934 (https://github.com/knowthelist/fhem-tablet-ui/commit/c249a7e2a2bc8cdaea50ad7328b87138af599e10#diff-0d4947d75566cda636dde54ce99ac934) ist folgender code im fhem-tablet-ui.css hinzu gekommen:
+@-webkit-keyframes marquee {
+ 0%   { text-indent: 100% }
+ 100% { text-indent: 0% }
+}
+@keyframes marquee {
+ 0%   { text-indent: 100% }
+ 100% { text-indent: 0% }
+}
+.marquee {
+ width: 100%;
+ margin: auto;
+ padding: 2px;
+ overflow: hidden;
+ white-space: nowrap;
+     animation: marquee 10s linear infinite;
+    -webkit-animation: marquee 10s linear infinite;
+}

Leider kommt damit bei mir nur ein "halber" Lauftext zustande. Der Text läuft von rechts ein, verschwindet aber sofort wenn er den linken Rand erreicht hat. Von meinen Bahn Verspätungsmeldungen fehlt somit immer ein Stück ;-)
siehe auch

Zitat von: rasti am 01 Februar 2016, 17:09:38
Die Schrift läuft von rechts nach links und sie den linken Rand berührt geht es von
vorne los anstatt durchzulaufen. Wo kann man das einstellen ?

Ich hatte in meiner Unwissenheit folgendes ergooglet (schreckliches Wort). Der Lauftext läuft unter Chrome, Firefox und fully wie gewünscht. Vielleicht kannst du ja den code korrigieren bzw. verallgemeinern und übernehmen?

Zitat von: robertPI am 30 Dezember 2015, 19:12:20
index.html

Code Auswählen Erweitern

<div class="marquee"><span><div data-type="label" data-device="oeffi_ToWork" data-get="travel_note_text_1" data-substitution="s/none//g"></div></span></div>

mystyle.css (muss natürlich in der index.html geladen werden)

Code Auswählen Erweitern

@keyframes marquee {
    0%   { transform: translate(0, 0); }
    100% { transform: translate(-100%, 0); }
}

.marquee {
width: 250px;
margin: 0 auto;
overflow: hidden;
white-space: nowrap;
box-sizing: border-box;
/* border: 1px red solid; */
}

.marquee span {
    display: inline-block;
    padding-left: 100%;
    text-indent: 0;
    /* border: 1px green solid; */
    animation: marquee 10s linear infinite;
     -webkit-animation: marquee 10s linear infinite;
}

Robert