Brad Herman Brad Herman - 6 months ago 45
jQuery Question

Fundraising Thermometer Approach

I need to create a thermometer type widget for a website, where I can feed in a goal and current amount, then generate a graphic that shows the progress. I was thinking something with jQuery/CSS would be the best approach, but then I started thinking maybe just using a vertical slider from the jQuery UI library and skinning it. How would you all approach this? I've looked for a plugin but haven't come across anything relevant.

Answer

You can make the indicator by a simple div with background image, positioned by JS.

  1. create a div
  2. set the height / width
  3. set a bg image
  4. calculate the position of the bg image based on the values
  5. set the background-position css property form the result
Comments