Need to display ongoing increase of $$ raised over time

**jmf** · 06-19-2005, 02:44 AM

I don't know what you call these things, but you know when a library or a hospital is raising capital for a new wing, etc., and they have a big sign out front with a thermometer showing how far along they are in their goal to raise a million dollars, or whatever it is?

I need something like that to display on a site.
Does anyone know of a javascript that would do that, or some other way to create this?
It doesn't need to be totally automated, as it is something I could update once a week or so.
It is for a fundraiser where (hopefully) the scale will keep moving up over time, between now and the end of the year.

Thanks for your help.
J.

**jscheuer1** · 06-19-2005, 05:08 AM

Just a basic idea. Start at the bottom, changing unmet to met (this is the manual updating you were talking about). If you want to get creative, the bottom cell could contain an image that looks like the bulb on a thermometer. No script required.

Code:

<html>
<head>
<title>Raising Goal - Demo</title>
<style type="text/css">
td.amt {
width:6em;
text-align:right;
padding-right:1em;
}
td.unmet {
width:.6em;
background:lightyellow;
border-left:1px solid black;
border-right:1px solid black;
}
td.met {
width:.6em;
background:red;
border-left:1px solid black;
border-right:1px solid black;
}
</style>
</head>
<body>
<table style="border-collapse:collapse;width:7em!important;width:6.7em;">
<tr>
    <td class="amt">$100,000.00</td><td></td><td class="unmet" style="border-top:1px solid black;"></td><td></td>
</tr>
<tr>
    <td class="amt">$50,000.00</td><td></td><td class="unmet"></td><td></td>
</tr>
<tr>
    <td class="amt">$25,000.00</td><td></td><td class="unmet"></td><td></td>
</tr>
<tr>
    <td class="amt">$10,000.00</td><td></td><td class="unmet"></td><td></td>
</tr>
<tr>
    <td class="amt">$5,000.00</td><td></td><td class="unmet"></td><td></td>
</tr>
<tr>
    <td class="amt">$1,000.00</td><td></td><td class="unmet"></td><td></td>
</tr>
<tr>
    <td class="amt">$500.00</td><td></td><td class="unmet"></td><td></td>
</tr>
<tr>
    <td class="amt">$250.00</td><td></td><td class="unmet"></td><td></td>
</tr>
<tr>
    <td class="amt">$100.00</td><td></td><td class="unmet"></td><td></td>
</tr>
<tr>
    <td class="amt">$50.00</td><td></td><td class="unmet"></td><td></td>
</tr>
<tr>
    <td class="amt">$10.00</td><td></td><td class="unmet"></td><td></td>
</tr>
<tr>
    <td class="amt">$0.00</td><td colspan="3" class="met" style="border:1px solid black;"></td>
</tr>
</table>
</body>
</html>

**jmf** · 06-19-2005, 06:46 PM

John,
Thank you.
This is perfect.
Just what I was looking for.
J.

Thread: Need to display ongoing increase of $$ raised over time

Thread Tools

Search Thread

Need to display ongoing increase of $$ raised over time

Bookmarks

Bookmarks

Posting Permissions