Starting a Timeline from text link

(Steve) #1

I am trying to start a time line from a paragraph of text. I do not want to add a button as the text can move around from browser to browser. I have a simple timeline called FlipRedBox. And a paragraph of text with a active link going to “#” but the onClick set… Driving me crazy trying to find a solution. Thanks (15.1 KB)

(Mark Hunte) #2

My Original answer was over complicating by saying to put the head callback in the head tag.
I suggested that due to the an error being returned for hypeDocument in the hypeDocument .kDirectionForward not being understood.

@DBear reminded me you just need to add the same representation for the hype document as you do for the beginning of the code. “HYPE.documents[’…”

Here is the update file. Sorry about that , not thinking straight… :blush:

_flipMe.hype (27.1 KB)
The other think to remember when testing in Preview you need to set the name of the document to index in the code.

(Steve) #3

excellent… i knew I was doing something wrong… thanks, I will undertake more studying on this :slight_smile:

Thanks for your time!


rather than add a callback to your head just do it as you were doing it but give it the name of “index”


This is if you only have 1 hype document and for preview. IMPORTANT When you upload it change the name to your document name “_flipMe” instead of “index”.

NOTE** this is for internal calls only for external calls you would use the document name like you have.

for more info


(Mark Hunte) #5

You will need the callback for the kDirectionForward


Just put in



<a onclick="HYPE.document['index'].startTimelineNamed('// timeline', HYPE.documents['index'].kDirectionForward);

But the callback way still works but this means less typing :wink: :slight_smile:


(Mark Hunte) #7

Doh… ( long day… )


:slight_smile: indeed!

(Steve) #9

awesome forum guys… thanks so much for the overwhelming help…


DBear and All. This thread has been a great help and I have successfully used your provided syntax:

<a href="#" onclick="HYPE.documents['index'].startTimelineNamed('calendar', HYPE.documents['index'].kDirectionForward)"> calendar</a>

What would be the syntax if I wish to affect two timelines with the same URL click? Let’s say, the other timeline is ‘work’ and I’d like to integrate this syntax:

hypeDocument.goToTimeInTimelineNamed(0, 'work')

Tried many combinations, none worked.

Much appreciated.

(Jonathan Deutsch) #11

It would look like:

<a href="#" onclick="HYPE.documents['index'].startTimelineNamed('calendar', HYPE.documents['index'].kDirectionForward); HYPE.documents['index'].goToTimeInTimelineNamed(0, 'work')"> calendar</a>

Basically just access the Hype document the same way, and then put a semicolon between statements.


Thanks Jonathan! Works perfectly. I use it for one text element to be replaced by another and then going to 0% opacity, back at the beginning of its timeline.


Jonathan, success was only partial. It does work perfectly in Safari and Firefox, but neither Chrome nor Opera react to the clicks. I quit/restarted, reset cashes/history, no go.

Any thoughts?


Found it. It was syntax error in my text that Safari and FF let slide. Now all work.