Referencing Element Id or Class Name


(Jeff) #1

Is there a way to reference a Class Name of an element instead of the Unique Element ID? I seem to be unsuccesful at trying to do it, and I’m not fluent in Javascript.

Example, referencing the ID…

function headerPushBack(hypeDocument, element, event) {
  hypeDocument.getElementById('main-headline').parentNode.style.zIndex = 1;
  hypeDocument.getElementById('main-subhead').parentNode.style.zIndex = 1;
  hypeDocument.getElementById('text-area-bg-org').parentNode.style.zIndex = 2;
}

I’ve tried this, but without success…

function headerPushBack(hypeDocument, element, event) {
  hypeDocument.getElementsByClassName('main-headline')[0].parentNode.style.zIndex = 1;
  hypeDocument.getElementsByClassName('main-subhead')[0].parentNode.style.zIndex = 1;
  hypeDocument.getElementsByClassName('text-area-bg-org')[0].parentNode.style.zIndex = 2;
}

Responsive layout, duplicate ID's?
(Hans-Gerd Claßen) #2

just:
document.getElementsByClassName('main-headline')[0]
or
document.querySelector('.main-headline')


(Jeff) #3

Thanks for the suggestion! I tried it, and still didn’t work. Hmmmm… I’ll have to keep looking around for a solution.

But thanks again!


(Jonathan Deutsch) #4

The document.getElementsByClassName('main-headline')[0] is generally the right way to do it (recognizing that getElementsByClassName returns an array, and this assumes there’s a single element). If this isn’t working for you then it could be that the class name setup is incorrect or there’s a typo. I’d look at the developer console to see what error might be thrown.


(Jeff) #5

Well, shoot. It must be something else I’m going wrong.

I can get it to work referencing the Unique Element ID, but the moment I copy and past it into the Class Name field and change the code, it doesn’t work.

function headerPushBack(hypeDocument, element, event) {
//hypeDocument.getElementById('main-headline').parentNode.style.zIndex = 1;
//hypeDocument.getElementById('main-subhead').parentNode.style.zIndex = 1;
//hypeDocument.getElementById('text-area-bg-org').parentNode.style.zIndex = 2;

document.getElementsByClassName('main-headline')[0].parentNode.style.zIndex = 1;
document.getElementsByClassName('main-subhead')[0].parentNode.style.zIndex = 1;
document.getElementsByClassName('text-area-bg-org')[0].parentNode.style.zIndex = 2;
}

Funny thing too… I’m not getting an error from the console for the class name code.

I can’t post the Hype document, but here are the 2 exported HTML5 versions. (The element affected is the headlines in the dark grey box, supposed to be pushed back and the dark grey box brought forward.)
Class Version
ID Version


(Jonathan Deutsch) #6

You have multiple layouts, so there are multiple elements with the same class name. By using the [0] index, you are only changing the first one, and not all. The first one is probably not on the layout you happen to be looking at. The best way would be to get the element for the scene, and then call getElementsByClassName() on that. There isn’t a built-in way to currently get this, but the Hype Extensions project provides a method to get it. In fact, the example usage is for getting sub elements via class name :slight_smile:.

You could either use that code or just copy/paste the current method. It would look like:


var sceneElement = document.querySelector('#'+hypeDocument.documentId()+' > .HYPE_scene[style*="block"]');

sceneElement.getElementsByClassName('main-headline')[0].parentNode.style.zIndex = 1;
sceneElement.getElementsByClassName('main-subhead')[0].parentNode.style.zIndex = 1;
sceneElement.getElementsByClassName('text-area-bg-org')[0].parentNode.style.zIndex = 2;