Custom JavaScript examples

[Erwin van der Zwart]

Hi Buuudzik,

Here is a improved version of CSS script:

This version has offset parameter between setpoint and value (MinimalDifference)and detects automaticly how many items you have with additional class 'Temp"

The code is also more compact (;

Code:

$(function(){
 
 // Set color values
 var defaultcolor = $('.Temp').css("color") // Use color that is default set on the object
 var highcolor = 'rgb(0, 153, 204)' // Blue
 var lowcolor = 'rgb(204, 153, 0)' // Orange
 
 // Function to change colors on values
 function CheckSetpointandValue(){
   // Check if and how many elements there are with additional class 'Temp'
   if ($(".Temp").length > 0){
     // Set number of items to loop through based on additional class 'Temp' items
     var TempValueItems = $(".Temp").length // Determine number of compare items
     // Set difference between actual and setpoint to change color
     var MinimalDifference = 0.5 // Determine minnimal difference between setpoint and actual temperature
      // Loop to items to set CSS
     for (i = 1; (i-1) < TempValueItems; i++) {
       // Set conditions for Setp_nr and Temp_nr
       if ( Number( $(".Temp_" + i)[0].innerHTML ) > ( Number( $(".Setp_" + i)[0].innerHTML ) + MinimalDifference ) ){
         $(".Temp_" + i).css("color", highcolor);
       } else if ( ( Number( $(".Temp_" + i)[0].innerHTML ) + MinimalDifference ) < Number( $(".Setp_" + i)[0].innerHTML ) ){
         $(".Temp_"  + i).css("color", lowcolor);
       } else {
         $(".Temp_" + i).css("color", defaultcolor);
       }
     }
   }
 }  
 
 // Check for changes on value of item with Temp
 $('.Temp').bind("DOMSubtreeModified",function(){
   CheckSetpointandValue();
 });
 
 // Check for changes on value of item with Setp
 $('.Setp').bind("DOMSubtreeModified",function(){
   CheckSetpointandValue();
 });
 
  // Initial execution
  CheckSetpointandValue();
 
});

BR,
Erwin van der Zwart