WordPress.org

Forums

Progress Bar
[resolved] Progress Bars labels *in* the bar? (6 posts)

  1. Tylo
    Member
    Posted 2 years ago #

    Hello,
    I'm not sure whether that's already implemented or easy to modify, but I think it could be somewhat trivial...
    I'd like to specify a label for the progress bars, and it'd show *inside* the bar, so I could have several bars nicely stacked, or with minimal spacing.
    [wppb progress=75 option=animated-candystripe percent=inside label='inprogress1']

    Which, in my concept, would display more or less like so (with the coloring behind it, of course):
    [ 75% inprogress 1 ]

    Or maybe

    [ inprogress 1 75% ]

    http://wordpress.org/extend/plugins/progress-bar/

    Any help is appreciated!

    Thanks!

    //Breno.

  2. Chris Reynolds
    Member
    Plugin Author

    Posted 2 years ago #

    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.

  3. Tylo
    Member
    Posted 2 years ago #

    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!

  4. Tylo
    Member
    Posted 2 years ago #

    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>";
    (...)
  5. Chris Reynolds
    Member
    Plugin Author

    Posted 2 years ago #

    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 :)

  6. Tylo
    Member
    Posted 2 years ago #

    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!

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • Progress Bar
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic