Gibt es so etwas auch in FTUI3 ?
<div data-type="scrolllabel"
data-device="Wetter_DD_Proplanta"
data-get="weather"
data-orientation="horizontal" style="width:170px; position: absolute"
class="cell height-narrow left"></div>
In FTUI3 habe ich es so gelöst:
<div style="width:80px" class="marquee"><span><ftui-label size="0" class="size-2" [text]="Wetter_DD_Proplanta:fc0_weatherDay"></span></div>
.marquee {
white-space: nowrap;
overflow: hidden;
}
.marquee span {
display: inline-block;
padding-left: 105%;
animation: marquee 10s linear infinite;
}
@keyframes marquee {
0% { transform: translateX(0); }
100% { transform: translateX(-100%); }
}
Dies ist aber eine richtige Krücke. Der Lauftext läuft immer, auch wenn der Inhalt kurz ist und das Feld wird im Textdurchlauf nach links verschoben.
Besser als nichts, aber nicht schön.
Hat jemand noch eine bessere Variante?
Das geht denke ich nur mit js:
https://jsfiddle.net/ppajer/zeuzzguk/
LG
Danke, leider bekomme ich den Code noch nicht zum laufen.
Der Text wird angezeigt, dass css reagiert auch. So habe ich den Code in den Header eingefügt. Habe es auch mit einer extra js Datei probiert. Es will nicht.
<script language="javascript" type="text/javascript">
function isElementOverflowing(element) {
var overflowX = element.offsetWidth < element.scrollWidth,
overflowY = element.offsetHeight < element.scrollHeight;
return (overflowX || overflowY);
}
function wrapContentsInMarquee(element) {
var marquee = document.createElement('marquee'),
contents = element.innerText;
marquee.innerText = contents;
element.innerHTML = '';
element.appendChild(marquee);
}
var element = document.getElementById('overflow');
if (isElementOverflowing(element)) {
wrapContentsInMarquee(element);
}
</script>
Ok. stefan aus dd ;)
Hier ein möglicher Weg (ist mein Test):
Edit: code entfernt
jetzt hier:
https://forum.fhem.de/index.php/topic,128929.msg1233022.html#msg1233022
LG mr_petz
Super, danke!
Zwei kleine Sachen habe ich noch, um es perfekt zu machen.
Wie kann man die Durchlaufgeschwindigkeit anpassen?
Wenn der Inhalt in das Feld passt, kann man die Funktion auch aussetzen lassen?
Danke schon mal.
'<marquee scrollamount="4">' + t + '</marquee>'
Die Funktion sieht ob es ins div passt...
LG
Die Zeiteinstellung passt nun.
Aber das größte Problem ist noch, das bei mehrerer Verwendung der Funktion, alles in das erste Feld geschrieben wird. Die Berechnung ob es ins div passt klappt noch nicht.
ja ist klar. ist ja auch nur für ein ftui-label...
Da müsstest du entweder eine Schleife oder mehrere id#s erstellen.
Ok. kleines Update. War doch was nicht ganz korrekt:
<ftui-button (value)="text1" states="Yadda yadda overflowing text this line is too long oh noes!,zu kurz,0123456789101112131415161718"></ftui-button>
<div id="box" style="height:18px;width:200px;white-space:nowrap;overflow:hidden;">
<ftui-label id="overflow" [text]="text1 | t=>marquee(t)"></ftui-label>
</div>
<script language="javascript" type="text/javascript">
function marquee(t){
const box = document.querySelector("#box");
const box_width = box.offsetWidth;
const elem = document.querySelector("#overflow");
elem.mainSlotElement.innerHTML = t;
const label_width = elem.offsetWidth;
if (label_width > box_width) {
elem.mainSlotElement.innerHTML = '<marquee scrollamount="4">' + t + '</marquee>';
} else {
elem.mainSlotElement.innerHTML = t;
}
}
</script>
Wie gesagt, das ist nur für ein ftui-label!
LG mr_petz
Danke,
ich habe nun mehrere id#s erstellt und es funktioniert so wie es soll.
Der ideale und einfachere Weg wäre natürlich über eine Schleife.
Ich weis ja nicht wieviel du brauchst.
Hier noch ein einfaches Beispiel für 2 Label:
<ftui-button (value)="text1" states="Yadda yadda overflowing text this line is too long oh noes!,zu kurz,0123456789101112131415161718"></ftui-button>
<ftui-button (value)="text2" states="0123456789101112131415161718,Yadda yadda overflowing text this line is too long oh noes!,zu kurz"></ftui-button>
<div id="box" style="height:18px;width:200px;white-space:nowrap;overflow:hidden;">
<ftui-label id="overflow" [text]="text1 | t=>marquee(t,l='0')"></ftui-label>
</div>
<div id="box" style="height:18px;width:200px;white-space:nowrap;overflow:hidden;">
<ftui-label id="overflow" [text]="text2 | t=>marquee(t,l='1')"></ftui-label>
</div>
<script language="javascript" type="text/javascript">
let l = 0;
function marquee(t){
const box = document.querySelector("#box");
const box_width = box.offsetWidth;
const elem = document.querySelectorAll("#overflow");
if (l==='0'){
elem[0].mainSlotElement.innerHTML = t;
}
if (l==='1'){
elem[1].mainSlotElement.innerHTML = t;
}
const label_width = elem[0].offsetWidth;
const label_width2 = elem[1].offsetWidth;
if (label_width > box_width && l==='0') {
elem[0].mainSlotElement.innerHTML = '<marquee scrollamount="4">' + t + '</marquee>';
} else if (l==='0'){
elem[0].mainSlotElement.innerHTML = t;
}
if (label_width2 > box_width && l==='1') {
elem[1].mainSlotElement.innerHTML = '<marquee scrollamount="4">' + t + '</marquee>';
} else if (l==='1'){
elem[1].mainSlotElement.innerHTML = t;
}
}
</script>
Leichter ist es natürlich wenn setstate ein marquee ins Label einbaut...
LG