Hype graphic getting clipped


(Reed) #1

I’m new to Hype and I’m doing some tests with different layouts. Using Wordpress and Pagelines DMS framework. Graphic is showing up and swapping when it hits the breakpoint BUT the depth seems to be fixed and clips the lower part of the graphic (a simple box). I disabled scrollin in the iframe but that didn’t solve anything. Here’s my code:

And the page: http://chorusm2m.staging.wpengine.com/device-agnostic/

You can’t tell but the red graphic should be 320x528px, green is 768x466.

Thanks for any help.


(Reed) #2

My code did’t show up. Here it is:

<iframe src="http://chorusm2m.com/wp-content/uploads/Test1.html" height="100%" width="100%" scrolling="no" ></iframe>

#3

Hi Reed,

The width and height of your iframe are set to 100% which is inheriting it’s values from the width and height of the article tag with id=“post-1037” which is being set by your CMS or theme.

This is why it’s clipping. Instead of using an iframe what about placing the div inside your post

This one

<div id="test1_hype_container" style="margin:auto;position:relative;width:320px;height:568px;overflow:hidden;" aria-live="polite"><script type="text/javascript" charset="utf-8" src="Test1.hyperesources/test1_hype_generated_script.js?59829"></script>
</div>

EDIT* don’t forget to change the src attribute to an absolute URL

Also I believe there are some posts here on putting Hype documents in Wordpress that may be worth searching.

D


(Reed) #4

Actually, in your wordpress setup video, it says to use percentages for flexible layouts. And somewhere else I read to use 100% and 100%. For whatever reason, I can’t get the

method to work. Replaced the files and used this, but no luck
	<div id="test1_hype_container" style="margin:auto;position:relative;width:320px;height:568px;overflow:hidden;" aria-live="polite">
	<script type="text/javascript" charset="utf-8" src="http://chorusm2m.com/wp-content/uploads/Test1.hyperesources/test1_hype_generated_script.js?21827"></script>
</div>

#5

I’m getting a 404 error for that file:

http://chorusm2m.com/wp-content/uploads/Test1.hyperesources/test1_hype_generated_script.js?21827

This is also not working: http://www.chorusm2m.com/wp-content/uploads/Test1.html

Can you make sure it has been uploaded?


(Reed) #6

Started over with same result. Used <div> method in the post content and the iframe method in a text box below. Iframe clips but shows. <div> method yield nothing.

Code for div:
<div id="test2_hype_container" style="margin:auto;position:relative;width:320px;height:568px;overflow:hidden;" aria-live="polite"> <script type="text/javascript" charset="utf-8" src="http://chorusm2m.com/wp-content/uploads/hype/Test2.hyperesources/test2_hype_generated_script.js?71124"></script></div>

Code for iframe:

<iframe src="http://chorusm2m.com/wp-content/uploads/hype/Test2.html" height="100%" width="100%" scrolling="no" ></iframe>

Not sure why you had the 404. I’d be happy to persue the div method but I’m getting nothing.


#7

Hi Reed,

Your hype file is fine.

@Daniel The reason for the 404 is because the files are in a folder called hype in the uploads folder so the path was wrong.

@Jbaker8553 Reed, your files are fine and the 100% width / height attributes are fine. The problem I believe lies in where you are adding your code and the relationship to parent elements. Your clipping is coming from the fact that your parent element (the post div or article div or whatever is housing your hype file) is hiding it’s visibility and has a width of 893px and a height of 157px. So the problem I feel is some styling. I may be wrong :slight_smile:

Can you explain where and how you are including the Hype document?

D


(Reed) #8

Late last night I tried including the file included by stephen included in this thread:

And it works! Here is the code I used:

	<div id="responsive_hype_container" style="margin:auto;position:relative;width:100%;height:568px;overflow:hidden;" aria-live="polite">
	<script type="text/javascript" charset="utf-8" src="http://chorusm2m.com/wp-content/uploads/hype/responsive/responsive.hyperesources/responsive_hype_generated_script.js?75152"></script>
</div>

I’m going to look at this today and try to understand what is different about this file or the path that makes it work.