I have a hype document with 3 scenes - 1100px by 600px. When I set it to scale 100% (which I want to because I need it to be responsive) and then embed it into my Wordpress page, it “disappears.” You can’t see the Hype at all, although it shows in the inspector and in the source. If I toggle the scale options off and leave everything else the same, it shows up just fine, but is not responsive. I’m using Genesis Theme and I have the wrap (content area) set at 1100px wide and the theme itself is responsive. Any ideas as to what could be causing this behavior?
I replied via email too, but making it public:
Yes I’m pretty sure I know the problem - if the containing div for the hype animation (that is, the one from wordpress) does not have a width or height set, then that will effectively be seen as zero. The 100% width/height of the hype animation then will be 100% of 0, which is 0, and the document will be hidden.
I don’t know much about the genesis theme, but you’ll need to make sure that the container either has a size or a percentage. If the container uses percentages generally then you also need parent containers to define themselves in a percent or a size at some point otherwise the same problem will happen.
Alternatively our general recommendation is to not use flexible sizes with wordpress, but it sounds like you specifically want to do this for your content.
Hi Jonathan,
Thanks for your reply. So I just wrapped my hype code in a div and set the width of the div to 1100px. My hype document doesn’t appear. So I set the height of the wrapper div to 600px and now the hype document DOES appear. However, the hype document is no longer responsive, even though it has been carefully set up to scale in specific ways and the scaling has been turned on. So I’m guessing there’s no way to make Hype responsive in Wordpress if you also want the content in Wordpress to be responsive. That’s too bad. Any further suggestions?
I’m not an expert on wordpress so others might be able to chime in, but if you can assign a proper size to the parent div then it could work. Depending on how you do it, you may also need to call the hypeDocument.relayoutIfNecessary() API.
Hi Jonathan,
I tried the relayoutifnecessary on load scene and it had no impact. This is real big deal for me and I’m guessing it must be for others too- not being able to include Hype in a responsive Wordpress site. Aren’t all sites responsive these days? Do you have any more suggestions of things I can try? I’ve been playing around with various options and I still end up with Hype being clipped as I reduce the width of the browser window. That’s just not going to make it for me and my alternative would be to use HTML instead of Hype. That would be very disappointing.
Thanks for any help you can provide.
Can you share a link?
relayoutIfNecessary() is to be used if you’ve had javascript programmatically change the container size and you need the Hype animation to adjust to this. For technical reasons, we can’t determine if a parent container has changed size which is why this API exists. (however we can detect when a window changes size, so Hype’s runtime will call the method in this case).
As I said, the solution to getting it to work is that each parent container from the hype animation up must have a width/height assigned until the parent is specified in px or is the body element. The way I debug this is via looking at the DOM structure in the web inspector and working my way up the element path and seeing where this might be going wrong. Of course, you would likely need to modify the wordpress template to accommodate a value.
I think I may have found the solution. I’m still testing it but it seems to be working. What seems to be working is to set the width to scale in the scene settings. AND setting the height to NOT scale. What are your thoughts on this? Like I said, this seems to be working. I’m using the Genesis theme, which I’m sure you know, is one of (if not the) most popular wordpress theme.
1 Like
I’m no wordpress expert (and it is really hard to tell without seeing a site), but if it works then it works 
. As I said it was probably either the width or height collapsing, so if the height was the only problem having this fixed would probably be an appropriate solution.
I recommend placing your Hype document in a wrapper, and dynamically setting the height of that wrapper based on its width. Or, unchecking ‘height’ in flexible layouts.
Check out this example: https://gist.github.com/themorgantown/a22c5f1fc8d9b73e1285
The Hype document and example can be found in the ‘LakeTestFlexibleWidthandHeight’ folder here: http://tumult.com/support/examples/4733-Responsive/FlexibleLayoutExample.zip
Hi Daniel
Is it easier with hype 3.5 to insert scaled hype animation in wordpress.
I have to use joomla and wordpress, with joomla your idea to deselect the height in hype allows it to works with joomla, but with wordpress this is a nightmare. I have been using your example (https://gist.github.com/themorgantown/a22c5f1fc8d9b73e1285), from the result I had, the animation “appears” but the size depends from the text bellow the hype animation, but how to do when you don’t have text …? I just need the animation to be responsive…Is there a way for me to contact Steve_wolk. he seems to have found a way with wordpress but there is no explanation.
Thanks
Can you share your site so I can see what would be best for your situation?
Hi Daniel
I presume one doesn’t just add the header in the ‘text’ (previously known as ‘html’) section of the wordpress editor, but I’m not sure otherwise how to use your examples without modifying the header for my whole site.
Could you possibly let me know what needs to be done to make your example work here:
http://www.aqueum.com/blog/hype-flexible-example/
Thanks
It looks like you are getting a 404 error on that page: http://www.aqueum.com/blog/hype-flexible-example/www.aqueum.com/wp-content/uploads/2016/02/flexible-layout/LakeTestFlexibleWidthandHeight/LakeTestFlexibleWidthandHeight.hyperesources/laketestflexiblewidthandheight_hype_generated_script.js?90764
You should adjust that to be:
http://www.aqueum.com/wp-content/uploads/2016/02/flexible-layout/LakeTestFlexibleWidthandHeight/LakeTestFlexibleWidthandHeight.hyperesources/laketestflexiblewidthandheight_hype_generated_script.js?90764
1 Like
Thank you Daniel - it seems that was a caching problem, as the errant code was gone when I went to search for it.
I now have your example Hype working wonderfully here: http://www.aqueum.com/blog/testpost/
But can’t understand why an identical wrapper doesn’t work for my own Hype:
http://www.aqueum.com/blog/testpost2/
There’s an error in your code. It looks like you’re trying to set a variable with the wrong id.
var currentWidth = document.getElementById('laketestflexiblewidthandheight_hype_container').offsetWidth;
Your document ID is "humanwatercycle960_hype_container"
3 Likes
Thank you DBear - I should have seen that…
Now what I don’t quite understand is why (when the javascript calculates the height from the width, based on the actual .offsetWidth and hard coded aspect ratio) is the height remaining constant and only the width is scaling…?
I see now that my non-scaling-height issue is because this code only runs on refresh. As such, when varying the window width, the hype document width changes but its height remains the same, until you hit refresh & it is recalculated. Apologies for going slightly off-topic, but is there any way of overcoming this so that the hype document scales like a regular image rather than getting squished until the browser is refreshed?
I am trying to do the same thing simply resize an animation - make it responsive just like an image in Wordpress but, its not working… I have tried everything - the Javascript - Wrapper - etc etc… Checking and unchecking the scale options and it will not work properly… How did you get this to work? Options in Hype? Viewport Width? Thanks.
The quickest method: Don’t check ‘Scale’ in the Height dimension – just use scaling in the Width dimension. Or, use Responsive Layouts.