Display percentage value within progressBar

More
3 years 8 months ago - 3 years 8 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:
$(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: 3 years 8 months ago by tillB.

Please Log in or Create an account to join the conversation.

LimeSurvey Partners
More
3 years 8 months ago #124415 by tpartner
You need to wait for the progress bar to be rendered:

$(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.
Official LimeSurvey Partner - partnersurveys.com

Please Log in or Create an account to join the conversation.

Start now!

Just create your account and start using Limesurvey today.

Register now
Join our Newsletter!