Howdy, Stranger!

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

Sign In with Facebook Sign In with Google Sign In with OpenID

Categories

We have migrated to a new platform! Please note that you will need to reset your password to log in (your credentials are still in-tact though). Please contact lee@programmersheaven.com if you have questions.
Welcome to the new platform of Programmer's Heaven! We apologize for the inconvenience caused, if you visited us from a broken link of the previous version. The main reason to move to a new platform is to provide more effective and collaborative experience to you all. Please feel free to experience the new platform and use its exciting features. Contact us for any issue that you need to get clarified. We are more than happy to help you.

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.