Div IDs not exporting

Exporting & Previewing
1

I'm trying to create a simple scene with a video in the background and a text element in the foreground. I've named the text element simply "Text_ID" in the Unique Element ID field, however when I export the project as HTML it just exports a basic <div> tag without IDs. I'm trying to use JS to modify the internals of the tag, at runtime, but obviously I can't if the ID doesn't show up. Am I missing an export option that isn't obvious?

2

all elements are created by the runtime when the html and js is loaded.
to hook in and change a hypeelements property from outside you'll need to listen for hypeevents regarding this instance.

In first place those are documentload and sceneload.

You'll find examples in the forum, in the documentation and in @MaxZiebs HypeWiki

3

I've tried accessing the elements from those events, but unfortunately I haven't had any luck. I know the code should work (with regular document.getElementByID(...) calls) when I manually enter the IDs into the

tags that are created however. 100%, the elements are there in the generated HTML before being loaded into a browser, they just don't have an ID or class despite being specified in Hype. To be clear, I am using hypeDocument.getElementByID(...)

Screen Shot 2021-01-27 at 10.41.57

Screen Shot 2021-01-27 at 10.45.53

For privacy reasons I can't send the .hype file and relevant media, however I hope the above screen shots are helpful enough.

4

you can upload a samplefile showing your issue ...

if the HypeScenePrepareForDisplay or HypeSceneLoad has been fired you should be able to reach every element ...

the last screenshot just shows the elements relating to searchengines. that's no designelement ... just forget about them ...

5

You may not reach all elements with this..

6

what'll be out of reach Mark?

7

Screenshot 2021-01-27 at 16.43.37
Screenshot 2021-01-27 at 16.43.372402×1464 652 KB

8

am sure I have tried to use that before and found not all elements where ready at runtime.

I think I just had a brain fart there and was mixing it up with it not working with animation.
Doh.

9

in fact i also sometimes run into situations where a setTimeout ->1 is needed

10

Which I guess would make sense if it's not me but the browser having the brain fart..

1 Like
11

From the screenshot you sent, you are looking for the ID in the generated .html file. If you look a bit more closely, you'll see there's a comment in that section:

<!-- text content for search engines: -->

Due to the dynamic nature of hype documents, it generates its HTML DOM live on the fly via JavaScript. The code where you are looking is a hidden dump of strings from the document so they are searchable. IDs would not be used in this spot, because it would interfere with the actual elements that have those IDs, and there's really no point in adding IDs/Classes when this is just meant to be a text dump anyhow.

Instead, if you look at a live export/preview in the browser, you will be able to find the entire DOM structure via the elements tab of the web inspector. You will find the elements here have appropriately been assigned with your IDs/Classes.

Thus, you can still access elements via .getElementById() and .getElementsByClassName() calls. You do need to make sure the Hype document is loaded first.

12

i can confirm that getting the head around if not experienced with Hype may be tricky.
so this can be a rough template for you. place it in the head and your good to go ...

to note:

  • a documentname in preview from hype is always 'index'

  • of course an id instead of name can be chosen

  • script could be endless extended

      	function HypeScenePrepareForDisplay(hypeDocument, element, event) {
  //check if the target is your expected hypedocument
  const yourHypeDocumentName = 'index';
  const idOfYourTargetElement = 'xyz';
  const innerHtmlToApply = `here the
  html you'd like
  to apply`;

  if(hypeDocument.documentName() != yourHypeDocumentName) return;

  //proceed as the document is the right one
  const sceneElement = element;
  const targetElement = sceneElement.querySelector(`#${idOfYourTargetElement}`);
  if(targetElement)targetElement.innerHTML = innerHtmlToApply;

  }

  if("HYPE_eventListeners" in window === false) { window.HYPE_eventListeners = Array(); }
  window.HYPE_eventListeners.push({"type":"HypeScenePrepareForDisplay", "callback":HypeScenePrepareForDisplay});

Archiv.zip (105.0 KB)

1 Like