Responsive Layout in an iFrame

iframe

(Matt) #1

Is there a way to have the layout be responsive based on the dimensions of an iFrame?

Basically the iframe size works well on a desktop but on iPad landscape the iframe does not fit.

Any thoughts on how I would approach this would be great…

Thank you!
Matt


Align iframe Source
Hype graphic getting clipped
(stephen) #2

If you have a responsive hype document and put it in an iframe it will respond to the size of the iframe. Here is a Hype document that has another responsive Hype test.zip (10.6 KB) .

When you preview that document it uses Flexible Layout options to resize the iframe. Then as the iframe changes width the Hype document inside will change layouts accordingly.

I hope this helps. If this is not exactly what you are asking feel free to include a bit more info or an example project.


(Matt) #3

Thanks @stephen this is very helpful. Could you possible share the Hype document that is embedded in that that iFrame?
I think I’m not setting up my Hype document as a proper responsive layout. What do I need to select in order to do that?
Thank you!
Matt


(stephen) #4

Here you go! responsive.zip (15.0 KB)

There are 3 key things in this document:

  1. Add multiple layouts
  2. Select Scale Width 100% in the Scene Inspector
  3. Set the proper Flexible layout options on the rectangle

(Trey Yancy) #5

I am creating responsive sites that have a fair amount of Hype content and that rely on multiple iFrames with Hype animations.

Something that has not made it into Hype is the ability to control object loading independent of scenes, which can make for long load times, The solution I have for speeding up load times is to stack a number of iFrames in an otherwise empty inline layout in my page design app. Each iFrame is set to respond to the window size and each one contains a different responsive Hype animation (intro, products, design, construction, etc.). The only special thing I had to do was to edit the Hype-generated HTML for each iFrame so that it compensated for vertical gaps between the iFrames, thereby creating what looks like one very tall Hype site.

http://info.ohair.com