Sizing question

23

This worked perfectly, until I tried to replicate it somewhere else on the same page. I made sure to change the the wrapper name in the JS function and the HTML file but its still troublesome.

As soon as I take one of them out the other works perfectly, do you know why this might be?

24

guess you’re right :wink: sry

try:
window.addEventListener(‘load’, function(){positioning()})
window.addEventListener(‘resize’, function(){positioning()})

instead of :
window.onload = window.onresize = function(){positioning()}

1 Like
26

We’re getting closer! I thought it worked but then when I added a third one it all melted. I’ve tried many different things to test it out, but it seems that the element sizes still link into each other.

Im surprised by Hype, many complex things are extremely simple to do, but a simple resizing is accelerating my baldness :joy:

1 Like
27

well those are five exports on one site

one thing: if your hype is in portraitmode you have to swap height and width to get the right ratio.

tip: create a simple containerdocument for testing.

1 Like
29

Please tell me what you did differently!! You haven’t even used a wrapper div (like myWrapper) in the site you linked. When I tried your code on my site it worked perfectly!

` 



  	<div id="002_hype_container" style="margin:auto;position:relative;width:100%;height:100%;overflow:hidden;" aria-live="polite">
	<script type="text/javascript" charset="utf-8" src="https://amabend.com/mp3/palimpalim/002.hyperesources/002_hype_generated_script.js?24760"></script>
</div>
  	<div id="003_hype_container" style="margin:auto;position:relative;width:100%;height:100%;overflow:hidden;" aria-live="polite">
	<script type="text/javascript" charset="utf-8" src="https://amabend.com/mp3/palimpalim/003.hyperesources/003_hype_generated_script.js?91945"></script>
</div>
<div id="004_hype_container" style="margin:auto;position:relative;width:100%;height:100%;overflow:hidden;" aria-live="polite">
	<script type="text/javascript" charset="utf-8" src="https://amabend.com/mp3/palimpalim/004.hyperesources/004_hype_generated_script.js?83415"></script>
</div>`

Please please please could you upload the hype document so I can examine it to see where I went wrong, or explain how you did it. I have spent so much time trying to figure this out and I cant progress with my work without this.

Thank you Hans!!

30

Dear PappaSmalls,

  • i did not change anything just exported the document as is …
  • i never said you HAVE to use a wrapping element, use one or ten or none it does not matter at the end …
  • perhaps your struggling with portrait- and landscapemode. i added a few lines below
  • in my opinion your behaviour is not ok. it’s not my fault if you can’t progress with your work. just use hype as is and you go fine or get your head around some provided help …

kindly regards

Hans-Gerd Claßen

//this script has to be loaded on sceneload btw layoutload

/**
* hypeDocument.currentSceneElement 1.1
* @return {HTMLDivElement} gives you the current scene element
*/
hypeDocument.currentSceneElement = function(){
return document.querySelector('#'+this.documentId()+' > .HYPE_scene[style*="block"]');
}

//YOU HAVE TO FILL IN BELOW
var yourHeight = 400, yourWidth = 1200;
//END

positioning();
window.addEventListener('resize', function(){positioning()})

function positioning(){

var width =  window.innerWidth || (window.document.documentElement.clientWidth || window.document.body.clientWidth);

//this part is new and distinguishs between portraitmode and landscapemode
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();
}
2 Likes
31

Thank you so much!! This works perfectly now. I didn’t mean to come across in a rude way, I had just spent a lot of time trying to figure out what was going wrong and I was making 0 progress. Thank you for fixing all my problems!

1 Like
32

Keep in mind it’s kind of a hack and may stop working on any update …

33

Ill be sure to stick to this update for now then, thanks for the heads up. How come a feature like this isn’t implemented in Hype anyway?

34

It is definitely a popular feature request for us :wink:.

35

Well the solution is in this thread :wink:

1 Like