Flexible Height Wordpress

Exporting & Previewing
6

should work … so this ends up that you should post some data :slight_smile:

7

maybe I don’t know how to use it then I’m not a coder, and I have taken the code put in place and it doesn’t work for me, this is what I get:
http://www.dazzlecreative.co.uk/clesse-NEW-design/1a-rev-banner/
user: View
Pass: View
the above access grants no privilages to the website at all.

8

and this is the page code:

Content up here.
<!-- 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="http://www.dazzlecreative.co.uk/clesse-NEW-design/clesse-slider8.html" 
height="630" width="100%" frameborder="0" scrolling="no"></iframe>
Another div with some text.
9

Ok, I’ve updated a little bit of the code, and I think it seems to work, apart from when the page initially loads, the iframe is larger in height than the content of the iframe?

10

Me again… and this link shows that the iframe doesn’t re-size to the view port / new layout size, it just stays in proportion to the original layout size chosen, and still shows the iframe larger at the bottom on initial page load:

http://www.dazzlecreative.co.uk/clesse-NEW-design/layouts-breakpoints/

Help much appreciated.

11

2 posts were split to a new topic: Creating a Flexible Tumult Hype Document within a DIV with no set ‘height’

12

OOOOhhh my god! works perfectly, I can’t thank you enough I spent days looking for a solution!:
http://www.dazzlecreative.co.uk/clesse-NEW-design/working/

hopefully it will help others out to.
Thanks!

13

fine :slight_smile:

14

Hi there Daniel, I’m trying to do the same thing as darrenlmo, using your script (but without an iFrame). For some reason, the height still does not scale proportionately. Would you mind taking a look? https://wpsimplifyd.staging.wpengine.com/

1 Like
15

your hypedocumentelement scales, but the the sceneelement does not …

i guess two solutions:

  1. group all element on the scene and scale the group including childs proportionally from the top
  2. keep your setup and scale the sceneelement accordingly to the hypeelement (you should use ’ hypeDocument.relayoutIfNecessary();’ after resizing)

i’m not quite clear where gap at the top comes from … which may be a wrong flexible height setting. you may share the hypedoc …

16

Hi Hans-Gerd,

Thanks for your kind reply. It was very helpful. I tried both solutions and ultimately, #1 worked. Note: I wasn’t quite sure where to place “hypeDocument.relayoutIfNecessary();” (e.g., inside of the hype doc > Scene > On Scene Load or within the “html” file (aka footer.php file since I’m working with WordPress).

By looking at the Metrics > Placement for my Timeline Group (of several Groups) I could see that my bounding box was oddly sized and positioned. To clarify, even though the Scene Size was set to a Width of 1200px (with “Scale” checked) and a Height of 450px (with “Scale” NOT checked), my Main Group was only about 400px tall x 700px wide; and vertically and horizontally centered (i.e., the “Left” and “Top” Placement for my Group was incorrect).

So, I decided to blow everything up and basically start over-- with a single Rectangle contained within a Group-- both set to 1200px x 450px, and with the original JS (https://gist.github.com/themorgantown/11070756) that Daniel posted.

Moving forward, I’ll begin to add the other objects and groups and test more frequently.

Thanks again,

Tommy

1 Like
17

You have to change the transform origins in the container element to 0,0 not 50%,50% which is their default

18

Ahh. Good to know. Thanks DBear!

19

Hi there,

The new version of my animation now scales proportionately when the viewport width is reduced (on window.onresize). However, when the page is reloaded (at the smaller size), the stage remains at full height. So, I added window.onload to the script… which is much better, but still not ideal. That’s because the stage starts at its full-height when the page is reloaded. But after the page is reloaded, everything looks great (i.e., the full-height stage background is no longer visible).

Is there a way to prevent the stage from initially appearing at full-height when the page is reloaded at smaller sizes? I’d rather not see it at all.

Thanks again,

Tommy

20

Apparently, I’ll have to put Hype 3 aside; then wait and hope that v4 allows for truly responsive (and not just adaptive) behavior. I’ve tried everything I could find and truly appreciate all the help I received, but I just can’t get this to work in a satisfactory way. With or without WordPress.

21

great to let us know … :clap:

resize the wrappingcontainers height, its setting overflow hidden, onload and -resize should prevent the the following content from jumping on reload … if that is what you meant though …

22

Thanks Hans-Gerd-- I appreciate the reply.

Yes, that’s exactly right. I’m trying to avoid having the content underneath the animation jump up on reload (particularly when the animation/browser viewport is less than 1200px wide). Or, put another way, I want the animation height to scale proportionately relative to the width of the animation (without having to use a bunch of media queries).

If I understood correctly, I tried the suggestion you kindly provided (along with other variations) but it didn’t work unfortunately. If I set the height of the wrapping container (via inline CSS), won’t it still do the same thing? Or, were you referring to the javascript?

Ideally, it shouldn’t be this difficult to make this happen. But I desperately want to bring Hype into my workflow sooner, rather than later. I’m willing to do whatever is necessary (and ultimately create a tutorial of my own). I just can’t seem to make it work.

23

please check if this approach is good enough …
http://www.aachener-zeitung.de/zva/karlo/Z_stuff/initialResize/

i’m not sure …

setup:

  <body>
	<!-- copy these lines to your document: -->
<div id="wrapper" style="overflow:hidden; ">
	<div id="initialresize_hype_container" style="margin:auto;position:relative;width:100%;height:100%;overflow:hidden;">
		<script type="text/javascript" charset="utf-8" src="initialResize.hyperesources/initialresize_hype_generated_script.js?16125"></script>
	</div>
    </div>
<div>Some following content ...</div>
	<script type="text/javascript">
 
window.onload = window.onresize = function(event) {
 
	// Input the Width and the Height of your original document. Just Numbers!
	var ratioScale = 600 / 250;
	 
	// get the width of the enclosing Div for the Hype element
	var currentWidth = document.getElementById('wrapper').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 newHeight = currentWidth / ratioScale;
	 
	// set the iframe to have the correct height.
	document.getElementById('wrapper').style.height = newHeight + "px";
    
};</script>
  </body>
3 Likes
24

Hmm. That may work. As soon as I have a chance I will incorporate this script into a non-WordPress version with my animation and build from there. I will let you know how it goes. Thank you SO much Hans-Gerd! I really appreciate it.

25

Well-- it looks like that worked! The only CSS attributes I had to add to #wrapper were:

  • max-height: 450px; (otherwise, the height of the wrapper was too tall at widths greater than 1200px)
  • max-width: 1200px; (otherwise, I could not center the animation)
  • margin: 0 auto;

Thank you SO much for your patience and assistance Hans-Gerd!

UPDATE: Actually, the container/wrapper still starts at full-height during reload (when the width is less than 1200px). However, the animation doesn’t. So, it’s less noticeable. I added background: #fff; to the container (so that it matches the page background). I still have a few minor aesthetic issues, but I believe I can work through those.

1 Like