• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 489
  • Last Modified:

Progress Bar on Web Page using HTML/script

I want to do a progress bar using HTML. I have two images, like an old thermometer--one empty and one full. These are overlapped, and the full one grows from 0 to 100% as the procedure advances, filling up the tube. They are oriented horizontally. The hard part: I also want to show the percent complete text in the center, on top of the images.
<table width="100%" style="height:10px; font-size:xx-small;">
  <tr style="height:10px; font-size:xx-small">
    <td style="width:33%; font-size:xx-small;"></td>
    <td align="center" style="width:3.4%; background-image:url('progress_lit.jpg'); color:White; font-size:xx-small;">10%</td>
    <td align="center" style="width:30.6%; background-image:url('progress_back.jpg'); font-size:xx-small;"></td>
    <td style="width:33%; font-size:xx-small;"></td>
  </tr>
</table>

Open in new window

0
DanOBrien57
Asked:
DanOBrien57
  • 2
1 Solution
 
mudbuggleCommented:
I posted this in the other thread as well.
<html>
<head>
<script language="javascript" type="text/javascript">
function progress(obj)
{
	var image = document.getElementById('image');
	var percent = document.getElementById('percent');
	percent.innerHTML = obj + '%';
	inc = obj - 100;
	image.style.left = inc;
	if(obj == 100)
	{
		setTimeout('reset()',1000);
	}
}
 
function process()
{
	//Do Something
	//set progress
	progress(10);
	
	//Do Something else
	//set the progress to something else
	setTimeout('progress(30)',1000);
	
	//Again do something else and set the progress
	setTimeout('progress(60)',3000);
	
	//you get the idea
	setTimeout('progress(80)',3500);
	
	//finished
	setTimeout('progress(100)',4000);
	
}
 
function reset()
{
	var image = document.getElementById('image');
	var percent = document.getElementById('percent');
	percent.innerHTML = '';
	image.style.left = -100;
}
 
</script>
 
<style type="text/css">
.div {
	width : 102px;
	height : 18px;
	overflow : hidden;
	border : 1px solid;
}
 
.img {
	position : relative;
	left : -100px;
}
 
.perc {
	color : #CCC000;
	width : 100px;
	height : 18px;
	position : relative;
	top : -21px;
	font-weight : bold;
}
</style>
</head>
<body>
<center>
<div class="div">
<img class="img" src="Pictures/prog.bmp" id="image">
<div class="perc" id="percent"></div>
</div>
<br>
<input type="button" value="Click Me" onclick="process();">
</center>
</body>
</html>

Open in new window

0
 
DanOBrien57Author Commented:
Not exactly what I was going for. I have two images, one background and one lit up. I use them as background in two TDs, one 10%, the other 90%; then 20% and 80%, and so on. This part works great.
I also need something like a transparent DIV layered on top of the images to show the percent complete as text. This is the part that I'm having trouble with.
I've included a snippet. I'd like to know if I can use absolute positioning to layer a DIV on top of the changing images and if the DIV can be transparent, except for the embedded text (10%, 20%, etc.), so you can still see the images below.
0
 
mudbuggleCommented:
if you'll notice the
<div class="perc" id="percent"></div>
this element is doing that with a position relative as listed here
.perc {
      color : #CCC000;
      width : 100px;
      height : 18px;
      position : relative;
      top : -21px;
      font-weight : bold;
}
and the text is being set here
      var percent = document.getElementById('percent');
      percent.innerHTML = obj + '%';
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now