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

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

I tried and edited the hype document in the 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.

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:

  // 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 ( === layoutName) {
        // If it does, store the layout data in the res variable
        res = Obj;
        // Stop the loop

    // 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 = newHeight + 'px';

      // Tell the Hype document to relayout its elements and groups

    // 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
    "type": "HypeLayoutRequest",
    "callback": layoutRequest