Can we get the properties of an element of a different scene from the current scene?

Hi all,
I’m doing a few experiments within Hype and amazed at the possibility that it has.

I was wondering if one could get the style properties of an element of a different scene in the context of writing a JS function in the current scene?

To elaborate,
I have an object defined with a class called, ‘box’ in the current scene (let’s call it Scene-1)… I’ve duplicated the scene, but have changed the style properties of this ‘box’ class in this (Scene-2). Now, in Scene-1… I want to run a JS function on click on this ‘box’. In this context, I’ve defined a function but would also want to get the properties of the ‘box’ class that were in Scene-2.

For now, when I get the elements by class name (document.getElementsByClassName), Hype lists the objects from both Scene-1 & Scene-2 – However, the style properties of the ‘box’ object from scene-2 isn’t updated! Was wondering if there is some way to get these properties of the ‘box’, through code?

Hope I communicated clearly…
Any help is appreciated. Thank you.

Hi Vinay

Not 100% sure what you’re asking. What properties are you looking to get?

You have a box in both scenes with a class of box, right? And you want to run a javascript function on the first box in “scene 1” but to do what?

Remember that when you use document.getElementsByClassName() it will return an array so if you want to target individual elements you have to write it’s index.

var box = document.getElementsByClassName("box");
// change the background-color of the first element that has a class name of box
box[0].style.backgroundColor = "yellow";
// change the second box's background to red
box[1].style.backgroundColor = "red";

So the long story short, you can set and get values from elements but how you want to display or use will be easy or difficult.

Hope this helps!

D

1 Like

Hi DBear,
Thanks for your reply.

I want to get the style object of the ‘box’ element. Not just one property.
What I encounter when I do a getElementsbyClassName and call the .style function is this…

  • For the box element in the current scene, the style object has been populated with whatever changes I have made in the Scene Editor of Hype.

    <div class="HYPE_element box" id="hype-obj-rt0bs9LqHM0ulekt" style="pointer-events: auto; position: absolute; border: 1px solid rgb(216, 221, 228); font-size: 17px; cursor: pointer; overflow: visible; - webkit-tap-highlight-color: rgba(0, 0, 0, 0); z-index: 1; width: 100px; height: 100px; top: 149px; left: 249px; background-color: rgb(66, 128, 237);">

  • However, for the box element in the next scene (obtained by the second element of the array from getElementsByClassName), the style object has NOT been populated yet… possibly, because I’m accessing the document from the current scene

This is what I see in devTools:

`<div class="HYPE_element box" id="hype-obj-eVQ9SF7gTSNisNJ8" style="pointer-events: auto;"></div>`

My question is… is there a way to get the style object populated with the changes made in the design editor, for the box element in second document?

Hope it is clear :smile:

set the stylechanges onsceneload

Hi Vinay,

Using my code above will populate the objects but make sure you run the code on scene load for every scene

D

This should help! elementsByClassName.zip (37.9 KB)

@DBear
Thank you very much for the response.
I’ve looked at the file that you’ve shared. I believe my problem is slightly different. (I’m assuming and hoping that I’ve understood the ‘onsceneload’ event, correctly)

I do not want to set the values of the box element using code. I’m making the changes to the elements using Hype’s design editor in the respective scenes. I just want to get the value of the box elements that are present in different scenes, from the current scene.

W.r.t the file that you’ve shared - in scene-2, I want to set the color of the box to yellow using the editor, itself. I would like to know from scene-1, that the color of the box in scene-2 is ‘yellow’. Was wondering if that is possible?

The reason that I want to just get the values is I want to animate the two objects of the same class that are present in different scenes, when a scene change happens.

As I mentioned above, I hope I’ve understood your solution correctly.
Please let me know if the solution that you’ve shared solves the above problem too.

Thank you again for your time.

Had a look at symbols and custom behaviours though¿

setting a class within hype only makes sense if you use custom css or access via Js …

@h_classen I see! I’m trying to find a way to animate an object with the same class, but with different style properties across the scenes. Hence, the setting of the class name and trying to get the properties of this object across the various scenes. Will try if there is any other way to achieve this.

Thank you

Hi Vinay,

The code in my example can be used to get the values also.

box = document.getElementsByClassName("box");
// log the value of the box background color you have set in hype inspector
console.log(box[0].style.backgroundColor);

This will return the rgb values of the background color however it will only return the color for that scene not the color for the any other scene even though they are set so in answer to your original question I’m not sure it will work for your situation. Maybe there is another solution. :smile:

D

It seems that you can only get the attributes of an element in another scene only if the other scene has been loaded.

Here’s a demo…

attr.hype.zip (18.6 KB)

when it loads to scene ‘one’, you can’t get all the attributes. If you load scene ‘two’ first, then go back to scene ‘one’ all the attributes will show in the console. Or, if you use the "previous scene’ button in scene ‘two’ then all of the attributes will show.

1 Like

You are right… this is what is happening with Hype.

I’ve meddled with some JavaScript code to make the scene change, but hiding the scene change in order to make HYPE populate the elements from a different scene… I’m not too proficient with JS and I was getting an error in the lines of… “error on call stack… too many calls” and my HYPE Document wasn’t running. (Hence the delayed response because of all this meddling with JS)

Today, I’ve managed to achieve this, after a bit of educating myself with some jQuery and JS…

hypeDocument.showNextScene();
nextScene = $(".HYPE_scene").filter(":visible");
nextScene.toggle();
hypeDocument.showPreviousScene();

This works now!

1 Like

YAY, Vinay. I was thinking along the same path of loading the needed scene but hiding it somehow or exiting out of it before it was noticed. I'll try your method later today, I'm off to work now.