Hype Auto Height

Extension Project
1

AutoHeight_2
AutoHeight_21200×600 200 KB

Here is an extension based on @h_classen great work/code on proportional scaling and the recurring need for proportional scaling in Hype. I used a Unicode character (:arrow_up_down:) and turned the logic on its head. Meaning for scenes/layouts you want it to work you add the character. The setup and condition can be easily removed/tweak or enabled for all scenes if you don't like that logic. Another thing I did is to move the code into the Hype document itself, so it should work out-of-the-box in settings, this approach is most needed like WordPress.

Example files

Compressed version:
autoHeight.hype.zip (38,8 KB)

Uncompressed version:
Including comments and a layout-based switching example (user requested)
autoHeightNotCompressed.hype.zip (56,1 KB)

Changing the rule to determine if proportional layout should be applied (optional)

As mentioned, you can use another icon if you don't like the one I set. The rule determining if proportional scaling should be applied is defined in the function installAutoHeightIfNecessary. In there you will find a test of sorts and if the test return true it enables proportional scaling. Look for this code:

// Your conditions to enable autoHeight 
hypeDocument.enableAutoHeight = function(hypeDocument, element, event){
	//  Rule goes here
}

Here are some alternative rules

To change the icon to let's say ↧ just replace the existing rule with the following instead:

// return true to enable: currently its scenes or layouts containing (↧)
return hypeDocument.currentSceneName().includes('↧') || hypeDocument.currentLayoutName().includes('↧');

And while we are at it… here is a replacement to always enable it:

// return true to enable
return true;

And finally a replacement to enable in a reverse logic. So, scenes or layouts containing the icon will not be resizing proportionally, but the rest will:

// return false to disable: currently its scenes or layouts containing (✖️)
return !(hypeDocument.currentSceneName().includes('✖️') || hypeDocument.currentLayoutName().includes('✖️'));

Further development and hints

Minimal height per scene and layout could also be defined (CSS or JS) or a version that gets loaded instead of included in Hype. Let me know if anybody would need that feature as well, and I'll gladly create an example. Also make sure to check out Hype Cookbook for more useful links and insights.

10 Likes
2

@MaxZieb that's pretty much cool :slight_smile:

For later readers:
The extended example in the post above should easily enable a proportional resizing of the Hype-document on a scene/Layout-basis when included in a (e.G.) wordpresssite using Hypes wordpress-plugin as the necessary code is moved from the head to the hypedocument.

3 Likes
3

This is super helpful, and it's doubly-awesome that it doesn't need to be enabled in all scenes for it to work, just the first one...

1 Like
4

I recreated your use case and it works for me. As I wanted to avoid code in Head HTML make sure that the "installAutoHeightIfNecessary" is called on the first scene. If you don't mind you can also just relocated the code to Head HTML.

My test:
autoHeight.hype.zip (38,8 KB)

5

Hey,
thanks for getting back to me so quickly.
Your file uses an instant transition. That works. However, in my case it needs to be Push (bottom to top). If I use that, then the scrollbars disappear and only re-appear if the window is resized.
Your file with a push transition: autoHeight.hype.zip (34.9 KB)

6

Here is a revised version. I didn't replace the above download with it as it needs to be tested, so feedback is welcome if these changes fixes it for your demands (I unchecked 100% height on auto height scenes for now with this revised approach).

autoHeight-revised.hype.zip (40,3 KB)

5 Likes
7

Yay. It works. Scrollbars remain visible now.
Huge Thanks Max!

2 Likes
8

Now as an extension format on GitHub:

3 Likes