3
\$\begingroup\$

I'm trying to get my progress bar animated. I'd like it to smoothly transition in between the starting and destination values, but only be initiated by clicking the continue button.

The code I currently have works great, but when clicking forward or backward, it brings you directly to the values:

//PROGRESS BAR
$("#progress").progressbar(
{
    value: 0
})
//UPDATING PROGRESS BAR WHEN CONTINUE BUTTON CLICKED
var currValue=0,toValue=0;
$("#cont").button().click(function() 
{
    currValue = $("#progress").progressbar("value");
    if(currValue+25 <= 100) 
    {
        toValue=currValue+25;
        animateProgress();
    }    
});
//DECREASING PROGRESS BAR WHEN GO BACK BUTTON CLICKED
$("#back").button().click(function() 
{
    currValue = $("#progress").progressbar("value");
    if(currValue-25 > 0) 
    {
        toValue=currValue-25;
        animateProgress();
    }    
});
});

function animateProgress() {
  if (currValue < toValue) {
    $("#progress").progressbar("value", currValue+1);
    currValue = $("#progress").progressbar("value");
    setTimeout(animateProgress, 4);
  }
  else if (currValue > toValue) {
    $("#progress").progressbar("value", currValue-1);
    currValue = $("#progress").progressbar("value");
    setTimeout(animateProgress, 4);
  }
}

I've seen a couple examples of animated progressbars, but none by clicking and stopping when a certain value was reached.

Think of it more like 4 individual "slides" and the progress bar showing you which slide you're on.

EDIT: here's the working fiddle...http://jsfiddle.net/ryanhagz/8u76B/20/

Anyone tried something similar?

\$\endgroup\$
  • \$\begingroup\$ It would be better if you set up a demo in JSFiddle or JSBin so we can verify. \$\endgroup\$ – Joseph May 8 '14 at 6:07
  • \$\begingroup\$ I added the fiddle @JosephtheDreamer , it works perfectly in the fiddle which is why i don't understand why it doesn't work in my local version...? \$\endgroup\$ – ryanhagz May 8 '14 at 21:39
4
\$\begingroup\$

Not sure if it is helpful, but since we are on codereview, allow me to give it a shot.

  • there is a progress element available in HTML5 that works very easily and is fairly well supported (http://caniuse.com/progressmeter), except for in IE off course. I would suggest using this in stead of the (heavy) jquery-ui you use now.
  • When writing js code, avoid global variables at all cost. They take up resources, and some day they will come and haunt you when you accidentally overwrite a variable that you forgot about. Keep your variables in function scope whenever possible.
  • when you see yourself writing the same code more then once, with just a minor difference in one of the values, try to think of a way to reuse your code. It will decrease the number of bytes, make your code better maintainable, and almost certainly improve the quality of your code.
  • Be careful with setTimeout. It can be a very useful and powerful tool, but it costs quite some resources. When working with jQuery, try to use their functions in stead. They have been used and tested millions of times, and you are a lot less likely to mess things up when you use them.

With those tips in mind, I tried to rewrite your code.The full version is in the updated fiddle, and the javascript is here:

// changing progressbar when button is clicked
$(".button").click(function () {
    animateProgress(parseInt($(this).data('diff')));
});

// animate progress by a step indicated by diff
function animateProgress(diff) {
    var currValue = $("#progress").val();
    var toValue = currValue + diff;

    toValue = toValue < 0 ? 0 : toValue;
    toValue = toValue > 100 ? 100 : toValue;

    $("#progress").animate({'value': toValue}, 500);
}
|improve this answer|||||
\$\endgroup\$
  • \$\begingroup\$ You're the man, Peter! \$\endgroup\$ – ryanhagz May 9 '14 at 2:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.