Blink background color every x milliseconds

Blink background color every x milliseconds

  

Hi guys,

Considering a table having columns A and B, I want column A to blink automatically when an expression is true, ie: when column B = 0, alternate column A background color between white and red every 500 milliseconds, and when B <> 0, do nothing.

How could I achieve this?

Thanks in advance.

Hi Junior,

Here's a way to do this:

  • Wrap the widgets of your "Column A" in a container and set its Name to "WiggleContainer".
  • Create a CSS class as shown bellow:
    .wiggle {
        background-color: red;
    }
  • Drag an If widget into your table and set its condition to the condition that determines when to blink the background color.
  • In the "True" part of the if, put an expression with the following value (don't forget to change the expression's "Escape Content" property to "No"):
    "<script type='text/javascript'>
        setInterval(function() {
            // toggle the class every five seconds
            $('#" + WiggleContainer.Id + "').toggleClass('wiggle');  
           
            setTimeout(function() {
                // toggle back after 1 second
                $('#" + WiggleContainer.Id + "').toggleClass('wiggle');  
            }, 500);
        }, 1000);
    </script>"

Hi Junior,

You can make those animations with CSS.
Just add the class error when you need to blink


.error {

  -webkit-animation:error 500ms infinite;

          animation:error 500ms infinite;

}

@-webkit-keyframes error {

    from {

        background-color:red;

    }

    to {

        background-color:white;

    }

}

@keyframes error {

    from {

        background-color:red;

    }

    to {

        background-color:white;

    }

}