Responsive HTML5 OAM embed

[pluckvermont (David Barron)]

Hi, I am running into an issue creating a responsive HTML5 OAM that responsively resizes in proportion.

I've added this script in the head:

Creating a Flexible Tumult Hype Document within a DIV with no set 'height'

In your hypedocument -> headsection paste: <script> function layoutRequest(hypeDocument, element, event) { //returns [{name: xxx; height:xxx; width:xxx; breakpoint: xxx}, ...] var _layouts = hypeDocument.layoutsForSceneNamed(hypeDocument.currentSceneName()); //current Layoutname var layoutName = hypeDocument.currentLayoutName(); //get data for current Layout -> {name: xxx; height:xxx; width:xxx; breakpoint: xxx} var res = null; for (var i = 0; i < _layouts.length…

Under Scene, I set both height and width to 100%.

Under Metrics/Flexible Layout, I have all pins and both arrows and the Scale Behavior set to Shrink.
I have Zoom Content checked as well.

If I set a Div to height:400px, the HTML5 shows up, but does not responsively rescale properly.

If I set a Div to min-height:400px, it doesn't show up at all.

Are one of my settings off?

[h_classen (Hans-Gerd Claßen)]

you may provide some file or link, but one thing i can say: my script was not made with an oam-file in mind. it should resize hypes div, but not an iFrame. so you may try some other solution …

[pluckvermont (David Barron)]

Sure, here is a link to the page:

Test

There are 2 of the same hype animations. One with a div that sets the height, one with a div that sets the min-height.
.html5{ height:400px; }
.html5b{ min-height:400px; }

The min-height style does not appear at all.

I’ve attached 2 screenshots, one of the Hype page, so you can see how I’ve applied a style and one of the actual page, so you can see how they appear on the back-end.

Many thx!

[h_classen (Hans-Gerd Claßen)]

@pluckvermont

Sure, here is a link to the page:

Pluck

Test

Test

ok, those are div-embeds. so place my script in the headsection of your mainsite and it should change the heights of the hypedivs.

at the moment the script is not included at all in the above site.

[branislavmilic]

I have a multipage and responsive Hype animation and I export it as an OAM.
When I import the OAM in InDesign, it handles only the fist layout (iPad) but not the Phone layout despite the fact that I draw a portrait-oriented frame. Usually, InDesign handles well these different orientations with "straight-HTML” content but not with OAMs.

Any solution?

[Daniel]

Can you share your source Hype file so I can test this out?

Was this something that previously worked as you expect in prior versions of Hype? Or have you worked with other OAM content that is more responsive than Hype exports?

[branislavmilic]

Sent to your support email. Can't share it publicly.
Yes it worked before.