Trigger Modal when on a specific scene

(Scott Dunham) #1

Hi there!

I’ve been hacking my way through a current Hype project and getting it to interact with JS a bit.
I was wondering how can I get it so if it’s on a specific scene that it triggers a Bootstrap modal?

I currently have this set:

if(hypeDocument.currentSceneName('Mainstage2') === true) { jQuery(document).ready(function($) { setTimeout(function() { $('#frontModal').modal('show'); }, 6000); }); }

Is that even possible? Been trying to piece it together from other searches but not sure if the syntax is correct or if I am missing something. Any help is greatly appreciated, thanks!

(Jonathan Deutsch) #2

This isn’t quite correct, though wouldn’t be a syntax error. The question is where/when you want to fire this?

There’s a few things to note from a javascript perspective:

  • hypeDocument variable isn’t a global; this is generally defined in functions for Hype callbacks. If you don’t have this variable, such as in code in a <script> tag mixed with jquery, you can get to it via HYPE.documents["documentName"] where documentName needs to be defined as the name of the document you exported.
  • you are calling the jquery document ready method, which is an event hook for when the document is setup. I’m guessing that you will want to show the modal much later than this event. Also, hypeDocument won’t exist until after a jquery ready event anyhow, so the first if condition would be false and you’ll never setup the handler.

(Scott Dunham) #3

I see.

Well, I have this in a separate JS file that I am including into my HTML document where I have my exported Hype project embedded. I’m just not sure how to get external JS to talk to Hype and vice versa.

(Jonathan Deutsch) #4

If it is an external document, you’d want to use the HYPE.documents["documentName"] variable to get at the hypeDocument object, and then you can make the API calls from that.