Menu
I’m trying to make a simple progress bar.
The problem is that the initial display width, although set to 50%, shows much less.
Adding more or less (range 0..100) to the percentage, has very little effect.
Can someone spot what I’m doing wrong here, either in the CSS or the math?
[code]
<html>
<head>
<title>progressbar Demo</title>
<style type=”text/css”>
.chart {position:relative; width:100%; background:#AAA; }
.bar {position:absolute; left:0px; background:#0F0; color:#000; }
</style>
<script type=”text/javascript”>
var maxChart = 100;
function moveBar(amt) {
var sel = document.getElementById(‘bar’);
var v = sel.style.width;
v = v.substr(0,v.indexOf(‘%’));
v = ((Number(v)+Number(amt))/maxChart)*maxChart;
if (v < 0) { v = 0; }
if (v > maxChart) { v = maxChart; }
v = v.toFixed(0)+’%’;
sel.style.width = v;
sel.innerHTML = v;
}
</script>
</head>
<body>
<div style=”width:100px; background-color: #888″>
<span class=”chart” id=”chart”>
<span class=”bar” id=”bar” style=”width:50%”>50%</span>
</span>
</div>
<button onclick=”moveBar(-5)”>Less</button>
<button onclick=”moveBar(5)”>More</button>
</body>
</html>