Flexible Height Wordpress

Exporting & Previewing
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
26

in my example too¿

btw a small preloader waiting for the dom to be created may solve all your issues ...

27

Hi Hans-Gerd, Thanks again for your help. I checked Document > “Show loading indicator” and then tried a simple custom preloader, but neither had the desired effect (the container always starts at full height when the width is smaller than 1200px).

By the way, the darn preloader (aka “loading indicator”) does not stay centered when the animation starts at a smaller width. I’m sure I can find a fix and would ultimately use a custom preloader, but don’t understand why this has to be so difficult. I’m really on the fence with Hype. I LOVE this app, but geez, all this just to make the stage responsive? I hope it’s addressed in v4 (if not sooner). Thanks again.

28

hi all,

I don’t know if this is the right thread. I am lost now in the wilderness. Is there an easy to to just get Hype working on wordpress.

I am not a coder and probably went down the wrong route with hype as there has been too many learning curves. Weeks later, i am trying to embed into wordpress - which I got working once, and not forgot which learning curve to review. I’ve finally got the anim working as I want it (ish) and can’t post it anymore.

Obviously wordpress is a big need for many users, is there a checklist? I can’t even work out what questions to ask anymore, where to put the code and which bit of the div the iframe the…

And the plugin didn’t work either. A working plugin would be a great idea.
Much Thanks in advance

Yours lost, tired, frustrated.
Rob

29

Hi ,
I am not sure which doc goes here:

src="Login | HSTS Redirection Community"
is it the html that's exported or the .js file that is linked from hyperesources folder?

Also where exactly does this script/html get placed ?
I think this may be explained somewhere, even below but I am not able to keep track - or may I have other issues!!!

Thanks

30

dear @rob0,

without any exact information … it’ll be hard to help

post a hypefile, post a link … and there may be chance :slight_smile:

31

Here's the best method for embedding, scroll down to the responsive section:

32

Thanks for you reply Hans-Gerd
Am not really sure what to send (publicly).

The Hype anim works ok when exported and opened up on my computer fine.
But its when I try to embed to wordpress - nada . Just a big gap.

Can I send something as a private link?

Thanks again consideration
Rob

33

@rob0 -> @Daniel will surely have look at your private link …

as it is a forum i do not prefer private help, because a forum is not a helpdesk but should provide helpful information to any user …

just recreate and simplify your hypefile to provide an example …

34

Thanks for this Daniel. Am working through. Have been through this before but it seems like I need to go through with a finetooth - this is the ‘checklist’ am thinking of maybe.
…

35

Thanks Hans-Gerd, I do understand. I am working through the link Daniel sent first.
Please forgive my apparent negativity, it’s frustration-flavoured. Problem is Hype is such a GREAT TOOL, it leads to false sense of security. You can get started quickly and excited about possibilities then…get stuck!

36

Ok, so after some sleep!! I seem to have found the problem. The URL was wrong!! This was soooo simple, not Hype, not W3Schools, not even my members plugin etc.

I’ll share my Diagnostics - in case this might be useful to anyone working in WordPress (or using Cyberduck and other FTP programs).

Daniel, thanks for your methodical and supportive videos. They are very calming!! Learning is certainly a spiral not a curve. I had used to that page before but earlier in my learning journey, though new things stood out on reviewing it. It is like a checklist for WP embedding if followed methodically.

To diagnose,
I reviewed previous versions of my Hype doc where embed worked. (Luckily I had not deleted from the server and they still worked, so that was useful to know it was not some fundamental set-up problem)

  • Inspired by Hans’ suggestion, I started a new clean, simple, single layout, single scene Hype doc but tried embedding it on my site (didn’t work, good to know)

  • Drawn from Daniel’s video, I noticed I was missing / ignoring a crucial step!! That is, pasting the hypegenerated…js file into the browser - to see if it’s there.

Now here was the clue and the real problem. When I pasted the URL, WordPress would kick me out and redirect me back to my login page constantly! [ so I was looking at cookies, members plugin and all sort of unnecessaries…! ].
NOTE: I was thrown off the scent here because of my WP set-up(?), no 404 page or anything to say ‘page/file not found’ - just redirected back to login/front page.

  • I had also tried using an iframe and linking directly to the html and each time it would send me back to login (or front page, after disabling members plugin for a moment). It was appearing to me that I was not able to link to anything from my uploads folder.

  • Eventually I realised i was using THE WRONG URL missing ‘wp-content/uploads…’. This is because I was using the URL copied from the ftp program (Cyberduck) I had not configured it properly so it was missing part of the URL. This meant I was using these dodgy URLs everywhere, including my pasted ’ div…src="…" div ’ code for the embed.

  • Now, while I am quite ashamed at my ignorance, I will reiterate that it would be nice if WP embeds from Hype were simpler. Using the ftp url was part of trying to simplify!! (ironically) By my frustration point I have been on such a journey with all this these last couple of weeks, just about to ‘publish’ and it didn’t work!! I was so bogged down in ratioscale, screen sizes, and all sorts, I could not see this basic error! Not even w3 but www101!

Thanks again for your supportive responses, even if they amounted to, ‘read the bl**dy docs!’ :wink:
====>
Now, a luta continua…
I have to work out why half my mouseovers no longer work. I’m sure it must be something symbol ! :grimacing: