Annoying space below hype when scaled 100%

Responsive
4

The problem is that the bounds of your Hype document are looking for some constraint, but there isn’t one unless you make the height of your window smaller.

Here’s a great approach to resolving this issue, which requires a small snippet of code placed where your document is embedded: Creating a Flexible Tumult Hype Document within a DIV with no set 'height'

This example document will ensure that the height of the Hype div will respond to the width of your window. It doesn’t require a constraining div:

scale-test.zip (104.5 KB)

What this file does is it places your flexible document inside an iframe, and then dynamically adjusts the height and width of your document based on the proportions of the iframe (width vs height). It readjusts the iframe’s dimensions whenever you first load the page and when you resize the window:

<!DOCTYPE html>
<html>

<head>
    <title></title>


</head>

<body>

    <div>Content up here.</div>

    <!-- If this 'container' div is set to be responsive, it will adjust the height and width of 
the Tumult Hype document placed below -->
    <div id="container">

        <!-- We're setting the height here to the default size of the document. It will adjust 
 	     based on the dimensions of the 'container' div -->
        <iframe id="hypeFrame" style="border: none;" src="scale_test.html" height="320" width="100%" frameborder="0" scrolling="no"></iframe>

    </div>

    <div>Another div with some text.</div>
    <div>Another div with some text.</div>
    <div>Another div with some text.</div>
    <div>Another div with some text.</div>
    <div>Another div with some text.</div>
    <div>Another div with some text.</div>
    <div>Another div with some text.</div>
    <div>Another div with some text.</div>

    <script type="text/javascript">
        var scaler = function () {


            // Input the Width and the Height of your original document. Just Numbers!
            var ratioScale = 960 / 320;

            // get the width of the enclosing Div for the Hype element
            var currentWidth = document.getElementById('container').offsetWidth;

            // Use the width of the Div, and divide it by the Ratio of the W/H of the document
            // and set this as the variable for the height of the Iframe.
            var iFrameNewHeight = currentWidth / ratioScale;

            // set the iframe to have the correct height.
            document.getElementById('hypeFrame').style.height = iFrameNewHeight + "px";

        };

        // Run Scaler function on Document load
        scaler();

        // Run the function again if the window is resized. 
        window.onresize = scaler;
    </script>

</body>

</html>
2 Likes