JQuery Progress Bar Inline Text

Question

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

Answer 1

I'm not familiar with the plugin, but with CSS you can just position the div with lettering over the progress bar. I'm not sure if it would work with nested divs,since the inner div may get erased when the content for the progress bar is rendered.

You can play around with the top and left positions to position the text exactly where you want. In face you can dynamically change left, so that the text moves with the bar, though this may be a little trickier.

Z-index should not be a problem, but if you want to change the order of the divs, you might have to make sure that the text has a greater z-index than the bar.

The CSS:

#bardivs {
    width:400px; /* or whatever the of the porgress bar is */
    /* 
       The position of #bardivs must be something other than
       static (the default) so that its children will be positioned
       relative to it.
    */
    position:relative;
}
#progresstext {
    position:absolute;
    top:0;
    left:0;
}

The HTML:

<div id="bardivs">
    <div id="progressbar"></div>
    <div id="progresstext"></div>
</div>

The JS:

$("#progressbar").progressbar("option", "value", data);
$("#progresstext").html("<p>Hard code or string here<p>");