Inline JQuery Progress Bar Text

Question

I am trying to use a basic progress indicator, but I cannot calculate the css / command command to actually put the text inside the panel. I use this progress bar: http://docs.jquery.com/UI/Progressbar , however I am open to others if they are just as easy to implement. I want it to display some static information in the left corner, and then the percentage filling somewhere on the right side. All the css that I tried to make simply displayed the information below or from the side. Also, I'm not sure how to actually have this CSS change based on the jQuery method (new to jQuery).

below is my actual jQuery. Do not try to understand the url value, just assume that 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 am not familiar with the plugin, but with CSS you can just put a div with an inscription on the progress bar. I'm not sure if it will work with nested divs, since the inner div can be deleted when the content for the progress bar is displayed.

You can play with the top and left positions to place the text exactly where you want. In person, you can dynamically swap left so that the text moves with the line, although this can be a bit more complicated.

Z-index should not be a problem, but if you want to reorder divs, you may need to make sure that the text has a larger z-index than the panel.

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; } 

HTML:

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

JS:

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

Answer 2

I improved the already developed concept of progressbar , which is just jquery and based on CSS (but not using jquery-ui). If you like, you can see the following link for information:

http://progressbar-simple.blogspot.com/

Hope this helps.