Dynamically change the dynamic loading schedule
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" increase to 100%. I tried using 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 anyone help to make this progress?
Thanks in advance.
The code you use to update the width is correct, but since @Brennan indicated that it should be run after the progress bar is displayed - for example, by placing the script tag after the progress indicator ( fiddle ) tag or by running it in the document handler ( fiddle ).
Below is the minimal version that does what you tried (scripts emulate a stroke from 0 to 100):
$(function() { $("#progress-bar").css("width", "50%"); }); One more note to the code: in addition to the execution bar width, you need to update the aria-valuenow , which represents the current value of the range widget (here is the progress bar) for assistive technology browsers. In your example, you have aria-valuenow 45, but the width is 0, which is inconsistent.