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

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.

the download is not open ...

Link should be open now.

someQuirkyFix.hype.zip (2.9 MB)

//////////////
the document is quite heavy and i guess that this is the reason for the false behavior. if the above fix works: i feel like @jonathan should have a look at it ... ¿!

1 Like

Thank you very much for having a look at this. Unfortunately it still seems that it isn't working. Odd...

hm ... it does in my short tests.

perhaps you're expecting something wrong to happen¿

here a example of what the script should do:

  • the desktopscene has got an layoutdimenesion of 1240x900px

  • in the browser the the hypedocument changes to let's say 1000px regarding a browserresize

  • now the script changes the hypedocelements height to 725.806px ... that's all ...

if you open the developertools in safari or chrome and switch to elements you should see the height changing while resizing.

it does in my tests ...

perhaps somebody else could have a look @MaxZieb :wink:

I just realized that it may be a desktop resolution issue. The attached screenshot shows my problem. It works fine as long as the browser window width doesn't exceed 1830px. My desktop is 2560x1440 and when it is full width I get a scroll bar which allows me to scroll down into a black abyss. The wider the web browser window gets, the deeper the black gap gets as well.


then the problem is related to your setup and the script is doing its job :ghost:

Desktoplayoutsize: 1240*900

Layoutwidth in browser for example: 4000px leads to (4000/1240*900) a proportional height of 2903px ... that's it :slight_smile:

image

the script only sets a proportional height regarding a layoutratio ...

Where as you might want to set the height of the document to the height of your content on the scene
OR
simply wrap your hypedoc in another html-element that has a max-height <- in this case to max-heights applied by mediaquery to consider the two layouts

so you may rethink your setup ...

2 Likes

Ok thank you for having a look and clarifying!

I have set the height of the doc as the content in the scene, but it just keeps going.

I have also wrapped my entire site in a group that dynamically shifts with the moving size of the web browser. As you said, it keeps increasing the scaling of the height based on the web browsers width.

I'll see what I can do to fix my issue. If anyone happens to know how to code this, it would be greatly appreciated!

no ... it increases the hypedocumentheight in conjunction to the hypedocumentwidth based on the layoutratio

1 Like

Thank you for your help. I have posted a new topic here relating to my issue: Mobile Site - Bottom Gap Issue

Hi,
I tried and edited the hype document in the autoheight.zip but I can't get it to work properly. I would need the first scene (no autoheight) to transition to the next scene (with autoheight set) with a "push (bottom to top)" transition.
I still keep getting the empty space at the bottom. The autoheight kicks in only if I manually resize the browser window.
http://marb.cc/autoheight/

I also tried using two separate hype documents on the same page instead. However, that throws a js error and the page only shows one hype document.

any help would be appreciated. Thanks in advance guys.

OMG I am such a noob. I properly implemented this script and it worked for my issue. I didn't realize I actually had to put the :arrow_up_down: symbol in my mobile version scene name on the left panel within "Device Layout". Wow, many hours that could have been saved. Thank you! My mobile site doesn't have the gap in it anymore :slight_smile: This script you posted above worked for me: Creating a Flexible Tumult Hype Document within a DIV with no set 'height'

I am finding that this updated version does work, however if I scroll with my finger on my iPhone on a page that's longer than my phones screen, it rubber bands and doesn't allow me to scroll to the bottom of the page. After waiting a moment after the 1st attempt to scroll downwards it works.

This is the same for back up to the top of the page as well. 1st swipe rubber bands, second swipe works after a moment.

Big Thanks!!!!!!!

In this super popular code snippet, I thought it would be useful to have chat GPT add some code comments to explain the magic of what's going on. This is a very useful snippet for folks embedding responsive documents within Wordpress where you want a fixed ratio based on the active responsive layout:

<script>
  // Define the layoutRequest function
  function layoutRequest(hypeDocument, element, event) {
    // Get an array of all layouts for the current scene
    var _layouts = hypeDocument.layoutsForSceneNamed(hypeDocument.currentSceneName());
    // Get the name of the current layout
    var layoutName = hypeDocument.currentLayoutName();

    // Initialize a variable to store the data for the current layout
    var res = null;

    // Loop through the array of layouts
    for (var i = 0; i < _layouts.length; i++) {
      // Get the current layout object
      var Obj = _layouts[i];
      // Check if the current layout object matches the current layout name
      if (Obj.name === layoutName) {
        // If it does, store the layout data in the res variable
        res = Obj;
        // Stop the loop
        break;
      }
    }

    // If layout data was found, use it to resize the Hype document element
    if (res) {
      // Calculate the ratio of width to height for the current layout
      var ratioScale = res['width'] / res['height'];
      // Get the Hype document element
      var hypeEl = document.getElementById(hypeDocument.documentId());
      // Get the current width of the Hype document element
      var currentWidth = hypeEl.offsetWidth;
      // Calculate the new height of the Hype document element based on the layout ratio
      var newHeight = currentWidth / ratioScale;
      // Set the height of the Hype document element
      hypeEl.style.height = newHeight + 'px';

      // Tell the Hype document to relayout its elements and groups
      hypeDocument.relayoutIfNecessary();
    }

    // Return false to indicate that the event should not be propagated further
    return false;
  }

  // Check if the HYPE_eventListeners array exists in the global scope
  if ("HYPE_eventListeners" in window === false) {
    // If it doesn't, create it
    window.HYPE_eventListeners = Array();
  }
  // Add an event listener for the HypeLayoutRequest event
  window.HYPE_eventListeners.push({
    "type": "HypeLayoutRequest",
    "callback": layoutRequest
});
</script>
4 Likes

This seems like a very handy solution to a problem I have.
But I can't get it to work :frowning:

I have put the code snippet in the header of my Wordpress site.
I import the AOM-file using the Tumult Hype Animation Plug-in and put that in a HTML-widget using Beaver Builder.

If I just check "scale width" and not "Height" in the hype document it shows up in the div the plug-in creates But if I check both the scale height and width it does not show up. Then I have to use a iframe in the plug-in.

But I tried booth and I can't get it to scale properly on the site.

I made a simple test file and test site If someone could take a look it would be appreciated.
https://studioax.se/ingen-rubrik-2/

This topic has already been addressed in the forum and is considered a “classic” :grinning:. When you enable scale height, the height of the element is determined by the container it is placed in. Therefore, if you’re using BeaverBuilder, you’ll need to place it within a container. Then, you should specify a fixed height for the container that holds your shortcode for the Hype animation, using a specific value in pixels or VH units.

2 Likes

Hi
Yes I looked at the earlier threads but I still could not get it to work.
But I think I know what was wrong. First I misunderstood and put the code snippet in the Hype documents head.
Then I got that it should be in the sites head instead. So I put in in there and changed the hype document to scale both height and width.

The good part is that I place the shortcode it in a HTML-module and it works perfect. And I do not have to set the fixed height. Don't know why but it just works :slight_smile:

1 Like