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!

Categories

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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



Untitled Page







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

}

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

.gauge .current-value p {
display:none;

}




window.onload = function(){
gauge.init();
}

var gauge = {

targetHeight : 0,
progressMeter : new Object(),


init : function(){
if(!document.getElementById) return false;
this.resetValue();
this.animateGauge();
},

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

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

if(currHeight == this.targetHeight){
}

else{
var interval = Math.ceil((this.targetHeight - currHeight) / 10);
this.progressMeter.style.height = currHeight + interval + "px";
setTimeout("gauge.animateGauge()",30);
}
}
}








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


50%










"
SelectCommand="uspPledgesPercentGoal" SelectCommandType="StoredProcedure">


Sign In or Register to comment.