Annoying space below hype when scaled 100%


(BIlly) #1

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.


(james koh) #2

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?


(BIlly) #3

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


#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>

Extra space at the bottom of a parallax type webpage
(BIlly) #5

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.


(Fran Brennan) #6

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: