I'm trying to get an OAM to resize to a small space defined by a DIV in a Wordpress website. If I click the Scale checkboxes the resulting OAM will not display on my website. If I uncheck those checkboxes the OAM does display.
hypes responsive-height-setting should work as long as the wrapping element has an absolute height.
how do you setup the "defined space"? try sthg. like 20px, 10em, 50vh ... just no percentage and not no setting
Thanks for your reply. I still don't see anything displayed within my DIV. Here's what I have coded into my Wordpress site:
The above works fine if I'm displaying a non-flexible site. I think the problem is in creating the OAM. If, when creating the OAM, I click the check boxes in the Scene inspector for scaling, the resultant OAM doesn't display. If I don't check those boxes and use a defined height-width, the OAM does display.
the element that contains your height-responsive hypedocument needs a explicit height ... as mentioned above ... or you set a height to the embed.
you may provide a link ...
and here Daniels guide: Tumult Hype Animations Wordpress Plugin
Thanks again for your help. The Div does have an explicit height but obviously HTML doesn't come across in the forum. Here it is with the angle brackets partly removed.
The top div contains a normal non-flexible animation which shows properly. The second one contains an flexible animation and it doesn't show. The animations are identical except that in the flexible one I've checked the Scale checkboxes in the Scene inspector.
div style="width:800px; height:500px; overflow:hidden; border:solid thin gray;">[hypeanimations_anim id="23"]/div
div style="width: 800px; height:500px; border:solid thin red;">[hypeanimations_anim id="28"]</div
You can see these at this page here
the div that holds the second hypedoc has got a height of 0. so the hypedoc will fill this Zero-height.
and have you additionally read the section " Responsive Document Tips" in @Daniels post?
This is what I'm doing:
1- in a single scene Hype doc I click on the scene, then go to the Inspector and, under Scene Size, I check Scale 100% for height only. I do not check the other box.
2--I export as an OAM Widget, upload the widget and put it on a vanilla HTML Wordpress page on a site where ALL the plugins have been disabled except the Hype Animations plug in which I use to upload the file.
That's it. I look at the page. The Hype doc shows up but doesn't resize.
Am I missing something? Probably because if there's a way to do things wrong I'll do it.
You can see my efforts at Testingg – Short Stories
Appreciate any help without a lot of code in it as I am extremely stupid and don't understand anything unless explained at a four-year-old level.
If you don't check the width scaling checkbox, then the responsiveness will not detect changes in your browser's (or device's) width. The advice I give on the 'Responsive Tips' section of the plugin's help page is that you never check the 'height' scale checkbox, but find a way to use 'width' scaling instead.
Here's what I recommend: Don't use the 'height' scale checkbox, but do use the 'width' scale checkbox (100%). Next, add your content to a group, and setup flexible layout properties on that group.
Or, you could make a narrow 'responsive layout' and a wide screen layout, so when someone makes their browser narrower than, say 700px, it will switch to the narrower layout.
I misquoted myself. I did check the width box and left the height box unchecked. As per your recommendation I created a group and, in the Metrics Inspector I checked all the pins on Flexible layout.
This produces a display that fills the screen but does not scale when I resize the window.
According to the manual the scale behavior select box is only available if both width and height boxes are checked. But this produces an invisible display.
Any way around that? Sorry to keep asking such elementary questions.
you described Hypes default behaviour.
to solve your issue there are scripted and css approaches in the forum ... in the end it depends on your setup. there is no all in one solution.
Hope this gets improvements somehow in the next version but it's not a simple task ...
You mean that the default behaviour is that it doesn't work? Checking those buttons does nothing?
Yes, Hype doesn’t scale proportional in the sense that it sets width and height accordingly. @h_classen wrote a script to do just that. That functionality should be in the IDE/runtime in the future and in my opinion. Another thing is… the OAM format is for data bundling and just an other name for a ZIP container. Hype uses this “format” to bundle all its resources on uploads but the file in the server is actually an unpacked version as if you would rename the OAM to Zip and unpack it yourself.
Thanks for your reply. Does Classen's script work? I tried it but it made no difference. Do you put it in the head section of your document and do you have to alter it by substituting your own hype dimensions?
I'm just looking for a simple solution. I want to offer OAM files to clients who can add it to their various Wordpress websites without fussing with code. If this is not possible should I just forget about scaling and use breakpoints and alternate layouts?