Jump to a scene based on the ID of the button


(kerguelen) #1

Thanks Jonathan ! It works perfectly well now !

There is something else I’d like to achieve but my JS is really bad for that.
My document has 3 scene. The first is the container and scene2 and scene3 can be displayed at will in the container scene using buttons. Those button’s ID’s are the name of the scene. How can I make the gotoScene JS pick the buttons ID and call the scene named after this ID ? The goal is to make a global function instead of having a function for every button
LoadSceneIntoIframe.hype.zip (40.7 KB)


Load scene into frame
(Jonathan Deutsch) #2

As long as the triggering element is the one with the ID and the scene is in the same document, you would just use:

function dynamicGoToScene(hypeDocument, element, event) {
    hypeDocument.hypeDocument.showSceneNamed(element.id);
}

However note that IDs need to be unique in a document, so you couldn’t correctly have two buttons targeting the same scene. Instead you may want to use the class name field:

function dynamicGoToScene(hypeDocument, element, event) {
    hypeDocument.hypeDocument.showSceneNamed(element.className);
}

(kerguelen) #3

Thanks Jonathan,
I get the point but could not get the desired scene to display into the iframe of the main scene.
The code I used for the button which the classname is “scene2” is this one :

function goToScene(hypeDocument, element, event) {
if ( window.self !== window.top ){
hypeDocument.showSceneNamed(element.className, hypeDocument.kSceneTransitionInstant, 1.1)
}
}

And the current scene displays itself in the iframe


(Jonathan Deutsch) #4

Oh sorry; I thought this was an entirely separate question. If you want a parent to control a child iframe you are going to need a communication mechanism using postMessage. There’s a few examples if you search for this term on the forums. One example here (it is child to parent, but uses the same technique):

The other alternative might be to use this technique with the iframe src (but I haven’t tried it in such a way):


(kerguelen) #5

Well, I’m not sure we talk the same thing :wink:
In the enclosed .hype, I’d like that buttons change the iframe content. On the exemple here, it perfectly works for displaying scene 2 in Intro scene, but I can’t get it to work with scene 3 to.
On the Intro scene, I may have many scenes to load in the iframe, using for each a button with the name of the scene, and I’m looking for a single function that uses each button classname to point to the desire scene bearing that classname name.
Btw, I only need display, no need for me to control the frame content from the scene that contains it
My intuition is there is a simple way o do that :slight_smile:
LoadSceneIntoIframe.hype.zip (40.7 KB)


(Mark Hunte) #6

Hah,

I see that this was my original code to get a iFrame to display a scene.

I do not think @jonathan is wrong in the suggestions… and they may be the best route.

But there is an alternative which is to use localStorage to store the button clicked id.

When the button is clicked the id is stored and the page reloaded.
The scene onload will then get the id from the localStorage and use that in the goto scene function.

iFrameMultiScene.hypetemplate.zip (34.8 KB)

To be honest, I was surprised this idea actually worked :grinning:


Scene in Scene Iframe does not work in Firefox preview
(kerguelen) #7

Hello Mark
Yes ! it is actually working and you did a great job with this in the first place.
Reloading the page is a nice idea !
I made a little change in it following Jonathan recommandations in another post to have it work on
iPad :
This line :
var htmlWidget = hypeDocument.getElementById(“render”).children[0]; //iframe Widget

Should be written as it :
var htmlWidget = hypeDocument.getElementById(“render”).getElementsByTagName(“iframe”)[0] ; //iframe Widget

because of a div specification on mobile (I don’t really get it). See here Load scene into frame

@MarkHunte : One problem remains : instead of using button ID, I would like to use button ClassName. Any idea ?

LoadSceneInFrame.hype.zip (43.8 KB)


(Mark Hunte) #8

Just put the names in the class name fields and change

localStorage.setItem('theScene', element.id);

to

localStorage.setItem('theScene', element.classList[1]);

The classList returns an array of class names for the element.
Hype give sall elements a hype class name. So when we add our own the element will have two or more depending how many we add.

the count of javascript arrays start from 0 not 1.
We want the second name because that is the one we added. The second item in the array is 1.

Hence we use the short hand to get that from the array.

element.classList[1]


(kerguelen) #9

Thanks @MarkHunte,
I tried to implement it in the document from my previous post but it’s still not working (or most probably, I did it wrong)


(Mark Hunte) #10

Lke this.

 localStorage.setItem('theScene',  element.classList[1]);
 
  if ( window.self !== window.top ){
  hypeDocument.showSceneNamed( 'intro', hypeDocument.kSceneTransitionInstant, 1.1)
 
 }
 
	//var  htmlWidget = hypeDocument.getElementById("render").children[0]; //iframe Widget
	 var  htmlWidget = hypeDocument.getElementById("render").getElementsByTagName("iframe")[0] ; //iframe Widget

	var hypeDoc = hypeDocument.documentId().split("_hype_container"); //document name	
	
	 htmlWidget.setAttribute("src", hypeDoc[0] + ".html");


LoadSceneInFrame.hype 2.zip (50.5 KB)


(kerguelen) #11

Oh, Mark ! Thanks so much ! It works now perfectly well including on mobile.
I get where I made mistakes entering your code. Everything is fine now.