Possible to make zoom-scaled content group stick to the bottom of the page?

[Raleigh (Raleigh Green)]

Hello and Happy New Years Hype friends!

I am building a responsive website with Hype.

I'm hoping to place all of the website materials into a single group that is pinned to the top and sides with content horizontally and vertically sized "Shrink to fit". With this setup, the site is nice and responsive (see attached example Hype file). Attach Zoom-scaled group to footer.hype.zip (17.5 KB)

However, with this setup, the content in the main group drastically shrinks and expands away from the footer. A big gap appears between the bottom of the content and the bottom of the web page when the browser window narrows.

Is there a way to attach the footer (or just the bottom of the page) to the bottom of the content so that when the site stretches upon browser resizing, the gap no longer appears? is this just not possible with the type of layout I want to use?

I've looked through all of the "footer" articles in the forum and tried to adapt some of the solutions that have been posted from the members. But none of those "sticky footer" solutions address the type of flexible layout I'm hoping to use. It seems like a different problem entirely.

Can this be done?
Any thoughts would be greatly appreciated!

[h_classen (Hans-Gerd Claßen)]

if the footer should always be at the end of the content (which expands) why not just include it in the group (though not necessary for the approach ...)¿ ... and then adjust the scene/doc-heightresponsiveDoc.hype.zip (18.0 KB)

[Raleigh (Raleigh Green)]

@h_classen, thank you so much.

This is EXACTLY the type of behavior I was looking for!

I was able to take your code and settings and easily implement it into my project. (I modified the demo project to reflect the three layouts in my project to give a more accurate picture of the totality of what I'm working with: responsiveDoc.2.hype.zip (32.3 KB)

So, when I implemented your changes, the issue I originally posted about got (wonderfully) solved!

However, in the process of adding the solution, two other unexpected issues materialized:

1. There is a good amount of flashing that occurs between layout switching whenever the browser resizes. I looked into this in the Hype Forums. I tried a number of suggestions, including clearing my browser cache. One idea was to make images and assets smaller. However, the flashing even shows up with no images at all, just rectangle elements. I even tried making the entire content group into a persistent symbol in the hopes of it floating above the content when switching layout. The layout flashes seem to still happen even when the content is symbols.

2. The other issue is something I noticed when testing using Hype Reflect: When first loading the site on a tablet or iPhone, it would load great. However, if the device was rotated, the layout would switch (as expected), but the layout would seem to load at the wrong zoom level. In the new device orientation, I could refresh the browser or do a pinch in order to get the zoom to snap into place correctly. But if I rotated the device again, the same zoom issue would persist (incorrect zoom level in the new layout). Not only that, when I rotated the device back, the layout was not full scrollable (the bottom gets blocked out and the footer, plus the content directly above it, is not visible). When testing in Hype Reflect, loading the project in Safari exhibited the same incorrect zoom / layout issues.

Do you have any thought on whether these two issues can be mitigated?
Thanks again Hans, I so appreciate your time, expertise, and incredibly helpful feedback!

[Raleigh (Raleigh Green)]

Hi Hans,

I've been working with this more and just wanted to quickly follow up.
Can I share with you the actual Hype project I'm working with?
The Hype file can be downloaded here.

This is not to have you dig into a complicated Hype project.
But rather, so that you can just quickly preview it.
I'm thinking this is the easiest way for you to see exactly what sort of behavior I'm aiming to accomplish.

If you preview the Hype project in a browser, because of your help, the mobile and tablet views are all set and working great. The desktop view is almost perfect, but with one glaring issue: the footer is no longer stuck to the bottom of the window. This is ironic, considering that was the issue you helped me solve with the mobile and tablet view.

It seems to me the issue is: for my desktop layout, I don't want to have the content zoomed (I want a few horizontal rectangle graphical elements to stretch all the way to the edges, but the main content should have a max-width). And it seems the only way to get the content to stick to the bottom on any of these layouts is to have zoom enabled.

It seems the bottom line is this: is there a way to keep your changes in place for my mobile and tablet layouts, but at the same time fix the desktop layout so that the content sticks to the bottom of the browser window (as it does on mobile and tablet) even though zoom is not enabled?

[h_classen (Hans-Gerd Claßen)]

@Raleigh

It seems the bottom line is this: is there a way to keep your changes in place for my mobile and tablet layouts, but at the same time fix the desktop layout

@MaxZieb implemented this: Creating a Flexible Tumult Hype Document within a DIV with no set 'height'

[Raleigh (Raleigh Green)]

Hi Hans,

Thank you so much for this!
I was able to switch a few things around and take the installAutoHeightIfNecessary() function from @MaxZieb's awesome autoHeight.hype doc and implement it into my project.

That solved my desktop layout issue and my all three of my layouts are now working great! Thank you again

The only odd thing I'm noticing is: when I preview on tablet and I go from portrait then rotate to landscape and then rotate back to portrait view, the edges don't snap back as they should. It appears zoomed smaller. However, a browser refresh snaps the layout back. So, all in all I think I can deal with that.

I'm still getting the flashing in between layouts, but the other layout issues (with the exception of the one I mentioned above) have all been solved! I think this is now workable enough to call this issue taken care of.

I must say though, I sure feel like this should have been easier.
I wonder if there is an easy way to add this sort of functionality as a Hype feature request?

Still, I just wanted to say thanks again Hans, this has been super helpful not only for this project, but future projects as well! I know I'll be using these tricks again.

Happy New Years and all the best to you and yours!

[h_classen (Hans-Gerd Claßen)]

@Raleigh

I'm still getting the flashing in between layouts,

OnLayoutRequest the height for the scene and document are adjusted to fit your needs. Hype is then forced to relayout the scene and this'll cause the called flash ... you may fade in the scene so it won't appear

////////

Hype's got two possible sceneheights: an absolute height in pixels or the viewportheight ... yes of course you could start a featurerequest for more flexibility, but it's difficult to accomplish cause Hypes functionality relies on absolute positionings regarding its main aim: animation.

//////

good luck for your project! looks interesting

[Raleigh (Raleigh Green)]

Got it. Thanks Hans!