A versatile fundraising thermometer

€ 9.000 € 16.000

a jQuery plugin that uses no images

  • No images used, CSS3 only
  • the fundraiser only needs to type the goal amount and the curent status,
  • the script does the rest.
Download from Github

How to use this plugin

1. Link the files you need

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".

2. Create your HTML markup

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 is legible for screen readers and search engines. Also the amounts can be changed easily in CMS systems like Wordpress.

3. Add the thermometer.css file to the <head> section of your page

4. Call the plugin

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!