I uploaded a Hype document with internal links that start timelines. Here is an example of a link:
3 . Acute arterial occlusion blocks blood flow and causes necrosis (gangrene), ranging from minimal to severe.
I have also inserted the script in the head (I believe this is the necessary script):
I exported and uploaded the document as an html5 project through Transmit. I also exported to an .oam format, then imported through the Hype plugin. I then inserted into a webpage through a code block.
Now, when the document is opened as a link to the html5 folder, the internal links work perfectly. But when I open the in-page document, the internal links fail to start the timeline.
Do I need to modify the javascript or something else when using the .oam/plugin/code block method?
.OAM plugins are actually .ZIP-files in disguise and so they are exported/upacked in to a server cache on upload to be accessible. Then DIV embed method only then snaps your Hype widget and not the head section into your page. Meaning any definitions in Head are left stranded in the server cache (and not embedded).
Solution 1:
Add your head code to a init function on your first scene (each layout) on scene load. In that case you would only need the window.myHypedocument = hypedocument portion of it.
Solution 2:
Embed as iFrame as in that case the whole html from the OAM file is used and your head html is render into the iFrame. Has the downside of iFrame if you need to access other parts of your page from within Hype (Sandbox etc.)
Solution 3:
Use something like this …
…and put it into head or a init function as this method has the benefit of determining the local hypeDocument without polluting the window scope. But that kind of consideration is only relevant if you got two or more Hype documents using your current technic. As myHypedocument is already take by the first Hype embed you would need to change the name to myHypeDocument2 etc. The script from solution 3 avoids this but only works from within a Hype document (as it "tree walks" up the DOM to find it's corresponding hypeDocument reference).
Your consideration! Your question leads to a room with at least three doors … step through one of them.
Wow! That’s a very detailed explanation with three options to move forward.
I am quite inexperienced with javascript. IMO, option 1 sounds like a simple option, that would work well. Would you be so kind as to provide me a bit of detail as to how I create an init function for the .oam first scene? I am guessing I would then have two slightly different versions of each Hype document-one with an init function (for the Hype plugin), and one without (which I would upload to the server directly, and then refer to via link, as I am doing now).
Solution 4:
Actually there are already references in the global window scope so you wouldn’t need to create them in theory as they are created by Hype in HYPE.documents[ name ] …but they can only be accessed if you know the “name” of your Hype Document. That actually varies if you preview or export so relying on this without some knowledge is problematic for novices.
And about your question: Either of the solution works also in the standalone variation. So you don’t need to separate files once you have implemented a solution. You should be able to deploy the same source to both export scenarios.
Thank you, Max, very much for the response and the sample.
I apologize-I just don’t know what I am supposed to do with the example. Should I cut and paste the code into the current head? If so, do I include the comments, or am I supposed to do something as per the comments? Do I need to create a separate function? I see the tab at the top of your doc says ‘init’, and I don’t know how to create this separately from the head.
I did type in the following at the top of my head:
<script>
function init(hypeDocument, element, event) {
window.myHypeDocument = hypeDocument;
}
I don’t know if that is what you intended.
As to solution 4, I am willing to learn it if it is a better solution. I am comfortable getting around Hype, just not so much with Javascript.
Finally, thank you for clarifying about creating separate documents.
No. Solution 1 is not using the head anymore because OAM files don’t export the head. So the init function is a Hype function you can create on in your scene panel …
click the image to see it fullscreen (is german hope you understand it)
If you still have problems with implementing this… Solution 2 is also viable as it allows your old code to work in Hype WordPress. In the WordPress Hype Panel panel with your uploads you would chose iFrame instead of DIV on your upload.
I followed your excellent instructions as best as I could. I created a new function, and named it init(). I took the first scene, and in every layout I set on scene load, run javascript, and selected the init() function you provided.
I exported the modified Hype document with the same name, and then again with a different name as an .oam file, and used the Hype plugin and a code block in the page.
Unfortunately, the issue persists. All of the Hype intrinsic functions, like buttons and transitions work, but not the internal links.
I am guessing I am missing something simple from your instructions. I did not add or change the head code, and in fact, when the Hype doc opens in a new window (not through the plugin, that is), the internal links work just fine. Am I supposed to substitute specific info for my Hype document name or the timeline names in the window.myHypedocument = hypedocument section? Or add anything else to this init() section?
But the document now occupies the full width of the page (it didn’t before), and on mobile exceeds the viewport so I cannot scroll laterally to view parts of it.
Finally, without the scripts in the head, if I export to an html5 folder, won’t I lose all those functions? Should I just copy those back to the head? I am guessing it won’t interfere when uploaded as an .oam file, but I should check with you first.
I greatly appreciate your time and effort. I am hopeful we can just clean up those small details…
I am working in the original Hype document, changing padding and margins, and believe I will be able to get these to fit within the page. Just sometimes they start bigger than the viewport, and I cannot scroll laterally until I change the device orientation, such as portrait to landscape, and then back. After doing this once or twice I can scroll laterally to see all of the Hype document. Sometimes the Hype doc just resizes with this process.
Still wondering if I should copy the scripts back into the head. I don’t think it will interfere with the .oam process.
If that doesn’t help … I can’t invest more time as I am also working and scripting.
I think the original script your using is by @h_classen … (resizing)
