Hype Elements in responsive layouts


(David G. Simmons) #1

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.


WordPress Multisite (WPMU) and Responsive Hype Document
(Hans-Gerd Claßen) #2

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

this may be a solution


(David G. Simmons) #3

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.


(Hans-Gerd Claßen) #4

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


(David G. Simmons) #5

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?


(Hans-Gerd Claßen) #6

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


(Hans-Gerd Claßen) #7
setHeight();

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


(David G. Simmons) #8

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…