Embedding your document in an iframe

iframe

#1

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:

<iframe src="http://site.com/document.html" height="400" width="300" style="border:none;" frameborder="0" scrolling="no"></iframe>

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.


#2

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.)

Did I overlook something?


#3

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).


(Danny) #4

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?


#5

This page has our most recent Square Space tutorial: Embedding in a Squarespace Site

Using the ‘code block’ is the way to go. Can you let me know if you have any issues with that method?

Can you share your three lines of code as you have them so far?


(Danny) #6

Yes, this is the page I was following. The lines of code I have right now are :

div id=“1916v01_hype_container” style=“margin:auto;position:relative;width:1024px;height:768px;overflow:hidden;” aria-live=“polite”>

The open and close div tags are also in place.

I’ve also attached some screenshots Daniel. It looks from the grey box displayed that something is there but not being displayed correctly.


#7

The console shows an error saying it cannot find the resource

It shows a 404 not found for this link

http://www.todaybackthen.com/tbtdemo/1916_v01.hyperesources/1916v01_hype_generated_script.js?9982

Double check this is the correct path to your JS file.


(Danny) #8

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?


(Mark Hunte) #9

1916_v01.hyperesources/1916v01_hype

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.


(Mark Hunte) #10

Re

So I just watched the Squarespace video on how to do this.

You need to uncheck the Display source so your code is picked up as markup.
See step 3


(Danny) #11

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

 <div id="1916demo_hype_container" style="margin:auto;position:relative;width:1024px;height:768px;overflow:hidden;" aria-live="polite">
		<script type="text/javascript" charset="utf-8" src="http://todaybackthen.com/tbtdemo/1916demo.html/1916demo.hyperesources/1916demo_hype_generated_script.js?21756"></script></div>

However, it’s still not displaying any content.


(Mark Hunte) #12

In this forum you need to select your code and then mouse click the above. This will format it doe we can see it properly.



(Danny) #13

Ah, fair point. Thanks for the tip


(Wolfgang Wunderlich) #14

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


#15

Can you share how you’re embedding the PDF? An example would be great.


(Wolfgang Wunderlich) #16

Hi Daniel,
thanks for U´r reply.

This would be a sample:


#17

Drop the PDF into the Resource library, then it can be called with…

<a href="${resourcesFolderName}/the.pdf">Download The PDF</a>


(Wolfgang Wunderlich) #18

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.


#19

Wow, I had to go way back in history to test this out. HA HA.

https://photics.com/tag/magazines/

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.


(Wolfgang Wunderlich) #20

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.

Thanks again, for your hint.
ww