Creating a Flexible Tumult Hype Document within a DIV with no set 'height'

Responsive Responsive Layouts
1

In your hypedocument -> headsection paste:

<script>
  function layoutRequest(hypeDocument, element, event) {
    //returns [{name: xxx; height:xxx; width:xxx; breakpoint: xxx}, ...]
    var _layouts = hypeDocument.layoutsForSceneNamed(hypeDocument.currentSceneName());
    //current Layoutname
    var layoutName = hypeDocument.currentLayoutName();

    //get data for current Layout -> {name: xxx; height:xxx; width:xxx; breakpoint: xxx}
    var res = null;

    for (var i = 0; i < _layouts.length; i++) {
      var Obj = _layouts[i];
      if (Obj.name === layoutName) {
        res = Obj;
        break;
      }
    }


    // set hypeDocumentElement height depending on layoutratio ... 
    if (res) {
      var ratioScale = res['width'] / res['height'];
      var hypeEl = document.getElementById(hypeDocument.documentId());
      var currentWidth = hypeEl.offsetWidth;
      var newHeight = currentWidth / ratioScale;
      hypeEl.style.height = newHeight + 'px';


      hypeDocument.relayoutIfNecessary();
    }




    return false

  }

if ("HYPE_eventListeners" in window === false) {
  window.HYPE_eventListeners = Array();
}
window.HYPE_eventListeners.push({
  "type": "HypeLayoutRequest",
  "callback": layoutRequest
}); 
</script>

no IFrame, no Divwrapper … the script should resize the hypedocument itsself

15 Likes
2

This is PURE GOLD! Thanks so much for putting it here :smiley:

3

Hello Hans!

I’ve made my site to work like a parallax effect, where elements coming inside and goes out on the next pause action. The size I’ve chosen is nice for my screen, but when it comes to a laptop, the bottom part is hidden. This is a major problem, as I need the full document to be inside the browser window (like shrink to fit). Or, even better, if it could open a new browser window based on my document’s size. I’ve tried to make a responsible layout, but everything is ruined. Elements outside my document appears and it’s a total mesh.

I thought that this script you wrote, could be the solution to my problem. I’ve pasted it in the head section but there is no result. Have I done something wrong?

1 Like
4

It’d be useful to see more exactly what you’re doing; can you post a zip of your .hype document?

5

Hello Jonathan,

Thanks for your reply. I’m out right now. I’ll send you a link to my Dropbox because of the document’s size.

6

Jonathan! Hello again! I’ve just returned from my job.

I’m sending you the dropbox link to download my project.

https://www.dropbox.com/s/4eij3jgj5nxc5f8/designecho.hype.zip?dl=0

7

20190312-e1arw.png2326×1372 380 KB

8

Max thank you for the suggestion.
I’ve tried to control the site with the flexible layout pinning and sizing, but the result isn’t what I expect. In fact, by this way, the hidden elements that comes inside my document, appears and everything is ruined. I’ve tried to group all the scene contents and make it a mask (hidden), but with no positive result. If there is a script to fit my page to the browser’s window, it would be great.

10

Your document doesn't contain multiple layouts nor flexible layout, so @h_classen's script doesn't quite apply here/yet. I'm going to move this thread to its own topic.

This is the general approach you can take... hard to know how it went wrong for you without that version though! The explicit steps would be:

  1. In the Scene Inspector, check the Width Scale 100% box and Height Scale 100% boxes.
  2. Select all elements by pressing Command-A
  3. Click the "Group" button in the toolbar
  4. Now there's a group, but it is a bit bigger than the bounds of the scene since you have elements that extend over it. So you'll just want to use the scene editor to move the top/left/bottom/right boundaries of the group to match the scene.
  5. Set the Group's Content Overflow in the Metrics Inspector to "Hidden"
  6. Now we can tell this group how you want it to resize. With just the group selected, go to the Flexible Layout section of the Metrics Inspector. Turn on all the pins, and the resize boxes. You should end up with the preview being a blue box that always entirely fills the shape.
  7. Now you'll want to check "Zoom contents" in the flexible layout settings. This tells the group to scale all the inner elements when resized.
  8. And finally set the Scale behavior to "Shrink to fit" - this ensures the contents will always be shown, though may get a little smaller.

There's also some code that you can just paste in a manner similar to your first attempt that basically does the same thing, but for all scenes. You can find it here:

2 Likes
11

Hello Jonathan!

Both ways are working perfect.
In my previous efforts the mistake was that I hadn’t check the “zoom contents” box.

Thank you so much for your help.

1 Like
12

Hi @h_classen thank you for this and all your contributions.
It is possible to adapt this script to be a function inside the Hype document?
Generally, what are the caveats to consider/things to keep in mind when tryin to convert an head script to an inner function?

13

copy paste it to sceneload-behaviour of the first scene should work

1 Like
15

Hi!

What do I have to change to work only in a specific scene?

Thanks!!

16

something like:

<script>
  function layoutRequest(hypeDocument, element, event) {
if(hypeDocument.currentSceneName().includes("yourBaseSceneNameInCaseItShouldMatchMoreThanOneLayout") return;
3 Likes
17

@h_classen had nearly the same answer in the making.

Just add something like (blacklisting-approach):

if (['scene1', 'scene2', 'scene3'].includes(hypeDocument.currentSceneName())) return;

Just add something like (whitelisting-approach):

if (!['scene1', 'scene2', 'scene3'].includes(hypeDocument.currentSceneName())) return;
2 Likes
18

that's better :slight_smile:

1 Like
19

Either is good… I use your approach also very often! :nerd_face: :v:
Having a keyword removes the need to update a list but can lead to false positives with partial matches! Picking a keyword like (noresize) should fix that though.

1 Like
20

7 posts were split to a new topic: Hype Auto Height

24

Thanks very much!!!

1 Like
25

@h_classen @MaxZieb
Thank you so much for this!!
Nevertheless I have a problem. I'm using WordPress with the Plugin "Tumult Hype Animation" for uploading OAM files. If I load up 2 files with this script on the same site, the second one does not work (div is blank).

Is this a known issue? Any ideas how to fix that?
Thank you! :slight_smile:

1 Like