Resize with JS: Height>Width = Catastrophy

Using JavaScript with Hype
1

I am using JS to proportionally resize my document to the width of the screen. For some reason it doesn’t work when the height is bigger than the width. The JS was created by @h_classen

JS:
hypeDocument.currentSceneElement = function(){
return document.querySelector(’#’+this.documentId()+’ > .HYPE_scene[style*=“block”]’);
}

var yourHeight = 600, yourWidth = 400;

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';


hypeDocument.relayoutIfNecessary();
}

I have also attached a working example (Height<Width) and the problem (Height > Width)

Resize Working.hype.zip (15.6 KB)
Resize Fail.hype.zip (15.6 KB)

2

layoutHeightsProportionally.hype.zip (16.3 KB)

3

This works on its own, but when you have more than one hype documents on a page they interfere with each other, and at least one of them becomes significantly smaller or disappears into its hidden overflow.

4

Can confirm with @ExtraBacon, heres a link showing the effect.

5

i simplyfied the sceneselector in the example above, but taking the sceneselector from hypeextensions it should also work for multiple documents with multiple layouts … hope so :wink:

there may be custom circumstances where it won’t work …

hypeDocument.currentSceneElement = function(){
return document.querySelector('#'+this.documentId()+' > .HYPE_scene[style*="block"]');
}

const yourHeight = 600, yourWidth = 400;
positioning();
window.addEventListener('resize', positioning)
function positioning(){
var width =  window.innerWidth || (window.document.documentElement.clientWidth || window.document.body.clientWidth);
var height = Math.floor((width*yourHeight)/yourWidth);


var scene = hypeDocument.currentSceneElement();

scene.style.height  = height + 'px';
document.getElementById(hypeDocument.documentId()).style.height = height + 'px';

hypeDocument.relayoutIfNecessary();
}