Integrating Hype Div into WordPress


(Jonathan Langberg) #1

I created a custom header through Hype to add some uniqueness to a WordPress theme. I set the page to be 100% width and 100% height within Hype, exported the page, then uploaded it through FTP to the domain that has the WordPress plugin, here is the source page: http://wp.ideahubdesign.com/lightbulbs.html

Next, I embedded this full screen “hero” header into the homepage by added this iframe:

<iframe src="http://www.wp.ideahubdesign.com/lightbulbs.html" name="lightbulbs" scrolling="auto" frameborder="no" align="center" width= "100%" height = "100%">

The result can be found here: http://wp.ideahubdesign.com/test-3/

So this works as far as showing up, but for the life of me, I can’t get it to display as 100% viewport height. Even though the div in which it’s in is technically viewport height (as you can see by the light gray background), the iFrame height remains at around 200px in height.

I know 3/4 of the problem is related to WordPress, but I submitted a ticket to the developers at Qcode for their WordPress theme “Bridge” and they just said to replace the iFrame width/height with fixed PX values, which I thought was obvious that this was the opposite of what I was trying to do.

The Hype community has always been so helpful and provided brilliant solutions to push the envelope, so I thought I’d give this a shot.

-Jon


(Hans-Gerd Claßen) #2

try to set the heigth by css … style"height:100vh"

or get the viewportheight by js and accordingly set the height of the iFrame


(Gerfried) #3

It’s not, the immediate parent div is not 100% height…but the page just went 404 on me, so I presume you’re fixing stuff as we speak :wink:


(Jonathan Langberg) #4

Yes I was in the process of fixing it. So I tried the 100vh in CSS beforehand and it wasn’t working, then I realized I needed to add an ID within the actual HTML code, not the visual editor “div” that the code was placed in. It works for the background video now, but I am having a problem with the text and logo not being centered. Not sure why that’s happening