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

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

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.

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

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.

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

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

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?

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

1 Like

Hi!

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

Thanks!!

something like:

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

@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

that's better :slight_smile:

1 Like

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

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

Thanks very much!!!

1 Like

@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

In this thread are multiple approaches so I’d would need to see what you implemented.

Thank you!
This is a testsite: [LINK deleted]
I hope this is what you wanted to see, otherwise let me know what else you want to see.

edit: on this site the animation inside the green div is the only one you should see.

@h_classen sent me a modified script that seems to work pretty nice. I think the author himself should make it public as soon as he thinks it's time for it.

:hugs: Thanks Hans