PDA

Click to See Complete Forum and Search --> : progress bar text

psajbh
12-06-2003, 08:13 PM
I have text that represents the percentage of completion in the center of a progress bar. The text color is blue on a white background. The progress bar is blue and increments across the <td> element in synch with the percentage being displayed as text. When the blue bar underlays the text, I want the text to turn white, as the progress bar progresses underneath it. This can easily be done within a java applet. Can this be done with dhtml? If so, how would you go about doing it? Any leads would be appreciated.
Dudsmack
12-12-2003, 12:18 AM
You know what, I just went through this exact same thing.

What you would have to do (and you'll see why I chose not to do it myself)…

1) Create a DIV…this will be the “Master Progress Bar Object”…let’s call it “progressBar”. The next 3 divs we create will need to be placed inside this div. This div can have a relative position.

2) Create a DIV that is the same size as ‘progressBar’...let’s call this div ‘bottomPercent’ Have the text alignment center and place text displaying the percentage (e.g. “45%”). This text will be the same color as the bar itself. This div will have to have the position property set to ‘absolute’ and a z-index (for example “z-index: 1;”).

3) Create a DIV that is the size of the percentage…let’s call this div ‘percentage’. The properties need to have the aligned and the width needs to be set to the % that you want (e.g. “45%”). This div will have to have the position property set to ‘absolute’ and a z-index (for example “z-index: 2”)

4) Create a DIV to display the top percentage…let’s call this div ‘topPercent’. This div’s height should be the same as ‘progressBar’ and should have NO width parameters set (this way it’ll take on the width of the text). Have it contain the text equal to the percentage (e.g. “45%”) and of the different color than the div ‘percentage’. This div will have to have the position property set to ‘absolute’ and a z-index (for example: “z-index: 3”).

5) Now here comes the fun part, using JavaScript adjust the width of ‘topPercent’, here are the three condtions….

a) If topPercent.left + topPercent.width > percentage.left + percentage.width AND topPercent.left > percentage.left + percentage.width. If this is the case set the width of topPercent to align with the right side of percentage.

b) If topPercent.left + topPercent.width < percentage.left + percentage.width. If this is the case do nothing.

c) If topPercent.left + topPercent.width > percentage.left + percentage.width. If this is the case set the visibility of ‘topPercent’ to ‘hidden.

…Now if you want this progress bar to be able to move dynamically (like I did) every time the value changes you’ll need to update the following:

percentage.width, topPercent.left, and topPercent.width

Also, remember that pre-5th generation browsers all access dhtml objects differently, so you’ll have to do a good deal of feature detection.

Good luck…post your results and let us know how you do.
psajbh
02-06-2004, 10:01 AM
Apologize for not having responded earlier. I got so bogged down in functional issues, I didn't have the time to come up with a cosmetic solution to the progress bar. After finally coming up for air, I started working with the help you provided. I actually implemented your idea and it works great. Thank you very much, this was a good experience and pushed my comfort level with dhtml up another notch.

Below is the basic ie implementation of your help.


<html>
<head>
<title>Test progress bar</title>
<style type="text/css">
.title{color:red}
.progressBar{height:30px; width:350px;}
#progressBar1{position:relative; left:200px; top:150px; color:blue;
background-color:yellow; z-index:0 }
#bottomPercent{position:absolute; z-index:1; height:30px;
color:blue; left:150px; width:45px; text-align:center; background-color:yellow; overflow:hidden}
#percentage{position:absolute; background-color:blue;
height:30px; width:0px; z-index:2;}
#topPercent{position:absolute; color:yellow; text-align:center; background-color:blue;
height:30px; width:0px; overflow:hidden; z-index:3;}
title{background-color:green; width:50px; overflow:hidden; height:30px}
</style>
<script language='JavaScript1.2'>
var pct = 0;
var sym = '%';
var width = 350;
var bottomPercentLeft = 150;
var bottomPercentWidth = 45;
var topPercentWidth = 0;
var newWidth = 0;
var topPercentLeft = 0;

function progressInit(){
process();
}

function process(){
pct++;
window.setTimeout("display(pct);", 250)
}

function formatPx(arg1){
return "'" + arg1 + "px" + "'";
}

function display(arg){
displayValue = eval(arg) + sym;
newWidth = width * arg * .01;
var displayWidth = formatPx(newWidth);
document.getElementById("percentage").style.width = eval(displayWidth);

if (newWidth > bottomPercentWidth){
topPercentLeft = newWidth - bottomPercentWidth;
topPercentLeftDisplay = formatPx(topPercentLeft);
document.getElementById("topPercent").innerText = displayValue ;


// working left side of percentage bar
if (newWidth < bottomPercentLeft){
//window.status="working left side";
document.getElementById("topPercent").style.width= "0px";
//document.getElementById("topPercent").style.left= eval(topPercentLeftDisplay);
}
// working right side of percentage bar
else if (newWidth >= bottomPercentLeft + bottomPercentWidth){
//window.status="working right side";
document.getElementById("topPercent").style.left= eval(formatPx(bottomPercentLeft));
document.getElementById("topPercent").style.width="45px" ;
}
// working middle of percentage bar
else{
topPercentWidth = newWidth - bottomPercentLeft;
//window.status="working middle: " + topPercentWidth;
document.getElementById("topPercent").style.left= eval(formatPx(bottomPercentLeft));
document.getElementById("topPercent").style.width= eval(formatPx(topPercentWidth));
}
}

document.getElementById("bottomPercent").innerText = displayValue;

if (arg < 100)
process();
}

</script>

</head>

<body onload="progressInit();">
<div class="title" id="title">
<center>
Test progress bar
</center>
</div>
<br>
<br>
<div class="progressBar" id="progressBar1">
<div id="bottomPercent">
</div>
<div id="percentage">
</div>
<div id="topPercent">
</div>
</div>
</body>
</html>