Display percentage value within progressBar

More
3 years 3 weeks ago - 3 years 3 weeks ago #124356 by tillB
tillB created the topic: Display percentage value within progressBar
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 3 weeks ago by tillB.

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

More
3 years 3 weeks ago #124415 by tpartner
tpartner replied the topic: Display percentage value within progressBar
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.

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!