Possible to resize hype container from scene to scene

My Hype documents are embedded in Wordpress. My scenes do not all need to take up the same height. I would like the container they are in on the page to shrink or expand depending on the height of the scene. What happens by default is that the container takes up the height of the tallest scene. Using javascript, is it possible to dynamically size the height of Hype’s container from scene to scene? Has anyone tried this with success?


Haven’t done this particular thing yet. In theory it should work by simply getting the scene element’s height.

(In practice I have found working with positions and sizes of hype elements to be a bit of a challenge, due to all the voodoo going on in the background (the elements aren’t always where you’d assume they’d be due to transitions).
Didn’t look into it in detail (what I was trying to do seemed like it would be to much trouble because it would break as soon as internal Hype voodoo changed).)

Hi Steve: Here’s a way to calculate the height based on the document’s dimensions: Responsive header sizing challenges

1 Like

have a look for postMessage (to post the height to parent window onsceneload) and onmessage to receive the height in wp …

hypedoc onsceneload (first scriptcall!)

var height = hypeDocument.getElementProperty(element, 'height'); //scene(layout)height
window.parent.postMessage(["target_iFrameId", height], "*");//id of your iFrame within wp


window.addEventListener('message', function(e) {
var eventName = e.data[0];

if(eventName.indexOf('target_iFrameId') != -1){
var data = e.data[1];
var iframe = document.getElementById(eventName);
iframe.height = data + 'px';

you can also change the iFrames height directly from within hype when not relying to get this work crossorigin …

also, if your sceneheight itself is dynamic use onload, onresize events to get current height

1 Like

Thanks Hans,

I’m not using an iframe, just the basic hype html that is generated.

I tried using this code but it doesn’t seem to work:

var  hypeContainer = document.getElementById('some_hype_container');
hypeContainer.style.height = '800px';

Any idea why that doesn’t work?

That should work, as long as you're triggering it after the document loads (a responsive document might want to adjust the doc height if the viewport changes, which would override your script).