Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • April 5, 2016 at 2:20 pm #608304
    DavyE

    I’m going to use the Progress Bars element for about 30 rows, each showing a 0-100 percentage (changing on a monthly basis). Unfortunately, the basic option to show the percentage to visitors seems to be missing and I tried tinkering with the PHP, but so far no luck (due to my limited PHP knowledge). I need people to not only see the progress bar, but also what specific percentage it is at.

    I guess we need to manually add the percentage in the title, but that means double work (and possible mistakes) each time we edit the entire list, while it seems to me it should be rather easy to just display a field that is already entered. What’s the point of having to enter the percentage twice? I select it with a dropdown, so I would assume there would be a second dropdown or checkbox to choose whether or not to display it on top of the bar.

    Is the following snippet what will be shown on the page?

    if($bar['attr']['icon_select'] == "yes" || $bar['attr']['title'])
 {
  $output .="<div class='progressbar-title-wrap'>";
  $output .="<div class='progressbar-icon'><span class='progressbar-char' {$display_char}></span></div>";
  $output .="<div class='progressbar-title'>".$bar['attr']['title']."</div>";
  $output .="</div>";
 }

    If yes, can I not add an existing piece in there somehow? For example, using existing info from:
    <span {$template_percent} >".$params['args']['progress']."%</span>

    Like so:

    if($bar['attr']['icon_select'] == "yes" || $bar['attr']['title'])
 {
  $output .="<div class='progressbar-title-wrap'>";
  $output .="<div class='progressbar-icon'><span class='progressbar-char' {$display_char}></span><span class='progressbar-percent' {$display_percent}></span></div>";
  $output .="<div class='progressbar-title'>".$bar['attr']['title']."</div>";
  $output .="</div>";
 }

    I’m ok with having to edit the php file(s).

    Thanks in advance!

    • This topic was modified 8 years, 8 months ago by Yigit.
    April 7, 2016 at 3:14 am #609275
    Ismael

    Hey DavyE!

    Thank you for using Enfold.

    Set the percentage value of the bar in the Progress in % field then add this in the functions.php file:

    // bar percentage
add_action('wp_footer', 'ava_custom_script');
function ava_custom_script(){
?>
<script type="text/javascript">
(function($) {
    $('.avia-progress-bar .bar').each(function() {
        var data = $(this).data('progress');
        $(this).html('<div class="percentage">' + data + '%</div>');
    });
})(jQuery);
</script>
<?php
}

    Style the percentage box with this:

    .bar .percentage {
    display: block;
    position: absolute;
    right: 10px;
    background: red;
    color: white;
    padding: 0 10px;
}

    Cheers!
    Ismael

    April 7, 2016 at 10:39 am #609472
    DavyE

    Perfect, this is exactly what I was hoping for!

    Thank you so much, Ismael! :-D

  • Author
    Posts
Viewing 3 posts - 1 through 3 (of 3 total)
  • The topic ‘Show percentage on Progress Bars’ is closed to new replies.