I have found a way to change the hype document size proportionally to the width of the screen (Created by h_classen), it works perfectly, but I’m having trouble creating a new layout with it.
I suspect that it’s because the JS overrides the size of the element, and is used at scene load. I have tried a few things, but I can’t seem to get it working.
Here is the JS in question:
hypeDocument.currentSceneElement = function(){
return document.querySelector('#'+this.documentId()+' > .HYPE_scene[style*="block"]');
}
var yourHeight = (height), yourWidth = (width);
positioning();
window.addEventListener('resize', function(){positioning()})
function positioning(){
var width = window.innerWidth || (window.document.documentElement.clientWidth || window.document.body.clientWidth);
if(yourWidth > yourHeight){
var height = Math.floor((width*yourHeight)/yourWidth);
}else{
var height = Math.floor((width*yourWidth)/yourHeight);
}
var scene = hypeDocument.currentSceneElement();
scene.style.height = height + 'px';
document.getElementById(hypeDocument.documentId()).style.height = height + 'px';
//uncomment and fill in below if you want to resize a wrapping element tooo
//document.getElementById('myWrapper').style.height = height + 'px';
hypeDocument.relayoutIfNecessary();
}
To get this to work, everything has to be in a group, with 100% scaling, overflow: hidden, all pins w/ shirt to fit zoom contents.
Wouldn’t a simple IF statement fix this problem? I tried a few things to no avail.