JQuery Progress Bar Inline Text
- by Craig
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
