Set the color of many divs from green to red

Question

In my project there could be any amount of divs like a thousand, two thousand, a million etc.. I want their background colors to go from green to red. so they all get a different shade of color. the first div will be "real" green the last div will be "real" red.

Here is what I have. As you can see there are divs at the end that get left without a background-color. I would prefer to solve this using rgb.

$(function(){
  var r = 20;
  var g = 200;
  var b = 10;
  for(var i = 0; i < 300; i++){
    $("body").append("<div class = 'box'>");
  }
  $(".box").each(function(){
    if(g > 0 && r < 255){
      $(this).css("background", "rgb("+ r + ","+ g + ","+ b + ")");
      g-=1;
      r+=1;
    }
  })
})

.box{
  border:2px solid black;
  margin: 10px;
  width: 20%;
  height: 100px;
  float: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Possible duplicate of [Generate colors between red and green for a power meter?](http://stackoverflow.com/questions/340209/generate-colors-between-red-and-green-for-a-power-meter) — Steve, May 05 '16 at 04:02
@steve I don't understand the top answer. if I do `R = (255 * n) / 100` and n == 1 I would get 2.55. I don't think I i could have the decimals as an RGB value. I tried it before. — jack blank, May 05 '16 at 04:11
@jackblank _"yea I don't mind if there is a little duplication. The main point is that at the beginning of the display users see green and further away they see things turning red."_ , _"it's a dynamic amount but It would probably less than 2000"_ Tried without `if` condition https://jsfiddle.net/0kL4f59z/ ? — guest271314, May 05 '16 at 04:35
but I meant the other guy. Kushner I think his name was. I liked his even though at a 1000 there was 5 divs with the same background. I prefer less duplicates. — jack blank, May 05 '16 at 04:41
@jackblank Not certain that approach returned expected results. Will undelete. — guest271314, May 05 '16 at 04:43
Monitors can only display ~17M colors. That's *all* colors, not just those two (and those between). If you have 1M divs, you are going to see many repeats. Instead maybe you should consider multiple colors, or oscillating the colors back-and-forth. — vol7ron, May 05 '16 at 05:20

score 3 · Answer 1 · answered May 05 '16 at 04:27

3

yea I don't mind if there is a little duplication. The main point is that at the beginning of the display users see green and further away they see things turning red.

Try without if condition

$(function(){
  var r = 20;
  var g = 200;
  var b = 10;
  for(var i = 0; i < 300; i++){
    $("body").append("<div class = 'box'>");
  }
  $(".box").each(function(){
      $(this).css("background", "rgb("+ r + ","+ g + ","+ b + ")");
      g-= 1;
      r+= 1;
  })
})

.box{
  border:2px solid black;
  margin: 10px;
  width: 20%;
  height: 100px;
  float: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>

answered May 05 '16 at 04:27

guest271314

1
15
104
177

@jackblank With `r` beginning at `0`, `g` beginning at `255` https://jsfiddle.net/0kL4f59z/1/ – guest271314 May 05 '16 at 04:49
I never knew that you could set a an RGB value to a negative. you are doing that to the green value. what happens when it gets below 0. it just goes to black? G would be like 0? – jack blank May 05 '16 at 04:58
@jackblank There are not any negative values. Once value reaches `0` value does not decrement to a negative value. There could be another approach, trying now – guest271314 May 05 '16 at 05:00
I like the other guys answer I just noticed that with this if I do a thousand divs there will be 765 divs at the end with the background of `rgb(255, 0, 10)` too many duplicates. – jack blank May 05 '16 at 05:02

score 2 · Answer 2 · answered May 05 '16 at 05:05

Try this, do not Increment and decrements the value of r and g at the same time, do it alternatively...

$(function(){
  var r = 55
  var g = 200;
  var b = 0;
  for(var i = 0; i < 300; i++){
    $("body").append("<div class = 'box'>");
  }
  $(".box").each(function(i){
    if(g > 0 && r < 255){
       $(this).css("background", "rgb("+ r + ","+ g + ","+ b + ")");
       if(i%2 == 0)
       {
         g-=1;
       }
       else
       {
         r+=1;
       }
      
    }
  })
})

.box{
  border:2px solid black;
  margin: 10px;
  width: 20%;
  height: 100px;
  float: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

guest271314 · Answer 3 · 2016-05-05T09:12:17.320

An approach utilizing css linear-gradient at background of container element holding .box elements, transparent background at .box elements; included outline , border to mask linear-gradient visibility at outside right of container; note this portion of css could still be improved. Set for loop to 2000 iterations. linear-gradient should display expected color transitions gradually from lime to red between 0 to n .box elements.

for (var i = 0, container = document.getElementById("container"); i < 2000; i++) {
  container.insertAdjacentHTML("beforeend", "<div class=box></div>");
};

body {
  overflow-x: hidden;
}
#container {
  background: linear-gradient(to bottom, lime, red);
  outline:25px solid #fff;
  border:25px solid #fff;
  width: calc(100vw - 2.5%); /* adjusted for width of stacksnippets */
  height: auto;
  display: block;
  overflow-x: hidden;
}
.box {
  border: 2px solid black;
  margin: 10px;
  width: 20%;
  height: 100px;
  float: left;
  background: transparent;
  outline: 20px solid #fff;
}

<div id="container">
</div>

jsfiddle https://jsfiddle.net/0kL4f59z/5/

jack blank · Accepted Answer · 2016-05-05T06:29:08.427

Someone wrote this earlier but deleted it.

$(function(){
  var r = 20;
  var g = 200;
  var b = 10;
  for(var i = 0; i < 300; i++){
    $("body").append("<div class = 'box'>");
  }

  var noOfBoxes = $(".box").length,
      minRed = 20,
      maxRed = 255,
      maxGreen = 200

  $(".box").each(function(i){
    $(this).css("background", "rgb(" + r + "," + g + "," + b + ")");

    g = parseInt(maxGreen - maxGreen * (i /noOfBoxes), 10)
    r = parseInt(minRed + maxRed * (i/ noOfBoxes), 10)
    console.log(g)
  })
})

.box{
  border:2px solid black;
  margin: 10px;
  width: 20%;
  height: 100px;
  float: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

Set the color of many divs from green to red

4 Answers4