Percentage count up 1-100% code

Using JavaScript with Hype
7

I have changed the symbols code to use jQuery .

This takes out some of the manual hard coding to get child elements with the same class names in the symbols.

 //----  Set up per display
	var timeToCount, maxPercent;
	
	if (element.id ==  'percent100' ) {

 timeToCount = 10; //---seconds
	 maxPercent = 100; //---max Percent
	}
	
	if (element.id ==  'percent75' ) {

	 timeToCount = 5; //---seconds
	 maxPercent = 75; //---max Percent
	}


	
var thisWidth = 0;  //-- width inrement
var countDownTimerWidth =  $('#'+ element.id +' .countDownTimer1').width(); //-- get width of bar.
	   
	
	
 var thisFire =   setInterval(function(){
	 
	 thisWidth += (countDownTimerWidth /100) ; //-- workout increment size 
	
	 var thisPercent = Math.floor((thisWidth/ countDownTimerWidth * 100 )); //-- calculate  current percentage of bar
	
	 if (thisPercent >=  maxPercent) { //-- stop at pecentage
	   clearInterval( thisFire);
	  
	  }

$('#'+ element.id +' .countDownTimer1').html("%" + thisPercent)  ; //-- set progress text

$('#'+ element.id +' .percentBar').width(thisWidth); //-- set progress bar width	  
	   
 }, timeToCount * 10) ;

Duration PercentCounterJQShortCode.hypetemplate.zip (51.7 KB)

Above updated with shorter code. You now only have to setup an if clause for each percent display.

var timeToCount, maxPercent;
    	
    	if (element.id ==  'percent100' ) {
    
     timeToCount = 10; //---seconds
    	 maxPercent = 100; //---max Percent
    	}
    	
    	if (element.id ==  'percent75' ) {
    
    	 timeToCount = 5; //---seconds
    	 maxPercent = 75; //---max Percent
    	}