Laufschrift / Ticker

[pix]

Hier ist ein Bespiel für die Formatierung mit CSS3 und Animationen:

http://jsfiddle.net/2bf5z/

Nimm dafür ein HTML Widget.

Den Inhalt bekommst du als Binding hinein:

{javascript.0.VARIABLEMITEXT}

Den CSS-Code kannst du in Style Tags
oben drüber packen oder im CSS-Reiter schreiben

.

Gruß

Pix

[Desa]

Oki, Ich versuche, melde mich, Danke

[pix]

Habs mal ausprobiert:

Widget:

! ````
[{"tpl":"tplHtml","data":{"g_fixed":true,"g_visibility":false,"g_css_font_text":false,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","refreshInterval":"0","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"html":"
! {javascript.2.WetterOnline.biowettervorhersage.süddeutschland.Titel}: {javascript.2.WetterOnline.biowettervorhersage.süddeutschland.Untertitel} - {javascript.2.WetterOnline.biowettervorhersage.süddeutschland.Prognose}
! ","name":"Laufschrift"},"style":{"left":"269px","top":"24px","z-index":"25","width":"737px","height":"23px"},"widgetSet":"basic"}]

CSS (muss im CSS-Reiter des VIS-Editors stehen!)

>! ````
@keyframes marquee {
    0%   { text-indent: 100% }
    100% { text-indent: 0% }
}
>! .marquee {
    width: 100%;
    height: 100%;
    margin: auto;
    padding: 2px;
    overflow: hidden;
    white-space: nowrap;
    border: solid 0px #CCCCCC;
    -webkit-animation: marquee 16s linear infinite;
    -moz-animation: marquee 16s linear infinite;
    animation: marquee 16s linear infinite;
}
>! .marquee:hover {
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    animation-play-state: paused;
}
>! ````

Es sind kleine Änderungen im CSS zu meiner ersten Antwort. Zum Beispiel habe ich die keyframes getauscht, damit die Schrift in die richtige Richtung läuft…

Man muss auch die Animationszeit an die Länge des zu erwartenden Textes anpassen.

Aber Vorsicht! Das alles kostet natürlich Rechenleistung auf dem Client (zB iPad oder Wandtablet)

Gruß

Pix

[Desa]

Hi, hatte bis ebend versucht deine Version im ersten ab zu ändern. sah nicht gut aus.

Das ist echt besser. Schrift läuft auch, aber ich kann die Farbe nicht ändern. auch das feld ist anders. scheinbar hat er die textfarbe im widget geändert ^^.

Deines sieht echt Gut aus

wie kann man es aber nun hin bekommen, das mir system eigene meldungen nacheinander angezeigt werden ?

[pix]

Hallo,

das ist eine andere Baustelle.

Alle Systemmeldungen müssen in einer Zeile sein, sonst geht es gar nicht (oder du machst eine mehrzeilige Anzeige, die absatzweise anzeigt).

Für den Inhalt such mal nach "Ereignisliste" hier im Forum.

Gruß

Pix

[kirbsi]

Gibt es Möglichkeiten die Laufschrift so wie sie kommt auch wieder verschwinden zu lassen?

[kirbsi]

Habe es hinbekommen. Einfach bei (100% { text-indent: 0% }) statt 0% die -100% eingeben.

[Desa]

Kannst auch bis vis hinten und vorne raus schieben ^^

Bin immernoch dran, bekomme iwie die Ereignis liste nicht hin, hab aber bereits im anderen post das Thema laufen.

Nun dachte ich versuch es mal mit ical einbinden, macht er auch, aber leider nur den ersten Eintrag, mehr zeigt er nicht. wie kann man es hin bekommen, das er die anderen auch hintereinander an zeigt ?

[Desa]

Hi, dachte mir ich bleibe mal hier.

Also das mit der ereignis liste ist noch offen, aber ich wollte ja auch meinen Kalender einbinden. leider zeigt er mir von ical immer nur den ersten event an, kann man auch die anderen also bis zu 3 anzeigen lassen ?

Lg

[Bradock]

Das sollte in den Adaptereinstellungen zu ändern sein

Gesendet von iPhone mit Tapatalk Pro

[Desa]

äh ne, die Informationen sind ja da und werden sauber geholt, nur zeigt der ticker mir nur den ersten an. vermute das liegt an der absatz aufteilung, kenne mich aber dafür zu wenig aus