Center/Scale Hype 100% in a Bootstrap div that expands with adjacent text

There are several posts here about centering Hype vertically, but they rely on the container div to be a fixed height. I don’t want any hardwired heights to be assigned.

I have two columns in Bootstrap:
Column 1: Text
Column 2: Hype (Scaled width and height)

If the text in column 1 increases or decreases, I want the Hype animation to fill its column in response. But I can only get it to work with a specifically assigned height in the container div. I want height to be 100% but Hype disappears if I do that.

center-hype.zip (88.8 KB)

but this does not make sense for every windowwidth. for example if there is a breakpoint that does only work with columnwidth equal to 100% ...

center-hype-hans.zip (91.7 KB)

so this adapts the height of the hypedocument corresponding to the textcolumn when within 2-columns-layout and sets a proportional height corresponding to the hypelayout when in 1-column-layout.
assuming that the breakpoint for this columschange will be 960px, which is provided in the script.
to get the corresponding column, that the hypedocument should match to, it is necessary to add hypes id as a class to the textcolumn …

2 Likes

Hans-Gerd, thank you. I didn’t realize this request would be so involved! Yes, you understood my intentions exactly, even though I didn’t explain the behavior when the column is 100% wide. I wish I could track with the logic in your javascript, but I think it requires more of an understanding of Hype’s structure. Basically you have waved a magic wand. :slight_smile:

though it's been a guess and as always varying circumstances may make it break ...