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/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.
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./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.
Share Improve this question edited Oct 18, 2014 at 3:03 Lucas Rezende asked Oct 17, 2014 at 19:46 Lucas RezendeLucas Rezende 2,6868 gold badges29 silver badges34 bronze badges 2-
2
You are running that script before the DOM element is loaded. You need to either wrap it in
$(document).ready()or put the script at the end of<body>– Brennan Commented Oct 17, 2014 at 19:51 -
@Brennan, thanks for the answer. I put at the end of
<body>but didn't work also. :( – Lucas Rezende Commented Oct 17, 2014 at 19:52
1 Answer
Reset to default 15The 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.