Hype embed disappears when scale turned on

Responsive
21

Thanks Daniel!
I tried that but, it did not does not work… It does keep the animation 600px tall but cuts off all the animation if scaled down. - Not showing the content to right. My animation is 1130px wide and 600px tall - so when viewed on mobile it shows only the first 300px.

I really don’t want to have to build responsive layouts each time. Hype seems awesome but, I think there should be an easy way to embed in responsive Wordpress themes. Any tutorials on that?

What viewport should be selected? Document Width - Device Width?
Thanks!!

22

I think what I did to resolve at least part of your issue was to group everything as one group, then to that group use the settings below. This I believe is what allowed me to have it scale like a single image.

23

so your hypedocument has a fix ratio: 1130/600 = 1,88.
this means currHypeParentContainerWidth / ratio is equal the needed height.

add this (untested!) script to your wordpresssite:

window.onload = window.onresize = function()
{
var ratio = 1130/600;
var hypeParentContainer = document.getElementById('theIdOfYourhypeContainerParentNode');
var currWidth = hypeParentContainer.scrollWidth;
var newHeight = currWidth / ratio;
hypeParentContainer.style.height = newHeight + 'px';    
}
24

Thanks for the ideas but I still am having no luck?? So my contain is resizing using the code. Now I see in Hype It wont let me select Shrink to Fit?? Is there some other setting that needs done to get that to work?
Please Hype build a “Export To Wordpress Responsive” into the software!
Thanks!

25

please create a hypefile with width and height responsive.
provide the ration that should be used.
embed it in your wordpresspage.
DON’T add my provided script

SHOW us a link …

then i’ll have a look :slight_smile:

your explanation is to unspecific to provide help

26

Here is the link with your code it does rescale. Without nothing will show up. I think the problem now is it wont let me select ‘Shrink to Fit’. Any ideas how to get it so I can select Shrink to fit?

*I have 100% selected on width and height

27

so the script does its job … for the hype problem it’ll be best to provide the file … :slight_smile:

edit: script should be attached to the element ‘hypewrapper’ and not to the hypecontainer itsself …

28

Attached Hype. Ok I changed the script to reference hypewrapper. Thanks!

RWK.hype.zip (891.8 KB)

29

this setting for the group should work

have a nice day :slight_smile:

30

I have tried everything it wont let me select anything there on that Flexible Layout - Scale Behavior. I have it all grouped. I have 100% selected … It wont let me? Is something else stopping that?

31

You have to activate The arrows in The Center. Have a Look at The Screenshot above

32

Can I suggest a less javascripty option to dynamically setting the height of a wrapper (just for future reference)? I adapted it from a Chris Coyier technique found here (2nd chunk on page): https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php

#hypeWrapper {
        position: relative;
        padding-bottom: 66.66%; /*from the ratio of 600:400*/
        height: 0;
    }
    
    #demo_hype_container {
        position: absolute !important;
    }
1 Like
33

This is a great technique – thanks for sharing! This is similar to this technique: http://embedresponsively.com

34

It’s nice to see workarounds for this issue, but I thought I would put together a video to help demonstrate the best practices / ‘no code’ method to create a responsive Tumult Hype document for Wordpress. This takes you from a non-responsive document all the way to embedding a Wordpress document on a page:

1 Like
35

you are a star! I had the same problem and now it’s fixed!

1 Like