On my tutorial website, I'm using jQuery UI progress bars not as bars that will change, but as images to display to show the user how far they are through the tutorial. Example:
$(document).ready(function() {
$(.progressbar).progressbar({
value: 50
});
});<link rel="stylesheet" type="text/css" href="CSS/jQueryUI.css">
<script type="text/javascript" src="JS/jQuery.js"></script>
<script type="text/javascript" src="JS/jQueryUI.js"></script>
<script type="text/javascript" src="JS/index.js"></script>
<body>
Lots of stuff here
<div class="progressbar"></div>
<span style="text-align: center">50% plete</span>
Lots more stuff here
</body>On my tutorial website, I'm using jQuery UI progress bars not as bars that will change, but as images to display to show the user how far they are through the tutorial. Example:
$(document).ready(function() {
$(.progressbar).progressbar({
value: 50
});
});<link rel="stylesheet" type="text/css" href="CSS/jQueryUI.css">
<script type="text/javascript" src="JS/jQuery.js"></script>
<script type="text/javascript" src="JS/jQueryUI.js"></script>
<script type="text/javascript" src="JS/index.js"></script>
<body>
Lots of stuff here
<div class="progressbar"></div>
<span style="text-align: center">50% plete</span>
Lots more stuff here
</body>However, what I want it to do is have multiple progress bars with different values. I want to have a class for the progress bars, and a custom attribute for its value. Something like this:
$(document).ready(function() {
$(.progressbar).progressbar({
value: $(.progressbar).attr("data-progress-value");
});
});<link rel="stylesheet" type="text/css" href="CSS/jQueryUI.css">
<script type="text/javascript" src="JS/jQuery.js"></script>
<script type="text/javascript" src="JS/jQueryUI.js"></script>
<script type="text/javascript" src="JS/index.js"></script>
<body>
Lots of stuff here
<div class="progressbar" data-progress-value="33"></div>
<span style="text-align: center">33% plete</span> Lots more stuff here
<div class="progressbar" data-progress-value="67"></div>
<span style="text-align: center">67% plete</span> More stuff here
<div class="progressbar" data-progress-value="90"></div>
<span style="text-align: center">90% plete</span>
</body>I know this code won't work though, because the jQuery docs say .attr and all similar functions only get the attribute of the first of the set.
Is something like this possible in jQuery?
Or, for the XY problem showing here, If this is not possible, how can I dynamically set static progress bars?
Thank you in advance.
Share Improve this question asked Jul 30, 2017 at 12:31 AAM111AAM111 1,2393 gold badges21 silver badges44 bronze badges3 Answers
Reset to default 3Fairly simple in an each() where you have access to each element instance before initializing plugin for that element.
$(function() {
$('.progressbar').each(function() {
var $el = $(this);
$el.progressbar({
value: $el.data("progress-value")
});
});
})<link rel="stylesheet" href="//cdnjs.cloudflare./ajax/libs/jqueryui/1.10.0/css/smoothness/jquery-ui-1.10.0.custom.min.css" />
<script src="https://ajax.googleapis./ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare./ajax/libs/jqueryui/1.10.0/jquery-ui.js"></script>
Lots of stuff here
<div class="progressbar" data-progress-value="33"></div>
<span style="text-align: center">33% plete</span> Lots more stuff here
<div class="progressbar" data-progress-value="67"></div>
<span style="text-align: center">67% plete</span> More stuff here
<div class="progressbar" data-progress-value="90"></div>
<span style="text-align: center">90% plete</span>Old post ik but this is what is working for me:
- NOTE: progress tag is defined since html 5
- NOTE2: You can smooth out the "animation" by tweaking the delay times.
let progress = 0;
let timeoutSec = 10;
/**
* This will update indefinetly and will run "yourRepeatetUpdate()" func every "10" sec
* Time progress is displayed every update in <progress id="progressTillUpdate" ...></progress> html elem
*/
setInterval(
(function () {
console.log("Progress: " + progress + "/" + timeoutSec)
document.getElementById("progressTillUpdate").max = timeoutSec;
document.getElementById("progressTillUpdate").value = progress; // Does not update for some reason
if (progress == timeoutSec) {yourRepeatetUpdate()}
progress = (progress < timeoutSec) ? progress + 1 : 0; // Loop after timeoutSec
}), 1*1000); // Updates every second
async function yourRepeatetUpdate() {
/*code*/
};<style>
progress {
animation-duration: 1s;
}
</style>
<progress id="progressTillUpdate" value="0" max="100" style="width: 100%;height:20px;">
Progress bar
</progress>You could add an additional class unique to each progress bar, like pb1, pb2 etc.
Then just
$(document).ready(function() {
$(.pb1).progressbar({
value: 75
});
$(.pb2).progressbar({
value: 50
});
});