Hi all, hoping someone can finally help me, I’ve seen loads of topics / chats about this and no definitive answer that I’ve found anyway. I’m not a coder which is why I use Hype (which is great) so I would need to see the full code / example to any solution if there is one…
I have a hero banner that I setting to 2000px wide and it is around 600px high, I need the height to adjust automatically (scaling) when the browser windo changes width.
I know how to use all the flexible layout options and the breakpoints with different sized layouts, and not selecting the hight scale as that desroies the height which is why nothing displays in wordpress etc etc
My problem is I’ve got a Metro style grid banner square image touching the edge of the screen (no background image to make the thing look all nice) example attached:
All the options I do with hype settings leave a big gap at the bottom of the screen pushing page content down out of place, the hypecontainer… I need this to stay with the height of the actual content of the banner so it all scales perfectly with browser width - I also want to use a couple of different layouts with breakpoints for mobile and tablet views.
Hope thats all explained ok, look forward to a solution - its on Wordpress website by the way, thanks.
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.
<!-- 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>
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?
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:
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/
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.
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.
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.
