Tagged: Progress Bar
-
AuthorPosts
-
July 29, 2021 at 7:59 pm #1313320
We’d like to track fundraising using the progress bar. Can we turn the percentage into real numbers (dollars)? I couldn’t find anything on the forums. I know there are other plugins if not.
Thanks!
DanielAugust 1, 2021 at 7:17 pm #1313716Hey Daniel,
Thank you for your patience, there is not a built-in way to do this, but you could try this approach.
In this example we will change the Minimal Progress Bar from percentages to dollar values using a script, first we will add the custom ID dollar-example to the element
Set your percentages to how far you want them to show, you can calculate your goal or just guess, this is only for looks.
Then add this css to your Quick CSS, it will add the dollar symbol to the values#dollar-example .avia-progress-bar .progressbar-percent .av-bar-counter:before { content: "$"; }
Then add this script to the end of your functions.php file in Appearance > Editor:
function custom_progressbar_script() { ?> <script> (function($){ $(document).ready(function(){ $("#dollar-example .avia-progress-bar .progressbar-percent").contents().filter(function(){ return this.nodeType == 3; }).remove(); $("#dollar-example .avia-progress-bar:nth-child(1) .progressbar-percent .av-bar-counter").attr('data-number', 50000); $("#dollar-example .avia-progress-bar:nth-child(2) .progressbar-percent .av-bar-counter").attr('data-number', 45500); $("#dollar-example .avia-progress-bar:nth-child(3) .progressbar-percent .av-bar-counter").attr('data-number', 39000); $("#dollar-example .avia-progress-bar:nth-child(4) .progressbar-percent .av-bar-counter").attr('data-number', 11500); }); })(jQuery); </script> <?php } add_action('wp_footer', 'custom_progressbar_script');
The first line of the script removes the percentage symbol, the next 4 lines replace the values of the 4 progress bars in the example. For this example $50,000 = 100%.
You will need to manually change the values.
The expected results
Best regards,
Mike -
AuthorPosts
- You must be logged in to reply to this topic.