Responsive canvas when embeding


(Alice) #1

I have tried many things but nothing worked so far. There must be a solution somewhere on this forum if you could help to find it please?
I need to create a fully responsive HYPE canvas. Not just flexible layout, but actually the whole document to scale up/down with the window.

Currently with flexible layout I can scale width+height but I can’t embed this version and this is not exactly what I need.
I need to scale width to 100% and then the height of the HYPE container to be proportionally scaled up/down.
I have created a demo document where the image scales up but then the height of the canvas stays the same.

I can’t scale height to 100%. I need the height of the document to be adjusted proportionally so that I can see a full image when embedding to a page.
Could anyone point me to the right direction?

Responsive canvas.zip (360.6 KB)


(Hans-Gerd Claßen) #2

(Alice) #3

Thank you. I found that topic but it didn’t work. I must have done something wrong.
Should I still make the canvas scalable?
Should I just scale width?
And also, should I see the effect only if I am embedding?
Sorry for all those questions but I seriously tried that solution before and got nowhere :frowning:


(Hans-Gerd Claßen) #4

xyz.hype.zip (299.2 KB)


(Alice) #5

Thanks. Unfortunately this is exactly what I tried and it doesn’t work when embedding on the page. It simply returns a blank canvas. I came to a conclusion that you can’t embed a HYPE document if it is set to be scalable on both width and height.
It does work as a standalone page but I need to embed it.


#6

We need to see where you are embedding to be more specific with a response. There are so many variables that can effect how a document reacts. As you have seen, it works but not in the environment it is intended for. So, we need to see that environment.

Quite often when you see a “blank canvas” it is because the containing element does not have a height to it so when the document tries to scale to 100% it sets the height as 0px as 100% of an undeterminable height can only be 0.

I stress again though, without having something to see we can only speculate.


(Alice) #7

Thank you! You were right, it didn’t pick up the height!
All is working now


(Hans-Gerd Claßen) #8

setting a fixed height to a parent element when embedding will not solve your problem as you requested a proportionally scale (w/h) depending on the width that is avaiable. the provided script sets a absolute height on HypeLayoutRequest (which includes firing onresize) so it’ll never be a 0px-height on an responsive document.

////////////////////////////

@DBear is right, without any example of what you are doing it’s hard to help. it’s always a guessing … in this case i’d say that you missed including the script when embedding …

/////////////////////

in your last post you’re telling us, that you solved your problem. well nice to know. But please keep in mind that this is a forum which aim it is to provide help. Not only to the concrete request, but also for people visiting your post when searching to solve there own problem … they won’t get far here. so please consider to state out a solution when your equest was solved.

///////////////////////////////////

another nice hack and simple solution for scaling your full responsive hypedocument proportionally on embed:

<div style="position: relative;  width: 100%;  height: 0;  padding-bottom: 130%; overflow: hidden;">

<--your hypedocument-->;
   
</div> 

whereas the padding-bottom should be scenewidth/sceneheight*100

sunny day :slight_smile:


(Rick) #9

Oh Hans, dat hack! :kissing_heart::kissing_heart:
You’re a lifesaver!:heart_eyes:
Thank you!