Annoying space below hype when scaled 100%

This is the page:

http://master.includingme.net/test/scale_test/scale_test.html

Why is the hype expanding vertically? I just want the text to appear directly below the hype. The box is set to “shrink to fill” and the scene is set to 960x320px with 100% set for both width and vertical.

I need the box to keep contsrained when resizing the browser.

Download the hype here:

http://master.includingme.net/test/scale_test.hype.zip

Any help appreciated.

There isn’t anything as shrink to fill.
Shrink to fit means it remains the ratio and fits to the width or height of the image.
Have you tried expand to fill?

Yes I’ve tried “expand to fill”, it expands the height to a huge size and crops the box on the right. :frowning:

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

Its better but it doesn’t work with different sized layouts in hype. And being in an iframe it takes a performance hit. I fixed the issue by using css to size it by padding. I followed the answer on this forum: http://stackoverflow.com/questions/12121090/responsively-change-div-size-keeping-aspect-ratio

Hope that helps someone.

Cheers.

Perfect! I know yours is an old post but it’s still a very welcome find nonetheless as this has been driving me quietly nuts! Huge thanks for the excellent solution :smile:

1 Like

I don’t understand how to use this code. But I really would like to intersperse hype animations among a stack of images on a page and the big annoying space makes it impossible. Help would be appreciated. Thanks.

you may provide a link ... as you did not stand out anything about the way you try to embed hypecontent

Thanks for taking the time to respond to my question! I just discovered the problem goes away when I build a page with the Wordpress editor and not with elementor. So not a Hype problem.

1 Like

I spoke too soon! The problem persists on mobile no matter what editor I use. So it is a Hype issue.
I tried the code for AutoHeight, but it only works for one hype animation on a page at a time.
So I tried experimenting with various settings. They are shown in screengrabs that I incorporated into the Hype animations:
Test #1 https://pointsintime.com/?page_id=6229
Test #2 https://pointsintime.com/?page_id=6282

regarding your test #1 it seems your condition is to do a proportional scale regarding a layoutdimension.
so for that usecase just paste the code here to your documents head (meaning the wrapper-document, not the hypedocument) ...

I put the code on the page and the annoying gap disappeared! Thank you.
However, the hype anims on mobile don't scale down to the width of the page. I tried changing the viewport width to device width, but that brought back the gap.
(I also don't understand why the hype anims are shifted to the right in the desktop version.)

you've got to distinguish:
1.) the script: it simply sets proportional dimensions to the hypedocument regarding the dimension of the displayed layout and the provided space. nothing more, nothing less ...
2.) the responsive/flexible settings you make in the hypedocument to fill the provided space to your needs. this seems to be your problem here ... I'd really advice to share a hypedoc and ask @jonathan for detailed help in case of uncertainty