title: Change DIV Background Color, Depending on Its Width
body: <p>I'm wanting to use jQuery to dynamically modify the background color of a <code>&lt;div&gt;</code>, based on its CSS property, <code>width</code> value.</p>
  
  <p>The usage is for some form of color-coded meter, which indicates how well (or poorly) a device performs in a specific category (there are 5), and then there is one 'overall' category, which produces the overall score, based on a little math (add all 5 together and divide the answer by 5).</p>
  
  <p><a href="http://jsfiddle.net/tLZ7q/3/" rel="nofollow">I have tried two methods</a>, one based on the little jQuery knowledge I have, and the other adapted from an answer on SO. Both are included in the JSFiddle I have provided, with the latter commented out.</p>
  
  <p>Here are the colors and the ranges of the widths for each:</p>
  
  <ul>
  <li>0-24% = red - #a41818</li>
  <li>25-49% = orange - #87581c</li>
  <li>50-74% = yellow - #997815</li>
  <li>75-90% = yellowgreen - #7ba01c</li>
  <li>91-100% = green - #3a8d24</li>
  </ul>
  
  <p>Thanks!</p>