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!


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" "">

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.