Marquee Widget from Dashing.io

I am currently utilizing dashing.io and aiming to construct a widget featuring a marquee effect. I managed to achieve the desired result using CSS animation along with HTML (http://jsfiddle.net/oLLzsyud/). However, upon integrating it into the widget, it appears as follows: CSS:

    .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 the dashing environment, it is displayed like this and remains static

I have not made any alterations to the coffee script, as it was generated by default when creating the widget.

Upon inspection, I am uncertain why it isn't functioning correctly within dashing even though it works seamlessly with CSS and HTML on a standard webpage.

Your insights and suggestions are greatly appreciated.

htmlcsssassdashing

Answer №1

I managed to accomplish this on my own. I simply inserted the marquee 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>

Furthermore, the data is retrieved 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 triggered after the widget finishes rendering

  onData: (data) ->
    # Handling incoming data
    # You can manipulate the html node of this widget with `@node`
    # Example: $(@node).fadeOut().fadeIn() will create a flashing effect when new data arrives.

    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') + " +++ ")

Although it may not be the most optimal solution, it functions effectively on my dashboard. The SCSS simply applies a blue background.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to link or access the button in React?

I'm struggling with figuring out how to make the Enter key reference a specific button instead of the default Submit button. Let me break down the code structure for better understanding. Inside a file called v1 (parent component), there are multiple ...

javascripthtmlcssreactjsdevextreme

Guide on incorporating database-sourced audio playback using buttons in PHP and HTML

Building my website with an audio player inside has been a bit challenging. I encountered an issue when trying to combine songs loaded from the database with a play button. My goal is to have the play button change when clicked and load the song from the d ...

javascriptphphtmlaudiohtml5-audio

When utilizing the HTML5 range input type, the value of 'this.value' may not be defined

I'm having an issue with a range input where it returns undefined when passed to my function: Here is the HTML code snippet: <div class="slidecontainer"> <label>Setpoint</label> <p>{{channel.setPoint}}</p> & ...

htmlangulartypescriptrangeslider

Scrollbar customization feature not functional in Firefox browser

I recently finished developing a website and I have customized the main vertical scrollbar. Unfortunately, I am facing an issue where it works well on Google Chrome and Safari but not on Mozilla Firefox. Does anyone have any suggestions on how to trouble ...

cssfirefoxwebkitscrollbarcustomization

Set the value of a static file uploader using jQuery

I am having trouble retrieving the name of an existing file in a file uploader. I have a sample in jsfiddle demonstrating what I have tried. http://jsfiddle.net/shree/a4PKG/3/ However, when I click GetImage, the file uploader always remains empty. T ...

jqueryhtml

Having trouble bringing in sass files into a fresh React project

I'm having trouble getting my Sass files to load in my React project. I didn't use create-react-app to start this project; instead, I started from scratch using webpack and npm init. Whenever I attempt to use a variable like $titleColor, I encou ...

reactjswebpacksass

Looking to extract a particular set of information from past records in a GAS web application

Regarding a previous query I made before (Check for login username and password, and then bring data from every previous entry). I've developed a web application to monitor the working hours of employees at my organization. The app is straightforward ...

javascripthtmlgoogle-apps-scriptgoogle-sheets

The unusual actions displayed by the initial row of a grid container

In an effort to familiarize myself with front-end development, I took on the challenge of creating a simple calculator. Opting to utilize the grid-layout due to the static nature of the content and my desire for flexibility in button sizes both vertically ...

htmlcssgrid-layout

Customizing WordPress: Adjusting Tab Text Color and Header Height

I'm currently working on a WordPress Page and facing some issues. I need to adjust the header height and change the color of the active page text. Attached is a screenshot for reference: Can anyone provide me with the necessary code to make these ch ...

csswordpress

Validating group radio buttons that have been checked

I possess: <div class="group"> <input type="radio" name="myradio" value="1">a <input type="radio" name="myradio" value="2">b </div> <div class="group"> <input type="radio" name="two" value="3">a <input ty ...

javascriptjqueryhtml

Reading and extracting information from an HTML page using jQuery

My goal is to extract a specific value from an AJAX response that is in HTML format. Below is the AJAX call I am working with: var result = $.ajax({ //datatype : "application/json", type: "POST", url: ddcUrl ...

javascripthtmlajax

Deactivating The Canvas Element

I am currently working on a project that involves using Three.js alongside a menu placed above the canvas element, which is essentially a regular div. However, I have encountered an issue where the canvas element still registers input when interacting with ...

jqueryhtmlcsscanvasthree.js

Why does the Element.style.left property keep rejecting my input value?

I have encountered a problem with the positioning of elements, specifically with the 'left' property. I've designed a rectangular block using CSS and rotated it by 0.17 radians in JavaScript. Now, my aim is to make the block move diagonally ...

javascripthtmlcss

Streamline Access to Zimbra Server Automatically

Currently, I am creating a webpage with a login feature at www.newpage.com. Here is the code snippet for reference: <form name="login"> Username<input type="text" name="userid"/> Password<input type="password" name="pswrd"/> <input ty ...

javascripthtmlauthenticationautomationzimbra

Tips on dividing a div into two separate pages when converting to PDF

I am working on an asp.net MVC project and I need to convert a HTML div into a PDF with two separate pages. Here is an example of my code: HTML Code <div class="row" id="mycanvas"> <p>This is the first part of my content.</p> <p ...

javascriptjqueryhtmlcss

How can I align three elements in columns with the center element expanding between them in CSS?

Is there a way to arrange 3 elements into columns where the left and right elements have fixed widths and align with the edges of the page, while the middle element fills in the space between them? Please advise on how to achieve this layout. ...

cssdynamic-resizing

What is the best way to use regular expressions to match text with varied endings?

Here is my current situation. <h2>Details</h2>\n +<p>(.*)<br />|</p> ^ there's a tab space, wondering if there's a better way to show one or more (seems to be working) I am attempting to f ...

phphtmlregex

Difficulty encountered while trying to implement JQuery Typer effect in HTML

I'm new to web development and I'm currently working on my personal website. I've been trying to incorporate a JQuery effect into my site, but I'm facing some difficulties. I came across this code snippet online that supposedly makes it ...

jqueryhtml

Tips for identifying when a change has been made to a SCSS file or any of its partial files

Looking to incorporate sass into a Ruby script but want to compile only when necessary. The typical method for compiling involves using the following code: require "sass" Sass::Engine.new(File.read(scss), options).render By utilizing appropriate hash val ...

cssrubysassfileupdate

Tips for locating an element within pre-processed HTML content

Is there a way to modify this code snippet to target the 'price' element within each 'info_block' instead of displaying the entire 'info_block' content? My ultimate goal is to locate the price within every 'info_block&apo ...

phphtmlxpathdomdocument