Percentage count up 1-100% code

Using JavaScript with Hype
1

How can I make a number count up from 1-100% in a specified amount of time?

2

This thread may help you.

3

thanks for that, it seems to count in seconds, I’m looking to count up from 0 - 100% in a specified time like in the attached OAMcountup.oam.zip (65.9 KB)

I have made a number into a symbol and added two timeline triggers with javascript functions:

the first one:

if (i<103){
i++;
sym.('Text').html(i+'%'); }else{ i=103; sym.(‘Text’).html(i+’%’);
}

the second one:

sym.play(0);

do you know how I would define ’ i ’ as the number in the symbol ?

time to learn javascript…

4

What do you mean. It displays percent in a specified time. I cannot open your file to see what you mean.

Can you please explain a bit more what you actually want to including what specified time you want and what you are displaying.

5

the number sits inside a symbol with a graphic to demonstrate quantity, as the graphic animation plays, the number counts count up to a certain value in a specified amount of time.

For instance: lets say I want the number to count from 0 - 78 in 2 seconds.

the aim is to get the numbers in the infographic I’m making to animate the same as the numbers in this video:

6978528.mp4 (393.4 KB)

6

Here is a stripped down version of the percent time with some new Javascript that controls the percentage display.

The whole display is now only controlled by the Javascript, which works out the width of the percent bar elements and calculates the animation dependent on the amount of time in seconds you set.

Hopefully my math all works out. In my test I can adjust the width of the “countDownTimer1” element and the javascript calculates correctly.

Duration PercentCounter.hypetemplate.zip (14.4 KB)

Symbols are a little bit harder. Here is my first take on using multiples of the same symbol.

I have had to use class names in this as ids will clash.

This one has two instances of the percent bar which each symbol has been give a symbol id.

The javascript uses the to run individual percent and time settings. I also have to get the correct class for each element. At the moment that done manually by using the index of the classes.

Duration PercentCounterSymbols.hypetemplate.zip (16.0 KB)

1 Like
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
    	}
8

thanks for this resource, it will definitely come in handy. What would the code/hype document look like if we ignored the loading bar and just had a number on its own count up from 0 -100 within 5 seconds?

9

I have updated the code for the percent displays so that it is shorter and easier to to adjust. ( see above edit )

As to you questions it should be easy enough for you to remove the elements and code that you do not need. :smiley:

10

Any and all further updates to this project will be done at: