Hi i've done a progress bar in javascript. but i dont know how to do the mapping.that is map it to a percentage. the lenght of my progress bar is 260. Can someone help?
techyworld 0 Junior Poster in Training
Recommended Answers
Jump to Postwhat do you mean by mapping? You mean you have like 100% of something but scale is 260 so you want to find how much 1% means on scale?
100% - 260
1 % - x1*260/100 = 2.6
if its that what you want :)
All 4 Replies
McLaren 3 Posting Whiz in Training
what do you mean by mapping? You mean you have like 100% of something but scale is 260 so you want to find how much 1% means on scale?
100% - 260
1 % - x
1*260/100 = 2.6
if its that what you want :)
techyworld 0 Junior Poster in Training
yes but how will i do it in javascript? i'm using ocanvas library
andrag73 0 Newbie Poster
Use <div id=...>My progress bar</div>
And change the contents (innerHTML property) with your progress bar !
I did it in my programs and it works fine !
Biiim 182 Junior Poster
Maybe OTT but it was fun. heres an example of progress bar in JS
<html>
<head>
<script type='text/javascript'>
var barLength = 260;
var progress = 0;
var progressEnd = 200;
var progressBarCurrent = 0;
var tickSpeed = 300;
function setProgressBar(obj,barLength,progress,progressEnd){
if(progress < 0){
obj.style.width = '0px';
}else{
var percentage = progress/progressEnd;
var barlen = barLength*percentage;
obj.style.width = barlen+'px';
}
}
function tester(obj){
//alert(obj);
progress = progress + 1;
setProgressBar(obj,barLength,progress,progressEnd);
setTimeout(function() { tester(obj); },tickSpeed);
}
function resetBar(){
progress = 0;
}
function updateBarLen(obj){
barLength = parseInt(obj.value);
}
function updateTickSpeed(obj){
tickSpeed = parseInt(obj.value);
}
</script>
</head>
<body>
<div id='progressLoadBar' style='height:30px;background-color:#cc2222;border-radius:5px;box-shadow: 3px 3px 15px #dddddd;'></div>
<br/>
<a href='javascript:' onclick='resetBar();'>Reset Progress</a><br/>
Change bar width:<input onchange='updateBarLen(this);' value='260'/><br/>
Change tick speed(ms):<input onchange='updateTickSpeed(this);' value='300'/>
<script type='text/javascript'>
var theProgressBar = document.getElementById('progressLoadBar');
tester(theProgressBar);
</script>
</body>
</html>
Be a part of the DaniWeb community
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.