?
Solved

Progress Bar on Web Page using HTML/script

Posted on 2009-04-21
3
Medium Priority
?
473 Views
Last Modified: 2012-08-14
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
Comment
Question by:DanOBrien57
  • 2
3 Comments
 
LVL 6

Expert Comment

by:mudbuggle
ID: 24193533
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
 

Author Comment

by:DanOBrien57
ID: 24193734
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
 
LVL 6

Accepted Solution

by:
mudbuggle earned 1000 total points
ID: 24193757
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

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

A while back, I ran into a situation where I was trying to use the calculated columns feature in SharePoint 2013 to do some simple math using values in two lists. Between certain data types not being accessible, and also with trying to make a one to…
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
Suggested Courses

850 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question