Sizing question

1

Is there a way to make the scene resize and keep the same ratio? I’ve played around with the pins and none of them seem to do what I want. I’m having to create new layouts and select everything and reduce the size, and then fix the animations… This still leaves size gaps between layouts. Is there not a more efficient way?

2

you could use a fully responsive scene and set the sceneheight that you wish to have on a resize and load event.
you can use this code for setting the height:
Extend Tumult Hype with JavaScript: hypeDocument.extensions

hypeexample

But perhaps it’s enough when all the elements keep this ratio: then you can just group all sceneelements and set responsivesettings to this group.

3

This works really well, but one problem I have, with both the example you provided and when applied to my own document, is when I add it to my website, the resizing keeps the original height the same, so you end up with a margin of 300+ pixels on top if you are on your phone.

4

if your wrapperelement has a fix size, you have to change it accordingly …

in my provided example the hypefile is within an iFrame and i change its height by attaching a eventlistener to its parent

window.addEventListener('message', function(e) {
  console.log('message received:: ' + e)
  var eventName = e.data[0];

  if(eventName.indexOf('hype_') != -1) {
   var data = e.data[1];
   var iframe = document.getElementById(eventName);
   iframe.height = data + 'px';
  }
}, false);
5

I would use iFrames but unfortunately on Enter Viewport doesnt work with iFrames. Also, your example is just the hype document, there is no iFrame?

6

well, if the hypeexport is in the same hierarchy as your wrapping html just set the size of the wrapper from within hype.

document.getElementById('yourWrapper').style.height = yourCalculatetHeight + 'px';

7

Thank you Hans, but I’m having a really hard time understanding what to do. I don’t have much experience with Hype or JS, could you please further explain?

8

can you post a link¿

9

spread-SEND.hype.zip (447.7 KB)

This is the type of hype document that I need to do this with, as you can see I have 4 layouts, but hopefully with this method I won’t need to do that anymore.
Thanks Hans.

10

example.zip (915.1 KB)

hope i got you right …

1 Like
11

Thank you so much!! I wish I could repay you somehow. Is it possible to have another layout with this? I tried to make one for mobiles but the content is cut off because of the resizing.

12

I’ve just noticed actually that it still leaves a margin on top for smaller screens. It also effects other hype projects on the same page by changing their size.

13

easiest way: load the script on every layoutload. be sure to set the correct ratio.

1 Like
14

padding or margin¿ be sure to set the padding to zero for the wrapperDiv may be i missed this …
margin was browserdefault … set it if necessary …

15

Yeah I removed the outer div, and theres no added margin or padding, it’s just the height of the hype document, it doesn’t scale down with the elements itself. I sent you a message with the link to the site, so you can see what is happening. It also cuts off other hype documents in the same page.

16

hi,

in my provided example the scene, hypedocument itsself and the wrapperelements height change accordingly to the content:

https://amabend.com/mp3/spreadSEND/

sounds like your working with several identical ids

I've got no link, just your hypefile

may be you're mixing things up¿

18

you are right, the sceneselector was initially made for documents using only one hypedoc.

But you can instead use the premade sceneselector from the hypextensionsthread:

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

var scene = hypeDocument.currentSceneElement();
scene.style.height = yourHeight
1 Like
19

Im a little confused, where do I put this code?

20

palimpalim.hype.zip (418.5 KB)

2 Likes
22

the wrappingDiv does not change its height. if you want to change the height of a wrapping element then uncomment the line in the script and fit it to your needs. it is commented within my last zip.

you should try to understand what the scriptlines are doing …

i’m off here sry …

1 Like