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

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


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


something like:

  function layoutRequest(hypeDocument, element, event) {
if(hypeDocument.currentSceneName().includes("yourBaseSceneNameInCaseItShouldMatchMoreThanOneLayout") return;

@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;

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

Here is a followup on the discussion. I used a Unicode character (:arrow_up_down:) and turned the logic on its head. Meaning for scenes/layouts you want it to work you add the character. The setup and condition can be easily removed/tweak or enabled for all scenes if you don't like that logic. Another thing I did is to move the code into the Hype document itself so it should work out-of-the-box in settings this approach is most needed like WordPress. Check out this autoHeight Hype document based on @h_classen great work: (34,2 KB)

As mentioned, you can use another icon if you don't like the one I set. To change the icon to let's say ↧ just replace the following lines:

// return true to enable: currently its scenes or layouts containing (↧)
return hypeDocument.currentSceneName().includes('↧') || hypeDocument.currentLayoutName().includes('↧'); 

And while we are at it… here is a replacement to always enable it:

// return true to enable
return true; 

And finally a replacement to enable in a reverse logic. So, scenes or layouts containing the icon will not be resizing but the rest will:

// return false to disable: currently its scenes or layouts containing (✖️)
return !(hypeDocument.currentSceneName().includes('✖️') || hypeDocument.currentLayoutName().includes('✖️')); 

PS: Minimal height per scene and layout could also be defined (CSS or JS). Let me know if anybody would need that feature as well and I'll gladly create an example.


@MaxZieb that's pretty much cool :slight_smile:

For later readers:
The extended example in the post above should easily enable a proportional resizing of the Hype-document on a scene/Layout-basis when included in a (e.G.) wordpresssite using Hypes wordpress-plugin as the necessary code is moved from the head to the hypedocument.


This is super helpful, and it's doubly-awesome that it doesn't need to be enabled in all scenes for it to work, just the first one...

1 Like

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:

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

I replaced the download above. The original code is anyway from Hans so all is fine.

1 Like

Here is another post:


The sample document is called "autoheight".
After test, I found it will auto set both width and height in Hype preview or on wordpress site.

So, maybe it should called auto-width-height, auto-proportional, auto-flexible layout or ONE layout :grinning:?

I reduced the code to the following but haven't put it into the download above.
Just if somebody wants it shorter. @h_classen what do you think, okay?

function layoutRequest(hypeDocument, element, event) {
	var currentLayout = hypeDocument.layoutsForSceneNamed(hypeDocument.currentSceneName())
		.filter(function(layout){ return hypeDocument.currentLayoutName();})[0];
	var hypeElm = document.getElementById(hypeDocument.documentId());
	var newHeight = hypeElm.offsetWidth * currentLayout['height'] / currentLayout['width']; = newHeight + 'px';
	return false;

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

And minified:

function layoutRequest(a,b,c){b=a.layoutsForSceneNamed(a.currentSceneName()).filter(function(d){return a.currentLayoutName()})[0];c=document.getElementById(a.documentId());*b.height/b.width+"px";a.relayoutIfNecessary();return!1}!1==="HYPE_eventListeners"in window&&(window.HYPE_eventListeners=[]);window.HYPE_eventListeners.push({type:"HypeLayoutRequest",callback:layoutRequest});

i – of course – love it all :slight_smile: :ok_hand:



1 Like