Geek Answers Handbook

Fundraising Thermometer Approach

I need to create a widget like a thermometer for a website where I can feed the target and the current amount, and then create a graph showing the progress. I was thinking something with jQuery / CSS would be a better approach, but then I thought maybe just using the vertical slider from the jQuery UI library and skinning it. How would you all approach this? I was looking for a plugin but did not find anything suitable.

+4
source share
2 answers

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

  • create div
  • set height / width
  • set image bg
  • calculate bg image position based on values
  • set the background-position css property, the result is
+4
source

I think you can check out this widget.

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

Although in the current version, if you change a lower value to anything other than zero, the user interface does not update perfectly. The adjusted version can be found:

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

+1
source

More articles:


All Articles