iam working with dashing.io and i want to build a widget with a marquee. I did a marquee with css animation and html (http://jsfiddle.net/oLLzsyud/). It works with that, but it got it the widget like that: sccs:
.widget-marquee {
background: #004894;
$color_celeste_approx: #cccccc;
.marquee {
width: 200px;
margin: auto;
padding: 2px;
overflow: hidden;
white-space: nowrap;
border: solid 1px $color_celeste_approx;
animation: marquee 10s linear infinite;
&:hover {
animation-play-state: paused;
}
}
@keyframes marquee {
100% {
text-indent: -100%;
}
0% {
text-indent: 100%;
}
}
}
html:
<div class="marquee">
<span data-bind="stoer"></span>
</div>
In dashing it is shown like this and doesnt move
I didnt touch the coffee script. It is default from the widget generation.
I didnt see what is wrong and why it isnt working in dashing. Maybe someone here knows why it isnt working in dashing, but with css and html on a normal page.
Thank you for your answers.
I got it by myself. I just put the marqueere into the html file:
<style>
.marquee {
width: 1500px;
margin: auto;
padding: 2px;
overflow: hidden;
white-space: nowrap;
border: solid 1px #cccccc;
animation: marquee 10s linear infinite;
}
.marquee:hover {
animation-play-state: paused;
}
@keyframes marquee {
100% {
text-indent: -125%;
}
0% {
text-indent: 125%;
}
}
</style>
<div class="marquee">
<span data-bind="status"></span>
</div>
And the data is read in the coffeescript file:
class Dashing.Marquee extends Dashing.Widget
statusalt = [" "]
Array::unique = ->
output = {}
output[@[key]] = @[key] for key in [0...@length]
value for key, value of output
ready: ->
# This is fired when the widget is done being rendered
onData: (data) ->
# Handle incoming data
# You can access the html node of this widget with `@node`
# Example: $(@node).fadeOut().fadeIn() will make the node flash each time data comes in.
statusneu = [
@get('bsm') + " +++ ",
@get('stoer') + " +++ ",
@get('lzeit') + " +++ ",
@get('sla') + " +++ ",
@get('bkob') + " +++ ",
@get('major') + " +++ ",
@get('probl') + " +++ ",
@get('fulfil') + " +++ ",
@get('bm') + " +++ ",
@get('bk') + " +++ ",
@get('pm') + " +++ ",
@get('fianz') + " +++ ",
]
statusfilter = statusneu.filter (x) -> x != "undefined +++ "
if statusfilter is statusalt
status = statusalt.toString().split(",").join(" ")
else
statusneu= statusfilter.concat statusalt
status = statusneu.unique().toString().split(",").join(" ")
statusalt = statusfilter
@set 'status', status.concat(@get('updatedAtMessage') + " +++ ")
Its maybe not the best solution, but it works on my dashboard. The scss just does an blue background.