Menu built in Hype linking to different scenes

[adhsu]

Hey guys, new to Hype and not experienced with JavaScript. I’m trying to create a menu built in Hype that is pinned to the top of the page. The main body of the page is also built in Hype so when you click on an item in the menu, I want the page to refresh with a new scene. I don’t know if this is the right approach, but the simplest way for me to set it up was to have both Hype docs in separate divs in the HTML with the menu div locked to the top using CSS, so the body content div can scroll freely under it.

The question is how to load a different scene in the main body Hype document from a click event in the menu Hype document. Thanks in advance for any guidance!

[gasspence]

Daniel has a great tutorial on linking to scenes that will help…

Linking to a specific scene from inside and outside of a Tumult Hype document

Tumult Hype documents are accessible from a single URL. If you name your document 'Flying' and upload it to your site, then your animation and all its scenes are accessible from http://site.com/flying.html (unless you change the name of your exported .html file). This article describes three ways to navigate between scenes: Load a scene directly from a URL (For example: http://site.com/hypedocument.html#contact) Use a button outside of your Tumult Hype document to load a scene in that do…

Scroll down to…

“Linking to a Scene From outside of your Tumult Hype Project”

[adhsu]

Thanks for the reply! Sorry I didn’t mention that I already studied that post and didn’t know how to apply the instruction there. Daniel includes code to put in the anchor tag of the HTML but I’m trying to link from another Hype document. Is there some place to put this code within the Hype file I’m linking from? I couldn’t figure that out.

<a href = "#" onclick = "HYPE.documents['MyDocumentName'].showSceneNamed('MyScene')">Jump To My Scene</a>

[Daniel]

If it is a Hype document on the same web page, then the code you posted should work. It will need to be at the same level as that document (not in an iframe or HTML widget).

If you are linking from a different URL altogether, you’ll need to use: http://site.com/document.html#scenename (using the ‘sceneURLs’ document as an example).

[adhsu]

Yes, it is a second Hype document on the same web page, but I guess I just don’t know where to use that anchor tag. I had copied and pasted the div containing the menu into the body of the other HTML file. I tried to figure out some place within the menu Hype document to add the tag. On the element that I want to be clickable, I tried using the tag within the inner HTML, but it just adds text (ie.“click here”) and makes the text linkable, but not the button element.

[Daniel]

I tried to figure out some place within the menu Hype document to add the tag. On the element that I want to be clickable, I tried using the tag within the inner HTML, but it just adds text (ie.“click here”) and makes the text linkable, but not the button element.

To make a button run this function, you’ll need to run this function on mouse click for the button. So select the button, run a mouse click action, then select ‘New Function’ and paste this:

HYPE.documents['MyDocumentName'].showSceneNamed('MyScene');

The ‘onclick’ text in the Anchor link just means that function following it should be run onclick. Using Hype’s built in click function does the same thing and lets you assign this to elements.

Hope that helps!

[adhsu]

Got it!! Thank you!!

[rstlaurent]

Hi adhsu,

Like this

https://dl.dropboxusercontent.com/spa/dgrdt9tlkfdu9hh/Exports/App-Nomad-Test/App-Nomad-Test.html