Tutorial :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.


Solution: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


Solution:2

I think you can checkout this widget

http://david.dupplaw.me.uk/developer/jquery-thermometer

Though in the current version if you change the lower value to anything other than zero the UI is not updated perfectly. The corrected version can be found:

https://github.com/mahfuzmohammad/jquery.thermometer


Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Previous
Next Post »