Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
​
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo</title>
  
  <script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'></script>
  
  
  
  <link rel="stylesheet" type="text/css" href="/css/result-light.css">
  
  <style type='text/css'>
    .job_box {
      width: 100%;
      height: 50px;
​
      /* The dynamic background-color */
      background-color: #219BBE;
   }
  </style>
  
​
​
<script type='text/javascript'>
$(window).load(function(){
var n = 0;
​
$('.job_box').each(function() {
    n++;
    console.log($(this));
    lighten($(this), n);
});
​
function lighten(that, n) {
        var lightenPercent = 15 / n;
        var rgb = that.css('background-color');
        rgb = rgb.replace('rgb(', '').replace(')', '').split(',');
        var red = $.trim(rgb[0]);
        var green = $.trim(rgb[1]);
        var blue = $.trim(rgb[2]);
                
        red = parseInt(red * (100 - lightenPercent) / 100);
        green = parseInt(green * (100 - lightenPercent) / 100);
        blue = parseInt(blue * (100 - lightenPercent) / 100);
        
        rgb = 'rgb(' + red + ', ' + green + ', ' + blue + ')';
        
        that.css('background-color', rgb);
}
});
​
</script>
​
​
</head>
<body>
  <!-- Instead of 4 boxes we could also have n boxes -->
    <div class="job_box"></div>
    <div class="job_box"></div>
    <div class="job_box"></div>
    <div class="job_box"></div>
  
</body>
​
​
</html>
​
​
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers