Make a dynamic thermometer with CSS and PHP
A thermometer is a great visual tool for showing progress towards a fundraising or advocacy goal. This simple, dynamic thermometer requires no images, and can be updated easily, or even automatically.
The CSS defines what the thermometer and mercury look like. This is pretty basic, but you can get creative.Now, the PHP.#thermometer { height:30px; width:350px; border:1px solid #CCC; } #mercury { background-color:#C00; height:100%; }Why use PHP instead of putting the values in by hand?<?php //The amount you have so far $current = 1500; //The amount you're aiming for $goal = 5000; //The percentage of the way to your goal. $mercury = ($current/$goal)*100; ?>Finally, the HTML to display the thermometer:
- You can refer to the latest numbers elsewhere on the page (or elsewhere on the site, if you put this info in a PHP include)
- PHP calculates the percentage for you -- all you need to do is update your actual totals
- You might be able to pull that data in automatically if you're working with a service, like a donation processor or online advocacy tool, that provides an API.
You can, of course, get much fancier -- try a background image on the thermometer, a glossy background image on the mercury, or rounded corners with CSS3.<div id="thermometer"> <div id="mercury" style="width:<?php echo $mercury; ?>%;"> </div> </div>Here's the whole thing.
<!DOCTYPE html> <head> <title>Thermometer: Basic</title> <style> #thermometer { height:30px; width:350px; background-color:#D1D7DF; padding:5px; -moz-border-radius: 10px; border-radius: 10px; } #mercury { background-color:#CF3500; height:100%; -moz-border-radius: 10px; border-radius: 10px; } </style> </head> <body> <?php $current = 1500; $goal = 5000; $mercury = ($current/$goal)*100; ?> <h2>We are <?php echo $mercury; ?>% of the way to our goal of <?php echo $goal; ?>! <div id="thermometer"> <div id="mercury" style="width:<?php echo $mercury; ?>%;"></div> </div> </body> </html>
