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

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

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:

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();
}

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()}!1==="HYPE_eventListeners"in window&&(window.HYPE_eventListeners=[]);window.HYPE_eventListeners.push({type:"HypeLayoutRequest",callback:layoutRequest});
</script>
5 Likes

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

3 Likes

:grinning:

1 Like

Update: I removed the return false; as this isn't necessary and on the contrary breaks the event callback loop the runtime uses as it proclaims a result of "no change". As this technique only "observes" the return actually disables all other HypeLayoutRequest listener that actually want to change a layout by returning a name. Not return anything fixes the "problem" and allows for an active callback to coexist with this nice helper.

Hello,

First off thank you for such a wonderful script.

Secondly, for some reason on my files, this gap removal removes the gap from my mobile versions of my pages but yet adds a gap to my desktop pages (in Chrome, Safari, Opera, Firefox). Can someone please help?

I have checked my Tumult files and ensured I don't have any objects running off the edge or extended scene layouts and ensured that objects are hidden. When I remove the code you've provided above, my desktop pages work fine, but then my mobile sites have a gap. I've tried looking at the code to fix it but I'm not advanced enough to figure this out.

Here is my site: www.elevatebtt.com

The Branding page is very obvious. Feel free to scale between desktop and mobile window sizes to see what I mean.

please take the unminified code from @MaxZieb's last post above and add a

console.log(newHeight)
right before
hypeDocument.relayoutIfNecessary();

if the logged height is the expected height, but the output in the browser is not ... it might then be a timing-issue ... means Hype overwrites the height set by the script ...

feel free to attach the hypefile for further investigations ...

Thanks for the new info. Unfortunately it doesn't work.

Attached is my Hype document for further investigation.

https://drive.google.com/drive/folders/1CuGPawuXmV1VwHyLP6VAK6-e_rPtf1Bx?usp=sharing