Progress Bar Text
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 (i
Solution 1:
Use the CSS ::after selector and attr() function for this. The ::after selector appends text to the end of the element, while attr() returns the value of a given attribute.
functionupdate_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);progress {
text-align: center;
}
progress:after {
content: attr(value)'%';
position: relative;
top: -1.15em;
}<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divid="head"><br><divid="myProgress"><progressid='progressBar'max='100'value='0'style="background-color: red; font-family: Impact, Charcoal, sans-serif;"></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><body><br><mainclass="mainarea"><br><br><!-- **********************************************1111111111111111111111111********************************************************--><divclass="control1"><divid="criticalSecurityControlForms"><formaction="/action_page.php"><selectid="FirstQOne"name="firstQOne"onchange="this.className=this.options[this.selectedIndex].className"class="whiteselected"><optionclass="whiteselected"disabledselected="selected"value="0">Select an Implementation</option><optionclass="Not"value="0">Not Implemented</option><optionclass="ImplementedOnSome"value="10">Implemented on Some Systems</option><optionclass="All"value="15">Implemented on All Systems</option><optionclass="AllAndAuto"value="20">Implemented and Automated on All Systems</option></select></form></div><br><divid="criticalSecurityControlForms"><formaction="/action_page.php"><selectid="FirstQTwo"name="firstQOne"onchange="this.className=this.options[this.selectedIndex].className"class="whiteselected"><optionclass="whiteselected"disabledselected="selected"value="0">Select an Implementation</option><optionclass="Not"value="0">Not Implemented</option><optionclass="ImplementedOnSome"value="10">Implemented on Some Systems</option><optionclass="All"value="15">Implemented on All Systems</option><optionclass="AllAndAuto"value="20">Implemented and Automated on All Systems</option></select></form></div><br></div>Solution 2:
I wouldn't use that much code. Look at this https://jsfiddle.net/nojja492/1/ (improved example)
var percent = '50%';
$('#mybar .percentage').css('width', percent).text(percent);.progressbar {
border:1px solid black;
width:100px;
height:20px;
padding:1px;
}
.percentage {
text-align: center;
background:red;
height: 100%;
font-size:11px;
line-height: 20px;
}<divid="mybar"class="progressbar"><divclass="percentage"></div></div>
Post a Comment for "Progress Bar Text"