So you want the *label* to be inside the bar so you don’t have to do something like:
In Progress: [wppb progress=75 percent=inside]
correct?
You could do this with CSS, but it would be tricky. Basically what you’d need to do is position a div with your label inside the progress bar.
http://www.alistapart.com/articles/css-positioning-101/
Or you could probably do it with jQuery by finding *where* you want to add the content and add it in with js after the page loads.
Thread Starter
Tylo
(@tylo)
First of all, thanks a lot for the quick reply!
Yeah, I’d like to have the bar span across a side column, and it wouldn’t have enough space to fill label and a reasonably-sized bar.
As of November 2012 (for you future readers), you can check what I mean on http://www.paintingdesk.com
When I started putting the site together I spent days banging my head on the keyboard until the code came out right and I could have a progress bars plugin do what I wanted (TDD), but a future update overwrote that, because I was stupid.
I prefer the WPPB approach, with the bar self-contained in quick code, and I’d rather invest some time digging into that instead.
My idea was to locate where you are “plotting” the % inside the bar, and just append the bar name there. Putting it there and aligning to either side would be good enough for me, I can handle text leaking/overflowing the bar on my own, restricting the name/label size. Any ideas/pointers on how I could achieve that? Not much of a coder here, and zero experience with jQuery definitely take me away from that route.
Thanks!
Thread Starter
Tylo
(@tylo)
I got the concept to work, now it is a matter of adjusting the formatting…
on wp-progress-bar.php:
(...)
function wppb( $atts ) {
extract( shortcode_atts( array(
'label' => '',
'progress' => '', // the progress in %
(...)
(...)
$wppb_output .= "\">";
if ($atts['percent']) { // if $percent is not empty, add this
$wppb_output .= "<div class=\"{$percent}\">{$label}{$progress}%</div>";
(...)
I was going to suggest that, actually. After I thought about it a while, you could always add another attribute. I’m reluctant to add yet another attribute to an already long shortcode that was intended to be simple 🙂
Thread Starter
Tylo
(@tylo)
It seems I can do it with HTML5 as well:
http://stackoverflow.com/questions/12452594/how-can-i-add-label-inside-a-progress-bar-tag
http://jsfiddle.net/qfwTy/
I’m marking this one as ‘closed’, as it is a fairly clear and simple customisation. Thanks, Chris!
