So I have a great progress bar thanks to some of you on stackoverflow. My question is how do I get text to tell the percentage of the progress bar and move with the progress bar (if the green part of the bar is at 50% I want the text to be at 25% ect...i.e always in the middle of the progress)
Thanks!
<!DOCTYPE html>
<html>
<head>
<title>Information Security Assessment</title>
<link rel="stylesheet" type="text/css" href="AuditScriptAssesmentToolTest.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="~/Scripts/jquery-1.12.4.min.js"></script>
<!--************************************************************************ -->
<!-- **********************************************************************************************************************************************-->
<div id="head">
<br>
<div id="myProgress">
<progress id='progressBar' max='100' value='0' style="background-color: red; font-family: Impact, Charcoal, sans-serif;" " ><strong>0%</strong></progress>
</div>
<!-- <div id="myProgress ">
<progress max="100 "><div id="myBar " style="font-family: Impact, Charcoal, sans-serif; ""><strong>0%</strong></div>
</div> -->
<br>
</div>
</head>
<body>
<br>
<main class="mainarea">
<br>
<br>
<!-- **********************************************1111111111111111111111111********************************************************-->
<div class="control1">
<div id="criticalSecurityControlForms">
<form action="/action_page.php">
<select id="FirstQOne" name="firstQOne" onchange="this.className=this.options[this.selectedIndex].className" class="whiteselected">
<option class="whiteselected" disabled selected="selected" value="0">Select an Implementation</option>
<option class="Not" value="0">Not Implemented</option>
<option class="ImplementedOnSome" value="10">Implemented on Some Systems</option>
<option class="All" value="15">Implemented on All Systems</option>
<option class="AllAndAuto" value="20">Implemented and Automated on All Systems</option>
</select>
</form>
</div>
<br>
<div id="criticalSecurityControlForms">
<form action="/action_page.php">
<select id="FirstQTwo" name="firstQOne" onchange="this.className=this.options[this.selectedIndex].className" class="whiteselected">
<option class="whiteselected" disabled selected="selected" value="0">Select an Implementation</option>
<option class="Not" value="0">Not Implemented</option>
<option class="ImplementedOnSome" value="10">Implemented on Some Systems</option>
<option class="All" value="15">Implemented on All Systems</option>
<option class="AllAndAuto" value="20">Implemented and Automated on All Systems</option>
</select>
</form>
</div>
<br>
</div>
<script>
function update_progressbar() {
var opt1 = parseInt($('option:selected', $('#FirstQOne')).val());
var opt2 = parseInt($('option:selected', $('#FirstQTwo')).val());
var opt3 = parseInt($('option:selected', $('#FirstQThree')).val());
var opt4 = parseInt($('option:selected', $('#FirstQFour')).val());
var opt5 = parseInt($('option:selected', $('#FirstQFive')).val());
var opt6 = parseInt($('option:selected', $('#FirstQSix')).val());
var opt7 = parseInt($('option:selected', $('#FirstQSeven')).val());
var opt8 = parseInt($('option:selected', $('#FirstQEight')).val());
var total = isNaN(opt1) ? 0 : opt1;
if (!isNaN(opt2)) {
total += opt2;
}
if (!isNaN(opt3)) {
total += opt3;
}
if (!isNaN(opt4)) {
total += opt4;
}
if (!isNaN(opt5)) {
total += opt5;
}
if (!isNaN(opt6)) {
total += opt6;
}
if (!isNaN(opt7)) {
total += opt7;
}
if (!isNaN(opt8)) {
total += opt8;
}
$("#progressBar").prop('value', total)
}
$('#FirstQOne').on('change', update_progressbar);
$('#FirstQTwo').on('change', update_progressbar);
$('#FirstQThree').on('change', update_progressbar);
$('#FirstQFour').on('change', update_progressbar);
$('#FirstQFive').on('change', update_progressbar);
$('#FirstQSix').on('change', update_progressbar);
$('#FirstQSeven').on('change', update_progressbar);
$('#FirstQEight').on('change', update_progressbar);
</script>
</main>
</body>
</html>
See Question&Answers more detail:os