How to Change Colour of Text Based on Its Value When a Page Initially Loads

var els = document.getElementsByClassName('TransactionAmount');for (var i = 0; i < els.length; i++) {  var cell = els[i];  if (cell.textContent < 0) {    cell.classList.remove('green')  } else {    cell.classList.add('green');  }}

.TransactionAmount {  color: #FF0000;}
.TransactionAmount.green {  color: #33FF3C;}

<table>  <tr>    <th>TRANSACTION AMOUNT</th>    <th>BALANCE AFTER TRANSACTION</th>    <th>TRANSACTION COMMENT</th>  </tr>  <tr>    <td style="font-family:'Arial',serif;font-size:10pt"><div class="TransactionAmount">-1</div></td>    <td style="font-family:'Arial',serif;font-size:10pt">{{ Transaction.BalanceAfterTransaction }}</td>    <td style="color:white">{{ Transaction.TransactionComment }}</td>  </tr>  <tr>    <td style="font-family:'Arial',serif;font-size:10pt"><div class="TransactionAmount">0</div></td>    <td style="font-family:'Arial',serif;font-size:10pt">{{ Transaction.BalanceAfterTransaction }}</td>    <td style="color:white">{{ Transaction.TransactionComment }}</td>  </tr>  <tr>    <td style="font-family:'Arial',serif;font-size:10pt"><div class="TransactionAmount">1</div></td>    <td style="font-family:'Arial',serif;font-size:10pt">{{ Transaction.BalanceAfterTransaction }}</td>    <td style="color:white">{{ Transaction.TransactionComment }}</td>  </tr></table>

Change font-color on page load not just on scroll

What you want to do is place your code for updating the header in a single function, then call that function on document ready AND on scroll. If it is in one function, then you can just use that single function for both.

let updateHeader = function() {

  var initialSrcProfile = "assets/images/profileicon-white.svg";
  var scrollSrcProfile = "assets/images/profileicon-black.svg";
  var initialSrcLogo = "assets/images/logo-white.png";
  var scrollSrcLogo = "assets/images/logo-black.png";

  var scroll = $(window).scrollTop();

  // Image Elements of Header
  if (scroll > 10) {
    $(".profile-icon").attr("srcset", scrollSrcProfile);
    $(".logo").attr("src", scrollSrcLogo);
  } else {
    $(".profile-icon").attr("srcset", initialSrcProfile);
    $(".logo").attr("src", initialSrcLogo);
  }

  // Text Elements of Header
  if (scroll > 0) {
    $(".navwrap a span").css("color", "black");
    $("#login-break").css("color", "black");
  }
  if (scroll < 1) {
    $(".navwrap a span").css("color", "white");
    $("#login-break").css("color", "white");
  }
}

jQuery(document).ready(function() {
  updateHeader();
  $(window).scroll(updateHeader);
});

It is possible that the browser will load the default colors first, display them, and then run the script to update them. This could cause some sort of flash, but it will be really quick most of the time. If that is an issue, then you want to make sure the initial CSS styles it exactly as you want it on load. I'm afraid that is probably the best you'll get.

Change textarea font color based on text. Both on page load, and after content changes

I would do something like this:

http://jsfiddle.net/eVRQD/

HTML

<textarea id="mytxt" rows="4" cols="50">Enter a new task...</textarea>

JS

determineColor();

$('#mytxt').blur(function() {
  determineColor();
});

function determineColor(){
    var mytxtval = $('#mytxt').val();
    if( mytxtval === 'Enter a new task...' || mytxtval === '' ){
        $('#mytxt').css('color', 'red');
    } else {
         $('#mytxt').css('color', 'green');
    }
}

PHP: Change color of text based on $value

I found this plugin:

http://www.jnathanson.com/blog/client/jquery/heatcolor/index.cfm#examples

How to change color of html text depending on the value of a variable Vue JS

You can use conditional class.

Example:

<div v-bind:class="{ active: isActive }"></div>

Where 'active' is your class (text-danger or whatever it is) and isActive is the condition that will trigger that class.

How to change color of text based on text-value by using css?

if you can pass those letters as an attribute to the td element you can do it in CSS like this:

 <td color_code='Your letter'>Your letter</td>

here 'your letter' is the letter that's generated dynamically. Now, simply in CSS, just specify that attribute when calling the td element:

td[color_code='L']{ color: red}

and the same for the rest of the letters.

Color background <Select> on page load

You don't need onload, you can simply do it like you did for the options, just add style="background-color".

Instead of echoing the HTML code, save it in a string variable, and echo the variable after the loop. First save the loop to the variable and use a separate variable to save the active color when $row['status'] == $current_status. Then after the loop, add the <select ... with the color from the color variable, and then add closing </select>, then echo the result.

Here is a quick code (untested, so you may have to modify):

$select = "";
$color = "";

if (!$current_status)
{
    $select = "<option disabled selected value> -- select an option -- </option>";   
}

foreach ($list_of_statuses as $key => $row)
{
    $select = $select . "<option value='" . $row['status'] . "'";
    $select = $select . " style=\"color: " . $row['fg_color'] . "; background-color: " . $row['bg_color'] . "\"";

    if ($row['status'] == $current_status)
    {
        $select = $select . " selected=\"selected\"";
        $color = $row['bg_color'];
    }

    $select = $select . ">" . $row['status'] . "</option>";
}

$select = "<select name=" . $day ."[] onChange=\"setBg(this)\" style=\"background-color: " . $color . "\">" . $select + "</select>";

echo $select;

---

Related Topics