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.
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?
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.
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>
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
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.
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.
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 #1https://pointsintime.com/?page_id=6229
Test #2https://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