Trigger Hype functions when in Rectangle with Javascript call

Using JavaScript with Hype
2

The issue is that the hypeDocument variable isn’t a global and thus not defined as part of that Inner HTML.

There are two basic options to fix it:

  1. Use the HYPE.documents["documentName"] syntax for the hypeDocument. documentName would be the export name of the document (you can see it at the top the *_hype_generated_script.js file). Though for previews is always "index"which can make things a little complicated if your document is not later named index and you still want to preview.
  2. If you are only going to have one hype animation/document on your .html page, you can capture the hypeDocument and set that as a global variable. You would just add this code to your Head HTML:
<script>

function myCallback(hypeDocument, element, event) {
    window.hypeDocument = hypeDocument;
}

if("HYPE_eventListeners" in window === false) {
    window.HYPE_eventListeners = Array();
}
window.HYPE_eventListeners.push({"type":"HypeDocumentLoad", "callback":myCallback});

</script>
3 Likes