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

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

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:

autoHeight.zip (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.

10 Likes

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

3 Likes

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:

scale-height-only
scale-width-only

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?

<script>
function layoutRequest(hypeDocument, element, event) {
	var currentLayout = hypeDocument.layoutsForSceneNamed(hypeDocument.currentSceneName())
		.filter(function(layout){ return hypeDocument.currentLayoutName()==layout.name;})[0];
	var hypeElm = document.getElementById(hypeDocument.documentId());
	var newHeight = hypeElm.offsetWidth * currentLayout['height'] / currentLayout['width'];
	hypeElm.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>

And minified:

<script>
function layoutRequest(a,b,c){b=a.layoutsForSceneNamed(a.currentSceneName()).filter(function(d){return a.currentLayoutName()==d.name})[0];c=document.getElementById(a.documentId());c.style.height=c.offsetWidth*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});
</script>
4 Likes

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

3 Likes

:grinning:

1 Like