ElementID when using multiple layouts

1

When attempting to format text label (for dynamic text content) for different layouts (i.e. Desktop, Mobile, Tablet), I’ve seen that elements ID has to be unique even for Layout elements. Therefore I’ve ended up doing this:

var q = hypeDocument.getElementById('questionText'); 
q.innerHTML = myData[index].question;
var q_iphone = hypeDocument.getElementById('questionText_iphone'); 
q_iphone.innerHTML = myData[index].question;
var q_ipad = hypeDocument.getElementById('questionText_ipad'); 
q_ipad.innerHTML = myData[index].question;

and something like this:

ansA.scrollTop=0;
ansB.scrollTop=0;
ansC.scrollTop=0;
ansD.scrollTop=0;

ansA_iphone.scrollTop=0;
ansB_iphone.scrollTop=0;
ansC_iphone.scrollTop=0;
ansD_iphone.scrollTop=0;

ansA_ipad.scrollTop=0;
ansB_ipad.scrollTop=0;
ansC_ipad.scrollTop=0;
ansD_ipad.scrollTop=0;

when indeed ansA, ansA_iphone and ansA_ipad are literally the same text label (as the other ones replicated with _iphone or _ipad) to be updated and because of the uniqueness of each text_label in each layout seems to be no other option.

By having many elements & layouts this will grow exponential. Therefore: is there any other way to refer to same element ID or synonymous across different layouts to avoid this code repetition?

Regards,
Flavio

2

You can set the Class Name property (below the Unique Element Id) to the same class on multiple elements and then iterate through all elements with that class name.

3

Thanks again Stephen.

Is this function “getElementsByClassName” documented somewhere? And is there any function like: getClassNameByElementID ?

Regards,
Flavio

4

It is actually a standard javascript function: https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName.

If you know the Element ID you can do

document.getElementById(id).className;
5

I’m currently lurking trying to find an answer to a question I think is being discussed here.

Will getElementsByClassName work for JS applied to onSceneLoad?

Heres the deal. I have 20 movies. I have 20 buttons. When I click one of the buttons, it needs to play the corresponding video. When it plays the video I have it go to a scene where the video is loaded and I subsequently have my onSceneLoad

At the moment I have 20 JS functions because I have to specify the ID for video in the scene. Is there a way to target the parent, instead of the child video, by ID?

	// Make a convenient Variable for the video 
var mediaElement = document.getElementById("mpVid01");  

// Optional: Pause the video (if it is playing)
//  mediaElement.pause(); 

// rewind the video. 
mediaElement.currentTime = 0;

See document.getElementById("mpVid01"); - How would I make an array, or target a more generic descriptor for the video object in the scene? The scene is home to one element, the video. Nothing more.

6

loading jquery and working with a class for your videos you could run

$(".HYPE_scene[aria-hidden='false']" ).find('.myVideoClass')

to access the current video within the scene onSceneLoad

7

Can you provide an example (for someone who doesn’t speak JS)?