How to create a JavaScript based Animated Progress Bar for online Poll?

JavaScript
1

Hi,

We want to have Polls where the result of Voting are shown instantly via AJAX through Animated progress bars.

You can see a sample (dummy) Poll here:
https://www.anoox.com/polls/poll.php?id=4

Where you can Vote and then as you can see the Vote results are currently displayed in simple Text and we need to replace this with Colorful animated progress bars.

Just to be clear, the resulting AJAX based JS Code will will write to an empty DIV for each Poll Answer via:

document.getElementById(ans_id).innerHTML = ans_per;

where “ans_id” is the name of the DIV for each Answer.

and “ans_per” is the percentage of Votes that that Answer has gotten.

So the empty DIV for each Poll Answer then is:

waiting to be filled with the Animated progress bar.

How do we make such progress bar animation in different colors using JS and CSS only? No JQuery please.

Thanks,

2

Example using CSS animation:

3

Hi,

It is not working! You can see here:

https://www.anoox.com/polls/test_simple_rgb.php

Thanks

4

You put the script in the head which means that the html doesn’t exist yet and therefore has nothing to target. Move the script to the end of the html just before the cloing body tag.

<script language="JavaScript">

    function setVotes(ans_id, ans_prc){
		var bar = document.getElementById(ans_id).style.width = ans_prc + '%';
	}

	var b1 = b2 = b3 = 0;

	document.getElementById('add1').onclick = function(){
		b1 += 10;
		setVotes('bar1', b1);
	}

	document.getElementById('add2').onclick = function(){
		b2 += 20;
		setVotes('bar2', b2);
	}

	document.getElementById('add3').onclick = function(){
		b3 += 50;
		setVotes('bar3', b3);
	}



</script>
</body>
5

Hello Paul,

Ok, that basic sample is now working as per your suggestion.

But how do I apply this to the Poll results that we want to display the votes with such animated bars.
As you see here:
https://www.anoox.com/polls/poll.php?id=4

where the poll results are generated in real time via AJAX calling a Php program.
So that is before hand we do not know what the DIV ids will be since they are dynamically generated.

Much Thanks,
Dean

6

Just call setVotes(ans_id, ans_per) like you wanted in your OP

7

So after some coding I have done as you have suggested. That is integrated this code into our code and calling:

setVotes(ans_id, ans_per);

You can see it here:

https://www.anoox.com/polls/poll_test.php?id=4

But nothing is happening!

8

Hi,

I changed the SPAN to DIV and now the Bars are showing after Voting.
But without the Animation which is Key.
You can see here:

Thanks

9

You have NO Answer then!

10

And? Do I owe you something?
I created working example but I don’t want to debug entire logic of your app.
This is a forum and you still have chances to get help from someone else.
No need to be rude.

1 Like
11

No, dont mean to be rude. Sorry, if it came across as that!
Just was wondering if by any chance you had the answer as to why that Progress Bar Animation is not working when it is being called via Ajax as it is in our actual program?

Thanks,
Dean

12

I would try to make results div visible before sending AJAX request
Because now it seems like animation finishes faster than results div is actually rendered

13

Well I already did that.

But I found someone to Code this lil task, so we are done with this question.

Cheers,

14

helo …
I’d listened wrote, because I also do not understand the scrip , hopefully after listening , I will understand and the more eager to make the website even more advanced .

15

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.