Database-driven CSS HEIGHT value - Programmers Heaven

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!


Database-driven CSS HEIGHT value

I want to create a fundraising thermometer for a United Way campaign at work (Macy's in NYC). The code below would work if I could generate a dynamic HEIGHT percentage. I already have a Stored procedure that executes the kind of query I'll need to generate the percentage of the goal for current pledges --

SELECT SUM((O.pledges + H.pledges + E.pledges)/10000*100) AS Giving
FROM dbo.Operations O, dbo.HR H, dbo.EUC E

My problem is getting a dynamic value into

height: 75%;

Is it possible to do this? The code for the entire page is below.

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">

Untitled Page

width: 77px;
height: 442px;
background: #333 url(gauge.gif) top left no-repeat;


.gauge .current-value {
left: 0px;
bottom: 0px;
height: 75%;
width: 100%;
background: red url(gauge.gif) bottom right no-repeat;

.gauge .current-value p {


window.onload = function(){

var gauge = {

targetHeight : 0,
progressMeter : new Object(),

init : function(){
if(!document.getElementById) return false;

resetValue : function(){
this.progressMeter = document.getElementById("campaign-progress-current");
this.targetHeight = this.progressMeter.offsetHeight; = "0px";

animateGauge : function(){
var currHeight = this.progressMeter.offsetHeight;

if(currHeight == this.targetHeight){

var interval = Math.ceil((this.targetHeight - currHeight) / 10); = currHeight + interval + "px";

Make a database connection, do a calculation on the giving total to get percent of goal and then write that number in the CSS where 50% currently is

Why Give?

Current Progress


SelectCommand="uspPledgesPercentGoal" SelectCommandType="StoredProcedure">

Sign In or Register to comment.