Animate the progress bar at page load.
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:
parent
2678369b5a
commit
6e3b2a22be
1 changed files with 18 additions and 2 deletions
|
@ -10,16 +10,32 @@ $(document).ready(function() {
|
|||
var noCommaGoal = goal.replace(/,/g, "");
|
||||
var noCommaSoFar = soFar.replace(/,/g, "");
|
||||
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',
|
||||
'font-weight' : 'bold',
|
||||
'float' : 'right',
|
||||
'margin-right' : '40%',
|
||||
'margin-top' : '2.5%',
|
||||
'text-align' : 'inherit'});
|
||||
$("#progressbar").progressbar({ value: curValue });
|
||||
|
||||
$("#progressbar").progressbar({ value: percentage });
|
||||
function slowRise() {
|
||||
if (curValue >= percentage) {
|
||||
$('span#fundraiser-so-far').text(soFar);
|
||||
$("#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();
|
||||
|
||||
|
|
Loading…
Reference in a new issue