Using Javascript to conditionally change background colour in Dataset ticker

[nputtemans]

CMS Version 2.3.1

Hi there,
I’m quite new to Xibo and am loving it so far. I have multiple screens across a fairly big site used for all sorts of stuff. I just ran into an issue on specific screen. I’d like to display a Dataset in a ticker (table) and depending on the value of the data change the background colour. I’m not great at javascript, but found bits of code on this forum and online which resulted in 1 cell to change colour (but it doesn’t fit my conditional statement) and nothing more. Any help or suggestions would be greatly appreciated.

** main html code **

 <table  border="1" cellpadding="1" cellspacing="1" style="width: 4000px;">
	<tbody>
		<tr style="color: grey; font-size:55px;">
			<td width="12%"><div class="value-equal" id="div1" >[Logistiek LW|4]</div></td>
			<td width="12%"><div class="value-equal" id="div1" >[Maandag|7]</div></td>
			<td width="12%"><div class="value-equal" id="div1" >[Dinsdag|8]</div></td>
			<td width="12%"><div class="value-equal" id="div1" >[Woensdag|9]</div></td>
			<td width="12%"><div class="value-equal" id="div1" >[Donderdag|10]</div></td>
			<td width="12%"><div class="value-equal" id="div1" >[Vrijdag|11]</div></td>
			<td width="12%"><div class="value-equal" id="div1" >[Zaterdag|12]</div></td>
			<td ><div class="value-equal" id="div1" >[Zondag|13]</div></td>
		</tr>
	</tbody>
</table>

** javascript **

$(document).ready(function() {
var datavalue =parseFloat(document.getElementById("div1").innerHTML);
var divElem = document.getElementById("div1");

  if (datavalue ="FD") {
    divElem.style.backgroundColor ="red";
}
	else if (datavalue ="ziek" ) {
    divElem.style.backgroundColor ="blue";
    
   }
   else {
    divElem.style.backgroundColor ="yellow";
   
   }

});

[dan]

This is a bit off the cuff, so you might need to tweak it, but would something like this work for if you only had one item showing?

I’ve put the Colour I wanted in a column, but you could make that a keyword instead and handle the colour setting in an if.

HTML

<table class="my-data" data-color="[Colour|57]">
  <tr>
    <td>
        [Coffee|3]
    </td>
   </tr>
</table>

JavaScript

  $(document).ready(function() {
    // Find out what colour has been set on my table and set it on the body
    $("body").css("background-color", $("table.my-data").data("color"));
  });

Thanks,
Dan

[nputtemans]

Hi Dan,

Thanks for the quick reply. I have since managed to find a way with the help of a colleague who’s used javascript a bit more recently. We came up with the following which seem to have done the trick.

$(document).ready(function() {
    $persons = $("#content").children().children().children().slice(2);
    $cells = $($persons).find('.value-equal');
    $($cells).each(function( index ) {
       console.log($(this).html());
        if ($(this).html() == "FD") {
            $(this).css("background-color", "orange");
        }
    	else if ($(this).html() == "ziek" ) {
            $(this).css("background-color", "red");
        }
        else if ($(this).html() == "verlof" ) {
            $(this).css("background-color", "orange");
        }
        
    });
});