Trouble with Embedding a Flexible Hype Project into HTML Page

Exporting & Previewing
1

Hi All,

When I embed a flexible layout, following the instructions in the Hype Documentation, the Div is not visible on the page?

Am I doing something very wrong and stupid here? Any help is much appreciated.

This file is just a mockup UI for an equaliser, which will be connected to Web Audio API filters. It uses a bunch of timelines to create the coloured rotational buttons, with values displayed.

Cheers

Stefan

audio buttons.zip (42.9 KB)

2

Just paste a zipped version of your Hype file into the message text field. Or use the upload button.

1 Like
3

Ah many thanks, I will zip it up.

4

Hype file now uploaded.

5

In previewing your hype document, I believe I'm able to see the scene just fine in Safari for the mac. If there's something specific to your setup that'd be good to know. Perhaps if it is published you can send a link to that version that reproduces the problem.

I'm guessing though you might be embedding the animation in another page? If so one thing to look out for when using Flexible Layout with a 100% height is that your containing div not have a height specified. This is a common problem, and in this case the browser would think the height is 0px, and thus 100% of 0px is 0px.

The easiest way to check this out would be to use the browser's web inspector's DOM "Elements" navigator and see what it thinks the height of the hype div actually is.

The basic solutions are:

But I think we'd need to verify this is the problem you are hitting to know that it is the right solution.

2 Likes
6

Hi Jonathan, many thanks for the message.

You were absolutely correct in your assumptions.

I did not have a div container wrapping around the Hype div, I assume this was causing an issue as the head HTML had a width specified, but not a height. Was it therefore scaling off that?

I have added a containing div, and added width and height. I also had to add position:absolute to get it to appear where it was supposed to on the page.

It's all good now, scales nicely to the containing div. :grinning:

Many thanks for the guidance.

2 Likes
7

there is another way which just uses CSS
basically we wrap a div around the output that hype produces and change the inline style that hype writes this way we can just add a block of self contained HTML within div and its still fully responsive, allows for scaling and doesn't collapse to 0px high so for example this:

<!-- copy these lines to your document: -->

	<div id="mybanner_hype_container" class="HYPE_document" style="margin:auto;position:relative;width:100%;height:100%;overflow:hidden;">
		<script type="text/javascript" charset="utf-8" src="mybanner_hype_generated_script.js?22637"></script>
	</div>

	<!-- end copy -->

would become this:

<!-- copy these lines to your document: -->
	<div id="hype-container">
		<style scoped>
			#hype-container { width:100%; height:auto; padding-top:19.01469%; position:relative }  /* Desktop size */
			@media screen and (max-width:1189px) { #hype-container { padding-top:23.23232% } }  /* Laptop Size */
			@media screen and (max-width:834px) { #hype-container { padding-top:41.666666% } }  /* Tablet Portrait Size */
			@media screen and (max-width:736px) { #hype-container { padding-top:19.01469% } }  /* Mobile landscape size */
			@media screen and (max-width:567px) { #hype-container { padding-top:52.8169% } }  /* Mobile portrait size */
		</style>
		
	<div id="mybanner_hype_container" class="HYPE_document" style="margin:auto; position:absolute; top:0; width:100%; overflow:hidden;">
		<script type="text/javascript" charset="utf-8" src="mybanner_hype_generated_script.js?22637"></script>
			</div>
		</div>
	<!-- end copy -->

a couple things to note: the padding tops within the (scoped) styles are ratios because this banner changes size ratios completely as the browser window width is reduced and that matches specific layout size and the other bit to mention is the inline style you change that from relative to absolute and remove the height.
A live example of a banner using this method is here

1 Like
8

a style with aspect-ratio on the wrapping div should match here, as proportions should stay the same ... i guess.

like in this sample:
https://www.aachener-zeitung.de/lokales/region-aachen/aachen/als-die-strassenbahn-noch-durch-aachen-fuhr-und-parken-auf-dem-markt-alltag-war/16410382.html

the before/after-images are hype and the size is just handled by aspect-ratio ...

1 Like
10

With modern CSS just use aspect-ratio…

1 Like