Conservancy/website
6
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Animate the progress bar at page load.

Browse source 
This is perhaps too flashy, but it does successfully animate the
progress bar up to the target amount, and also changes the amount until
it reaches the total raised so far.
This commit is contained in:
Bradley M. Kuhn 2015-03-09 00:28:05 -07:00
parent 2678369b5a
commit 6e3b2a22be
1 changed files with 18 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
www/conservancy/static/supporter-page.js
View file

@ -10,16 +10,32 @@ $(document).ready(function() {
var noCommaGoal = goal.replace(/,/g, ""); var noCommaGoal = goal.replace(/,/g, "");
var noCommaSoFar = soFar.replace(/,/g, ""); var noCommaSoFar = soFar.replace(/,/g, "");
var percentage = (parseFloat(noCommaSoFar) / parseFloat(noCommaGoal)) * 100; var percentage = (parseFloat(noCommaSoFar) / parseFloat(noCommaGoal)) * 100;
var curValue = 0.00;
var incrementSoFar = 0.00;
$('span#fundraiser-percentage').text(percentage.toFixed(2) + "%"); $('span#fundraiser-percentage').text("");
$('span#fundraiser-percentage').css({ 'color' : 'green', $('span#fundraiser-percentage').css({ 'color' : 'green',
'font-weight' : 'bold', 'font-weight' : 'bold',
'float' : 'right', 'float' : 'right',
'margin-right' : '40%', 'margin-right' : '40%',
'margin-top' : '2.5%', 'margin-top' : '2.5%',
'text-align' : 'inherit'}); 'text-align' : 'inherit'});
$("#progressbar").progressbar({ value: curValue });
function slowRise() {
if (curValue >= percentage) {
$('span#fundraiser-so-far').text(soFar);
$("#progressbar").progressbar({ value : percentage }); $("#progressbar").progressbar({ value : percentage });
$('span#fundraiser-percentage').text(percentage.toFixed(1) + "%");
} else {
var newVal = (curValue / 100.00) * noCommaGoal;
$("#progressbar").progressbar({ value: curValue });
$('span#fundraiser-so-far').text(newVal.toLocaleString());
curValue += 0.5;
setTimeout(slowRise, 50);
}
}
slowRise();
$('.toggle-content').hide(); $('.toggle-content').hide();