Scaling the width of a hype document with proportional height (I'm losing my mind with Hype...)

(Jay Cooper) #1

Hi guys,

I’ve read just about every forum post I can find and I just can not for the life of me figure out whats going on with Hype. I’ll keep this short and sweet with what I want to do. I really appreciate any help I can get.

I want to create a Hype document, which will be embedded in an iFrame on a full width style site.

I want to make it responsive as per the Africa example page.

I want it to remain the full width of the iframe, but the height I want scaled proportionally.

Currently when the object reaches 100% height it stops scaling the width.

I want the height to go over the page, and thus, the user will scroll past it, but the width remain full width.

I thought this would be a basic feature, scale it to width but constrain portions, but it always seems to have an excuse to limit it by the height as well or it scales just the width but does not constrain the proportions.

Thanks in advance, whoever can answer this for me gets a virtual cookie because I am at the end of my tether.

Scale proportional based on width
(Hans-Gerd Claßen) #2

a proportionally scaling involves both width and height. so you can not scale one or the other proportionally (to what :wink: )
work with layouts to have different heights for different widths. width can have responsive setting to adapt any width.
if you want to insert a fully responsive document have a search in the forum. there are examples related to wp-sites …

btw: examplefiles are often better then only descriptions which end up being unclear for others

(Jay Cooper) #3

Hi h_classen thanks very much for your response. I am looking to proportionally scale, but the problem is if it hits 100% height before 100% width it stops scaling. I want it to scale 100% width, and ignore the window height if that makes sense.

I still want it to proportionally scale the height, but just have it move off the page vertically if it has to (currently it stops at 100% height).

I’ve extensively searched the forums and looked at example files and I am truly lost with it, not just being lazy.

(Hans-Gerd Claßen) #4

this is not doable with defaults (call me fool if it is doable :wink: )

my solution:
file: (26.9 KB)

it may be somehow over the top -> thaught to complecated …

(Jay Cooper) #5


I think you may have just solved my problem. That’s perfect. I’ll do media queries with negative padding based on the document height/width ratio and I reckon it will fit in nicely.

Thanks so much for the support.

(Bernd Maier-Leppla) #6

Thank you very much, h_classen, this works for me (I’m no coder) in your example. On ONE page. I changed the stage to 1024 by 768 took the javascript implemented it in a new file but it doesn’t work. It only works with your example file when I copy new footage into your scaleWrapper. And when I’m adding a second page, the second page doesn’t work either. What did I forget? I use the javascript code, I use the scaleWrapper and have set the Scale to 100% as in your example.
Would be extremely nice if you could show me my mistake!

(Hans-Gerd Claßen) #7

the example was not supposed to work on multiple scenes as it works with a unique id for the scaleWrappper.
for your usage it’d need a few changes to work with a class instead of an id … but i’ve got no time at the moment may be next days or someone else may …

(Bernd Maier-Leppla) #8

Thank you for your fast reply! It’s not urgent.

(Hans-Gerd Claßen) #9

just swap

    var scene = document.querySelector('#'+hypeDocument.documentId()+' > .HYPE_scene[style*="block"]');
    var scaleWrapper = scene.querySelector('.scaleWrapper');

with the id-line

be sure to set the classes within inspector …

nice day :slight_smile:

(Bernd Maier-Leppla) #10

Thanks. I tried it, it works on the first page, but not on the following pages. Maybe, I’m doing it wrong. I’ll look into it again in the afternoon. But thank you very much again! Set the classes within the inspector: you mean for each new page a wrapper and the wrapper set with the script? the ID will be set automatically? Or must I take a “new” class for each page?

(Hans-Gerd Claßen) #11

the scaleWrapper-element needs to have a class which is set in the elementinspector (145.7 KB)

(Bernd Maier-Leppla) #12

Well, I thought about it, but now it’s clear. Thank you very much!

(Jay Cooper) #13

Hi guys,

Me again. Thanks for the above support. I’m wondering if while I’ve been away this has been added as a built in feature?

It was a fairly simple thing to do in Edge Animate. One of the defaults from memory.


(Jonathan Deutsch) #14

The instructions above are still current; Hype 3.6 does not have new features for this.