Skip to content

A versatile fundraising thermometer - a jQuery plugin that uses no images

Notifications You must be signed in to change notification settings

coldlamper/thermometer

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

12 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

A versatile fundraising thermometer

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.

See it in action: http://rayhyde.github.io/thermometer/

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

My Playground

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!

About

A versatile fundraising thermometer - a jQuery plugin that uses no images

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • CSS 54.6%
  • HTML 36.3%
  • JavaScript 9.1%