JQuery Progress Bar Inline Text
Posted
by Craig
on Stack Overflow
See other posts from Stack Overflow
or by Craig
Published on 2010-06-10T20:38:19Z
Indexed on
2010/06/10
20:43 UTC
Read the original article
Hit count: 288
Hello, I am trying to use the basic progress bar however I am unable to figure out the css/command to actually put some text inside the bar. I am using this progress bar: http://docs.jquery.com/UI/Progressbar however I am open to other ones if they are just as simple to implement. I want it to display in the left corner some static information and then a percentage of complete somewhere in the right section. All css I attempted to do just made the information display below or to the side of. As well I am unsure how to actually have this CSS change based on a JQuery method (new to JQuery).
below is my actual JQuery. Don't try to understand the url value just assume it returns 0-100.
<script type="text/javascript">
var url = "%%$protocol_url%%/bin/task_status?id=%%$tid%%&cmd=percent_done";
$(function() {
var progress = 0;
//alert("some value" + value, value);
$("#progressbar").progressbar({ progress: 0 });
setTimeout(updateProgress, 500);
});
function updateProgress() {
var progress;
$.get(url, function(data) {
// data contains whatever that page returns
if (data < 100) {
$("#progressbar")
.progressbar("option", "value", data);
setTimeout(updateProgress, 500);
} else {
$("#progressbar")
.progressbar("option", "value", 100);
}
});
}
Thanks
© Stack Overflow or respective owner