Menu
I have the following HTML code, using Bootstrap:
<div class="progress">
<div class="progress-bar progress-bar-striped active" id="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
</div>
</div>
I want style="width: 0" to increase until it is 100%. I tried to use the code below as a test, but nothing happened.
<head>
<title>Verifying Oracle database...</title>
<script src="ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
<script>
$(document).ready(function() {
$("#progress-bar").css("width", "50%");
$("#progress-bar").attr("aria-valuenow", "50%");
});
</script>
</head>
Can someone help to make this progress happen?
Thanks in advance.
827
The code you use to update width is correct, but as @Brennan pointed out it has to run after the progress bar is rendered - e.g. by placing the script tag after the progress bar tag (fiddle) or by running it in the document ready handler (fiddle).
The following is the minimal version which does what you tried (the fiddles emulate progress running from 0 to 100):
$(function() {
$("#progress-bar").css("width", "50%");
});
Another note on the code: along with the width of the progress bar you should update the aria-valuenow attribute which represents the current value of a range widget (here the progress bar) for the assistive technology browsers. In your sample you have aria-valuenow 45 but width 0, which is inconsistent.
197
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
