Sometimes it’s not possible (or convenient) to include a Tumult Hype document directly on a page using the standard export method outlined here. Embedding hype documents as an iframe can be useful for quickly getting a Hype animation running in a pre-existing site.
Let’s say you have a 300 × 400 px box where you’d like to display a Hype animation. Using an iframe set at those exact dimensions, you would only need to include the full URL of your hosted Tumult Hype document:
The code above has various pieces of code which ensure that there is no border and no scroll bar appears. If your document is larger than the available size of the iframe, you will not see a scroll bar (unless you change scrolling to ‘yes’). If you have created a responsive document, you’ll need to change the height or width values to percentages like "100%".
Hosting documents on Dropbox:
While it’s possible to host your Hype files in the ‘Public’ folder of your Dropbox and reference them in an iframe, you’ll see better performance if your content is hosted a real web host.
I just tried to embedd a very simple hype element inside of a ProcessWire CMS template. - Did not work, even with cache off. No error, just silence. (Some more hints why such things fail would be welcome).
So your iFrame method comes handy:
Hype DOES work with the iframe method you suggest. That raises some questions.
I already managed to rebuild the iframe code programmatically, so I can make Hype behave like a natural part of a ProcessWire CMS page.
Problem: With the new Hype Pro there are multiple layouts for various responsive situations possible. Each can have a different height. For example: The taller iPhone version normally has a larger height than a landscape desktop version. Great so far. But not so great with the iFrames concept.
There are various JS libraries out there where a page within an iframe can resize the parent iframe on demand (if on the same domain and no security sandbox problems occur).
What is the recommended way to embed Hype Pro with the iFrame method with works with responsive layouts heights?
A height with percentage values did not work, I tried without success:
style="min-height:200px; height:100%!important;"
(My workaround for now would be to mimic the responsive behavior with media queries on the CMS page for different iFrame heights. But I would prefer an automatic behavior from this hard coded one for obvious reasons.)
If you can share a jsFiddle or URL of your document that would be great. The responsive breakpoints that responsive layouts 'reads' when deciding what to display will always be 200px wide in the above case. The height you have set will depend on what the iframe is placed within (not the iframe content).
I did a hacky JavaScript workaround a while back that helped with embedding flexible documents within DIVs that had no 'height' set (it was for a Wordpress theme). When no height is set, documents don't show up because Hype thinks it has 0px to work with. That example is here:
To avoid this issue, I usually recommend not setting the 'height' value to scale in the document settings when embedding within a web page that you don't have full control over (or if you must use an iframe).
I’m at a total loss here. Is it better to use an iframe or code block to embed a Hype doc into Squarespace?
I’ve been following the video tutorials you’ve posted Daniel but I’m not having any success. I’ve gotten as far as uploading my html and resource folder via Cyberduck and adding the three lines of source code as outlined (http://hype.desk.com/customer/portal/articles/171479) to the embed code block. I don’t think I’m close to knowing how to access or display what I’ve just uploaded. Could someone shine a light on this for me please?
Thanks DBear…In my last screen shot, I had added the URL to the page where I have made the code block (www.todaybackthen.com/tbtdemo/1916_v01.hyperesources/1916v01_hype_generated_script.js?9982). This time I’ve taken that first part out and just left the src as the hype document and the .js file. My files are uploaded to an folder called tbtdemo and my page is called tbtdemo. I’ve attached another screenshot to show all I have. What am I doing incorrectly?
This is inconsistent to how a hype project would normally be exported. Have you renamed the js file or the hype resources folder which has an extra underscore "_" after the 1916
Also your code block is enclosed in a pre tag. Which means it will display the html code as text rather than add it to the html markup as html markup.
Your code dialogue in the screen shot looks different to the one that @Daniel shows in his tutorial.
Hi Mark, these are some things for me to consider. I haven’t renamed the js file. The underscore is part of the filename I have given the hype document. I’ve removed that underscore and re-exported and uploaded the new version of the files.
I’ve also unchecked the Display source box. After taking another look at Daniels screenshot, I think I was missing a URL.
Here’s the scripts at the minute
is there a special procedure to embed pdf´s from a dropbox file ?
I have no problems in general, but as soon, as I use the Db-Link … nothing.
Do I just have to use part of the link or do I have to change anything within the
link ?
Thanks for hints.
ww
Thanks for the hint but the problem is, that there are about 1 GByte of PDFs tobe droped. The shown pdf is just a sample of almost hundert.
Or will this be a dynamically process, just one at a time?
The problem is just with Dropbox. It works fine with the server of another hoster.
I grabbed the first seven issues of "Photics - The Guild Wars Edition" to test this out. I just dragged and dropped them right into the "Resources" folder. They're not 1 GB in size, but it was instant.
As for linking to the PDFs, my examples have a common naming structure. It's issueXX.pdf – so I could just use JavaScript to call a file dynamically.
Hi Michael,
thanks for U,r reply.
I don’t have a general problem in handling pdf and to reload the files into the app.
The only problem I have, is to do this with Dropbox files.
Perhaps it’s a good idear, to skip Dropbox, if they just offer their proprietery solution.
above. This will format it doe we can see it properly.