0

I'm trying integrate these awesome circular buttons with my form. Everything works but I have one problem: I wanna different status time for each button.

Here is an example: http://jsfiddle.net/uqgv0838/1/ I wanna that second button will have status a bit longer.

This piece of code is for status time:

UIProgressButton.prototype.options = {
// time in ms that the status (success or error will be displayed) - should be at least higher than the transition-duration value defined for the stroke-dashoffset transition of both checkmark and cross strokes 
statusTime : 1500
}

How can I set this time for each button individually?

It'd be great if each status also have different types. E.g. "success" will be forever but "error" only for several seconds.

Can anyone help me?

  • This question appears to be off-topic because it is about programming which is off-topic at Pro Webmasters. Programming questions may be asked at Stack Overflow but be sure to read their FAQ before posting to ensure your question meets their guidelines. – John Conde Dec 31 '14 at 20:17
1

One way you can do this is by making a small change to the UIProgressButton.prototype.stop function.

You need to make sure that you

  1. do not get rid of the statusClass class
  2. manually set the statusTime by editing self.options.statusTime to whatever value you want it to be.

Check the edit I made here. Look at the function mentioned above.

I just changed (from the stop() function)

       setTimeout( function() {
           classie.remove( self.el, statusClass );
           statusEl.draw(0);
           self._enable();
       }, self.options.statusTime );   

to include an if statement and updated statusTime

  if(status < 0){ // This indicates success so we do not want to remove status Class
      self.options.statusTime = 5000; // Here set your statusTime based on 'status'
      setTimeout( function() {
      classie.remove( self.el, statusClass );
      statusEl.draw(0);
      self._enable();
      }, self.options.statusTime );   
  }

To be able to have a different statusTime for each Button, what you could potentially do is set the statusTime (like I mentioned in the fiddle) based on a buttonId or a class etc. you could have another if statement that does this.

| improve this answer | |

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