Javascript Counter


(Courtney Hobbs) #1

Hi there!

I am trying to trigger this customer JS http://jsfiddle.net/YWn9t/3876/ in hype through attaching it to a button but nothing seems to make it work? Does any one know what i’m missing?

Thanks


(Mark Hunte) #2

Hi, There is nothing special about this.

just put all the JS in a Hype function. Set the Hype Function to start at sceneload or any other method you choose.

Add a Rect or Text box to the scene. Set it’s class as timer

Then lastly add jquery to the resouces or put this in the Head file.

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>


(Courtney Hobbs) #3

Hey mark

Ah thanks for this! I was missing adding the timer to the class.

Brilliant! Thanks so much :slight_smile:


(Courtney Hobbs) #4

Does anyone know how to stop and start this counter based on keyframes in the timeline?
Thanks


(Hans-Gerd Claßen) #5

startStopCounterOnTimeline.hype.zip (9.2 KB)


(Mark Hunte) #6

A slight addition to the code.

We add a global var that will hold “pause” or “continue”

In the code we check what the global var is. If continue we carry on updating.
If pause we pause and the counter number is not updated but in the back ground the interval timer is still firing.

Set up for changing the global var simply uses Custom Behaviours. We use the names of the Custom Behaviours.

One name “pause” and one name “continue”

the Timeline actions trigger either. Both are linked to a Hype JS function that changes the global var value depending on which CB triggered.

Because the timer interval is always running the global var can be checked. depending on the status we will continue the update or pause the update.

This all may sound complicated but is ver simple. Look through this example.

Note the first Timeline action simple starts the counter function directly.

counterStartPause.hype.zip (14.1 KB)


(Courtney Hobbs) #7

Hey guys thanks this is perfect!


(Courtney Hobbs) #8

Hey guys!
I wondered if you could help me out again?
I’m all in and sorted now thanks to your last input however I can’t seem to figure out how to get the numbers to have comma’s in. For example the count is counting from 589119 to 1400000 but I could do with having the comma in there like, 140,000,000 ?

Thanks


(Mark Hunte) #9

replace

$(_this).html(value.toFixed(options.decimals));

with

$(_this).html(Number(value.toFixed(options.decimals)).toLocaleString() );


(Courtney Hobbs) #10

Ah fantastic! You guys are awesome thanks so much!