HTML Help

Hardware · Joined: 23 Nov 2008 Posts: 4

I'm hoping to create a progress bar which can have the percentage complete just inputted rather than calculated. I want to be able to put in a number which alters the % complete on a progress bar to graphically suppliment the information about progress. i'm a bit of an HTML noob but if i get on the right track i can usually figure things out.

this is for something akin to reaching a donation goal.

Thanks guys,

Hw

Corey Bryant · Posted: Sun Nov 23, 2008 5:19 am

How are you filling this bar and what are you using to create it - a table or div?

The easiest / HTML way would be just to create an image that is the width you need and a specific height - maybe 5px. And it would take 20 of these images to reach 100% of your goal. Or you could just recreate the image as you go along to match the proper percentage.

_________________
Corey
Toll Free Fax Numbers | Mile High Merchant Accounts | Expression Web Blog

Straystudio · Joined: 14 Apr 2008 Posts: 264 Location: Nord Italy

Let me think of a table expanding inside a table, this having a given fixed width.

<table width="200">
<td bgcolor="silver">

<table id="bar" height="20">
<td bgcolor="blue">
</td>
</table>

</td>
</table>

Two combined JavaScript commands send which % value the expanding table has to stretch to; this keeps fixed height, in the meantime:
Code: <input id="level" type="text" size="3" value="" onclick='this.value="";'>

<input type="button" value="<" onclick='document.getElementById("bar").width=document.getElementById("level").value+"%";'>

Play with border="0" cellpadding="0" cellspacing="0" in tables.

The onclick='this.value="";' auto-clears the text-field on clicking.

A SCRIPT in the HEAD to make the process automatic (timed):
Code:
<html>
<head>
<title>Progress Bar</title>

<script type="text/javascript">

var facing = 0;

function stretch(){
var perc = facing +1;
document.getElementById("bar").width=perc+"%";
facing = perc;
if(facing == 100){
clearTimeout(T3);
} else {
T3 = setTimeout('stretch()', 80);
}
}

</script>

</head>
<body bgcolor="" onload='stretch();'>

The function stretch() needs to be triggered; here done by onload='stretch();' added in BODY Tag.

The number in T3 = setTimeout('stretch()', 80); You can change on Your own, defines how many milli-seconds the function waits to self re-trigger.
Once Value reachs 100, if statement stops the auto process.