Welcome to the LimeSurvey Community Forum

Ask the community, share ideas, and connect with other LimeSurvey users!

Display percentage value within progressBar

More
9 years 2 months ago - 9 years 2 months ago #124356 by tillB
TLDR: In addition to the progressbar, I would like to display the progress as percentage value within the progress bar.

Dear Limes,

after i got an amazing solution for my last problem , i learned to really appreciate this forum!
Now i got stuck with my next problem and hope for your help again:

I want to display the current progress value within the progress bar. I tried to use js to change the innerHTML of the ui-progressbar-value div but somehow failed. This is what i put at the end of template.js:
Code:
$(document).ready(function(){
 
    $("div.ui-progressbar-value").each(function() {
        var percentage = $(this).width() / $(this).parent().width() * 100;
        $(this).innerHTML = percentage;
  alert(percentage);
    });
});

To debug, i put an alert(percentage) at the end - which didnt trigger. So i think that my code doesn't even run :/.
Could you please give me a hint how to always display the current progress as percentage value withing the progress bar?

Thanks a lot!
Till
Last edit: 9 years 2 months ago by tillB.
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
9 years 2 months ago #124415 by tpartner
Replied by tpartner on topic Display percentage value within progressBar
You need to wait for the progress bar to be rendered:

Code:
$(document).ready(function() {
  // Progress bar value    
  $('#progressbar').on('progressbarcreate', function(event, ui) {
    $('div.ui-progressbar-value').text($('#progressbar').attr('aria-valuenow')+'%');
  });
});

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.
Moderators: tpartnerholch

Lime-years ahead

Online-surveys for every purse and purpose