Calling scene with JS interacts with other Hype Documents

1

I’m calling a scene with JS using this method -
Head HTML:

<script>
function myCallback(hypeDocument, element, event) {
window.loginDoc = hypeDocument;
}

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

JS call:

    window.loginDoc.showSceneNamed('Login');

New scene is called ‘Login’

This works when it’s the only hype document, but if there is more than one on the same page, it messes up.
When it’s next to different documents, it doesn’t call the new scene. If you have the same document twice on a page, the second document’s new scene is called, regardless of which one you used.

Login.hype.zip (38.9 KB)

2

if more than one hypedocument use HYPE_eventListeners with the same callback i'll guess you'll have to distinguish between them.

so your window.loginDoc should be an array or object which is filled with a clear identifier ... for example say the id of the hypedocument and the hypeDocument.

sthg. like:

window.docs = {
"id" : hypeDocument;
"nextId" : hypeDocument
}

so the call would be
window.docs["id"].showSceneNamed("targetScene")

hope this'll work

3

This didn’t work for me at all, I think i’m confusing the second hypeDocument?

Just so you know, this is the only document that calls a scene, all of the other documents only have one scene with a timeline. Just the presence of other documents messes it up.

4

what have you done so far¿

5

One thing to note is that if you know the name of your exported document, you don’t necessarily need to use the HypeDocumentLoad callback to capture the variable. You can instead use this syntax:

HYPE.documents["documentName"].showSceneNamed('Login');
2 Likes
6

I fiddled around and managed to make some progress. By deleting the content and running window.loginDoc = hypeDocument; on a sceneload, I managed to get it to work with other documents. This has solved my original problem, so thank you very much. I also learnt a lot about the API just by playing around like this.

I have found however run into something strange, which I am sure will cause me problems soon.
Using this method, I cannot use buttons to call the scenes, but I can call them in the console perfectly?

Try this page: LINK
Enter email in first form and click send: second form scene change.

Refresh page, console:
window.loginDoc.showSceneNamed(‘Login’); = First form scene change
window.loginDoc2.showSceneNamed(‘Loginn’); = Second form scene change.

The buttons on each form have the correct JS, just as the lines above.
The second form is loginDoc2 and I even changed the new scene to Loginn.

Where am I being stupid?

EDIT: SOLVED!
Not deleting above incase it helps anyone else.
The JS Function ID’s the forms where calling were the same, so the first form would end up calling the second one’s which would launch it’s next scene.

Thanks for the help!

1 Like
7

Be aware that the buttons will still be clickable if you just fade and blur them.

8

Yeah it was just a test to make sure the scene loads, that’s not the actual plan :slight_smile:

1 Like