Document resize JS + Layout issue


#1

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.


(Hans-Gerd Claßen) #2

the script has to started on every layoutload with new size/ratio


#3

The creator himself! Thanks for the script it’s brilliant

I had tried what you said already and it didn’t work, maybe I’m doing it wrong?

This is the doc:
Layouts.hype.zip (14.7 KB)


#4

That didn’t work for me, would something like this not work?

var width = window.innerWidth || (window.document.documentElement.clientWidth || window.document.body.clientWidth);
if(width<=600){
var yourHeight = 1000, yourWidth = 600;
}else{
var yourHeight = 500, yourWidth = 1000;

Doesn’t quite work for me though…


(Hans-Gerd Claßen) #5

@all working with addEventListener and layouts you should remove the eventlistener for one layout if it’s not needed any more -> say onunload

@ExtraBacon i can’t get you explanations. a hypedoc may be helpful

@PappaSmalls your bigger layout has a height of 600 but you’ll filled in 300. except point one above it works as aspected


#6

Thanks! I think I got it working, knowing me though there will be a problem with this tomorrow.

@ExtraBacon I uploaded it so you can see

Layouts.hype.zip (14.8 KB)