Hype Elements in responsive layouts

I know that this is a known issue with embedding Hype documents in Wordpress posts, especially those using a responsive layout, but I’m seeing the same thing in a regular web-page using a responsive layout.

For some reason the Hype element gets dimensions of 1634px x 0px which of course means it’s not visible. I’ve tried everything I can think of to make this element visible, but so far, to no avail I’ve even tried re-setting the height using JavaScript and altering the DOM after the element is loaded, but still, we’re at 0px height.

Is there ANY way to over-ride Hype’s settings here and fix this? It’s really killing me. I may have to pull Hype elements from use on my site if I can’t get them to display in the new layout. This is NOT a Wordpress site (gave up on that due to this bug) but to not have ANY responsive layout work with Hype is frustrating.

you don’t provide an example … this may be helpful though

this may be a solution

I’d rather not use an iFrame, as that is a bit of a hack … of course, attempting to dynamically adjust the DOM is a total hack too.

Example: http://dragonlyiot.com/staging/

I don’t get why Hype can’t deal with responsive layouts. Seriously frustrating.

it doesn’t need to be a iFrame. i guess any wrapper-element with absolute height will be fine …

[quote=“davidgs, post:3, topic:5934”]
Example: http://dragonlyiot.com/staging/
[/quote] … this is a missing link

sorry, http://dragonflyiot.com/staging And having an absolute height defeats the purpose of a responsive page. Yes, I could define an absolute height, but then it’s going to scroll on smaller screens, even when the Hype content fits in the viewport.

The bigger question remains: Why can’t Hype deal with responsive designs?

simply run a js onload + onresize that sets the height of the surrounding div depending on viewportheight minus header and footer …


window.onload = window.onresize = function(){setHeight();}

function setHeight(){

var height =  window.innerHeight || (window.document.documentElement.clientHeight || window.document.body.clientHeight),
 headerH = parseInt(document.getElementById('header').style.height),    
 footerH = parseInt(document.getElementById('footer').style.height),
 hypeH = height-headerH-footerH;

 document.getElementById('dragonfly_hype_container').style.height = hypeH + 'px';//i would use a wrapper instead of hypeel itsself ...

you should place it near the end.
hope it’ll work

Thanks for that! It does, indeed work when the page loads. However, after each transition, the page goes blank because the height re-sets to 0px. There must be some event fired when I move from scene to scene that I can also cause to call this setHeight() function…