so this in the <head> of my Hype project should work right?
$(function() {
for (i = 1; i <= 3; i++) {
$('#emailThumbnailText'+i).html(window["emailMessage"+i]);
}
});
It only works if I place it anywhere else but the <head>.
I’m new to Hype so maybe there’s something that’s different I’m not aware of. TIA.
This will not work - the Hype document hasn’t been loaded yet (it happens after $(document).ready).
Hype loads the [hype] document, and then will load scenes. The scene loading process sets inner html of elements, so you probably want to set your html after this.
The easiest way is within Hype, you can add a On Scene Load action to Run JavaScript… and use your code there.
The alternative of adding this to your html <head> would be to use the Hype event system and add a hook for HypeSceneLoad like so:
<script>
function myCallback(hypeDocument, element, event) {
// run code here
}
if("HYPE_eventListeners" in window === false) {
window.HYPE_eventListeners = Array();
}
window.HYPE_eventListeners.push({"type":"HypeSceneLoad", "callback":myCallback});
</script>
This is referenced in the javascript section of the documentation, though instead the example there uses the earlier HypeDocumentLoad event.
intriguing to hear that the Hype document is not the document.
Thanks for On Scene Load. I actually figured that out about the same time your message came in. All working fine now.
Correct, this is because Hype is content on the page like other items, and you might have multiple documents. If you look at the HTML Hype generates you’ll find there’s really only three lines that are included in other documents:
<!-- copy these lines to your document: -->
<div id="mydocument_hype_container" class="HYPE_document" style="margin:auto;position:relative;width:600px;height:400px;overflow:hidden;">
<script type="text/javascript" charset="utf-8" src="mydocument.hyperesources/mydocument_hype_generated_script.js?568"></script>
</div>
<!-- end copy -->
Basically a div and a script that is setup to load the runtime and animations; but the kicker is that script cannot fully run until the div is finished being created since that is where it will be putting content. Hence it needs to happen later, after $(document).ready.
In short, the tradeoff for Hype’s safe/flexible loading system unfortunately causes a bit of complexity when you want to run some code on its DOM immediately.
thanks for that. Maybe this is worth putting under “Hype lifecycle” in the docs. I couldn’t find anything but maybe it’s there under some other search term.
Good point - looks like this should be added. @daniel was working on a similar doc a while ago, though it does not call out these events. Posting here now in case it is useful:
thanks for posting that.
