I often read about people that need the hypeDocument context while adding code into an DIV. In Hype this context actually doesn’t know about the hypeDocument so this little helper solves that problem. The traditional approach found in the Tumult Hype docs requires hardcoding the document id. This approach makes retrieving the hypeDocument independent.


This snippet allows you to get the context anytime. Just add it to your Head-HTML. If you can’t put this in your Head-HTML or need it contained in Hype put it in an init function (without the script tags) that runs on scene load. And third option would be an enabler … meaning stick into a persistent symbol.

* getHypeDocument 1.1
* @param {HTMLDivElement} optional start node
* @return {hypeDocument} or null
function getHypeDocument(e){
	var ds = document.scripts, hd=HYPE.documents
	var e = e || ds[ds.length-1];
	if (e = e.closest('[id$="_hype_container"]'))
	for (var key in hd)
	if (hd[key].documentId() == return hd[key];
	return null;


And then you can execute any of the following in your DIV that live inside of your Hype-file (just examples)…

Example in a script block


// get the hypeDocument
var hypeDocument = getHypeDocument();

// let's check it and now we can use it


Examples on a link
(On links it currently needs this as a parameter)

Echo hypeDocument to console:

<a onclick="console.log(getHypeDocument(this))">log hypeDocument</a>

A more useful case: Start a timeline

<a onclick="getHypeDocument(this).startTimelineNamed('test')">start test</a>


1.0 Initial release under MIT-license
1.1 Removed recursion and simplified code


↑ look at project
1.1 Removed recursion and simplified code

1 Like

8 posts were split to a new topic: Change inner svg properties help

Here is a new example file to see it applied. It contains examples to use it on links or with inline script tags in rectangles: (71,5 KB)

Hype Action Events, has more meat to its code base, but will solve most case where this would be needed as well.