Issues with Embedding Hype Animation without set height

Hi

I cannot view my embedded Hype Animation in Wordpress (followed export and embed documentation) unless a ‘height’ or ‘min-height’ is declared on the container div. The set height means that it loses is fluidity / responsiveness and that media-query breakpoints would need to be set to adjust heights on the container.

Is there a way to fix this issue so that the full animation always shows at 100% height?

Thanks
Glennyboy

Do you have a link ?

** removed link to development site ***

Very embryonic site. If you remove the set min-height in the css via an inspector you’ll see what I mean

Okay, the script is not being loaded, so you need to check the url to access it. There are also a few errors on resources it is unable to fine. so I would check console and fix them first. But that is certainly why the Hype scene is not being loaded.

Once you get your resources file loaded, here’s a technique to embed a responsive Hype animation within an iframe, and ensure that the height of the iframe adjusts based on the ratio of Height / Width. This works best for documents that have both flexible layouts and responsive layouts in place: https://gist.github.com/themorgantown/11070756

Hi Guys

Ah I’m guessing you didn’t see anything at all. This was because I stupidly was referencing a localhost file that I could see as I was on localhost. However now that I’ve made the reference a relative link (and the script should now be loading for you) it still doesn’t display without min-height.

Here’s the link again ** rem *** which IU’ll take down again shortly.

Cheers

Glenn

Still not loading and still giving errors as per above :frowning:

Looks like you have http://abracardabra/ but you need http://abracardabra.is-slick.com/ (or something with .com at the end) in your URL.

Hi Guys
Can you please try and view now. It’s not been working on my localhost so that’s not the issue, but fingers crossed you can now see it. I’m pretty sure it’s the way that Hype is triggering with elements trying to load before they are loaded on screen.
Thanks
Glennyboy

This seems to be the error:-

[Error] TypeError: null is not an object (evaluating 'document.getElementById(c).setAttribute')
	k (abracardabrahome01_hype_generated_script.js, line 6)
	(anonymous function) (HYPE-466.thin.min.js, line 101)
	global code (HYPE-466.thin.min.js, line 101)

Thanks
Glenn

Should we be looking at this URL? http://abracardabra.is-slick.com/

It looks like your theme is cutting off the bottom of your document for narrow layouts. Can you set taller height for your document?

yes that’s the url;. I don’t wan top make it constantly public as it’s just a development site. I’m not worried about the cut off on responsive layouts right now and will adjust that.

I agree with what you are saying and have tried n numerous attempts to get it to trigger on window load etc with no joy. Once I can get it to load without a set height (i.e. automatically to the right size) then I’ll sort the other layouts. So far no response from Tumult on this.

This video might be helpful: Video: Embedding in Wordpress (Posts, Pages & Themes)

It looks like you have separated the Hype JavaScript file and are loading it within the footer of your page. It won't work if you separate the JS file from the Hype div.

Regarding issue with the height, I recommend placing your Hype div within another element with a height like this:

<div style="height:800px;">

<!-- place your Hype embed code here --> 

</div>

That way you can be sure that there will be space in your theme for your document. You could also add this inline CSS to your Hype div: min-height:800px;

I'm Tumult!

1 Like

Ah apologies Daniel

I really don’t want to do that as the embedded hype file should automatically get its height. I already can set a CSS height declaration to override as you are above, but that deftest the object of the responsive derived directly from the script…

I should note that I have tried the script in the div also with exactly the same behaviour.

If anyone can please enlighten me/us on this that would be awesome.

Your website isn’t loading – could you give me access (perhaps over email) to log into your your Wordpress installation?

Hi Daniel

I have replied directly to you via support@. However I noted late yesterday from the auto generated Hype html file that Hype is relying on a html, body 100% height declaration. If that is removed then the element on that page doesn’t stretch either. This means that the embedded hype will apparently only stretch to the height of its container (in the hype file its a roundabout hack for the full page) and that is a major weakness for responsive layouts. Adobe Edge gives correct sizing of parent and child containers out of the box and Hype really needs to also.

I’ve tried writing jQuery code to make the container the height of it’s children but it doesn’t work flawlessly. I would hope Hype will work on a permanent fix for this. Perhaps you could clean up the errors in the Hype script generation also (there are many syntax errors thrown).

Glennyboy

Perhaps you could clean up the errors in the Hype script generation also (there are many syntax errors thrown).

when or what? sure you're setup is correct?

This is a major issue. I’ve been trying to embed an animation into a wordpress doc as well, and unless I give the container div a fixed height, it doesn’t work. If the window shrinks the height stays the same.