Fundraising Thermometer Approach

Question

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 1

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