PDA

Click to See Complete Forum and Search --> : Displaying graphically how close to dollar goal

Duke Will
08-28-2003, 12:06 PM
Doing a donation fund. Say the goal if $1,000. How could I display a graph showing how close to the goal we are? I'd rather not do it in javascript but if I have to, I will. Is there a script that does this?

Or maybe some kind of table. Two columns. Left is Pledged Amount, right column is Goal Amount. Maybe I could change the pixel height each day of the left column so one dollar = 0.5 pixels. $1,000 right column would be 500 px high. Just an idea. Not sure how to do that.
Exuro
08-28-2003, 02:00 PM
You could try something like this:

<html>
<head>
<style type="text/css">
<!--
td,th {vertical-align:bottom;text-align:center;padding:7px;}
#bar1 {height:25px;width:30px;border:2px ridge red;}
#bar2 {height:500px;width:30px;border:2px ridge blue;}
-->
</style>
</head>
<body>
<table>
<tr>
<th>Pledged Amount</th>
<th>Goal Amount</th>
</tr>
<tr>
<td><span id="bar1"></span></td>
<td><span id="bar2"></span></td>
</tr>
<tr>
<td>$50</td>
<td>$1000</td>
</tr>
</table>
</body>
</html>

Notice how all I did was style a couple <span> elements so that they had the width, border color, and height that I wanted. You don't even have to have them inside a table if you don't want them there, that's just how I thought it would be best-organized. Well, I hope that works for you!
Duke Will
08-28-2003, 02:54 PM
Hey thanks! I was tweaking what you did and trying to incorporate this into my page. I'm no expert. Before your code addition, I already had...

<style type="text/css">
<!--
body {font-family:Arial, sans-serif}
-->
</style>

...and I combined it with your STYLE code like below. Is this permissible?

<style type="text/css">
<!--
body {font-family:Arial, sans-serif}
td,th {vertical-align:bottom;text-align:center;padding:7px;}
#bar1 {height:21px;width:20px;border:2px ridge red;background:red;}
#bar2 {height:100px;width:20px;border:2px ridge blue;background:blue;}
-->
</style>

My alignment got all screwed up. The page is at this page (http://www.wepay.com). Within the box toward top where it says "Kyle Photo Soon"... it was centered within that box. Not now. And I had YOUR table centered within the page but not now. And it seems my left margin between the left text edge and the blue is closer now... seems I used to have more space there... between the text and blue and left and right. Maybe I need a cellpadding deal... I don't think i have that in the main table. I know enough to be dangerous.