- No images used, CSS3 only
- the fundraiser only needs to type the goal amount and the curent status,
- the script does the rest.
See it in action: http://rayhyde.github.io/thermometer/
Include the jQuery script at the bottom of your page, e.g. through a CDN:
<script src="//code.jquery.com/jquery-2.1.3.min.js"></script>
Then include the minimized version of the script:
<script src="[path to your script]/jquery.thermometer.min.js"></script>
Change [path to your script] to where it resides, eg "js".
This is very simple: create an element that contains the thermometer plus a couple of spans that the plugin uses to get the numbers it needs:
<div id="thermometer"> <span class="current">€ 12.000</span> <span class="goal">€ 16.000</span> </div>
That way the text is visible when Javascript is not around and the information stays legible for screen readers and search engines. Also the amounts can be changed easily in CMS systems like Wordpress.
Then initialize the plugin, telling it in which element it needs to run:
<script> $(<containing element here, e.g. "#thermometer">).thermometer(); </script>
This project is part of my Playground - a collection of fun (and ahem, dare I say it: clever) stuff I made in the past, from jQuery games and plugins to CSS animation tricks.
Please drop in on my portfolio site www.rayhyde.nl!