Manipulating scene height

The question often arizes how to set the height of a Hype document in a proportional manner or to set the height dynamicly without switching scenes. This might become necessary when embeding the document in a responsive enviroment or when wanting to animate the scene height.

Prerequisite

If you want your document to be displayed in a responsive enviroment, you will need to enable percentage checkbock on height and width in Tumult Hype. For now Hype doesn't allow any viewport percentage settings out of the box.

Setting scene height in Hype

Switching the Hype document from a pixelbased height to a percentage based height is finally rendered on the indivudual elements using the style decalration (including the root element with the class HYPE_document). Meaning it introduces a dependency on the surrounding HTML element you provide in your HTML paget. In the regular Hype preview this isn't a problem as the Hype document is placed right below the body tag the surrounding container. Therefor, a percentage based height will be calculated based on the the browser window dimensions. If you use the HTML generated by Hype as you homepage this is mostly a sufficent solution.

Why does a percentage based height disappear?

In most cases a Hype document using percentage based dimensions creates problems when embed in a surrounding HTML element that doesn't have any height properties. To make things clear, the problem could also arise with a percentage based width although in the width is mostly defined as it plays an essential role in current responsive design.

Setting height with an surrounding DIV element

One solution is to fix the percentage based document height of an Hype document is using a hardcoded surrounding HTML element and setting it to a pixel height (px) or viewport height percentage (vh). This solution hard codes the height and doesn't work for proportianl scaling design.

Setting height using pixel or viewport percentages

Pixel height:

<div style="height:400px;">
  <!-- put your Hype container code in here -->
</div>

^{This wrapper sets the height to 400 pixel.}

Viewport height (percentage):

<div style="height:50vh;">
  <!-- put your Hype container code in here -->
</div>

^{This wrapper sets the height to 50 % viewport height.}

Setting height with an additional minimal height

On either of these approaches you can be combined using the min-height property:

Pixel based height with min height:

<div style="height:400px; min-height:50vh;">
  <!-- put your Hype container code in here -->
</div>

^{This wrapper sets the height to 400 pixel but at keeps at 50 % viewport height.}

Viewport base height (percentage):

<div style="height:50vh; min-height:250px;">
  <!-- put your Hype container code in here -->
</div>

^{This  wrapper sets the height to 50% viewport height but at keeps at least at 250 pixel height.}

Setting scene height by JavaScript

There is a Hype extension that allows to set the height of an Hype document. This can be useful to reveal a disclaimer.

Code:

/**
* hypeDocument.setCurrentSceneHeight
* @param {Number} height to set the scene element to
*/  
hypeDocument.setCurrentSceneHeight = function ( height) {
    var sceneElm = document.getElementById(this.currentSceneId()));
    sceneElm.parentElement.style.height = height;
    sceneElm.style.height = height;
}

Usage:

hypeDocument.setCurrentSceneHeight( '1000px' );

Example:

setCurrentSceneHeight.hype.zip

Using the additional height

Given that Hype positions element in an absolute manner, enabling a flexible height gives you additional space to use. You can either use the pinning, positioning and scaling system built in to Hype or the Hype API to reposition elements to take advantage of additional space.

Setting height proportional to width

To set height in a proportional manner using JavaScript is the easiest way to go. There is a great extension written by Hans-Gerd Claßen that calculates the height based on the original apsect ratio set in the Hype document using the HypeLayoutRequest event.

Adding proportional height to responsive scenes

Animating height changes

Another approach uses a Mutation Observer and an inner content container that can be animated using Hype native animations (timelines/API). Thas approach only makes sense if you want to animate the transition of your height through Hype.

Resizing Hype scenes with native animations (Hype Stage Resizer)