Skip to content

Instantly share code, notes, and snippets.

@themorgantown

themorgantown/responsiveIframe.html

Last active March 14, 2016 12:39
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save themorgantown/11070756 to your computer and use it in GitHub Desktop.
Save themorgantown/11070756 to your computer and use it in GitHub Desktop.
Download ZIP
This demonstrates a flexible document placed within an iframe. The iframe will resize based on the dimensions of the <div> that it is placed within. This has the effect of closing any space above and below the iframe.
Raw
responsiveIframe.html
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div>Content up here.</div>
<!-- If this 'container' div is set to be responsive, it will adjust the height and width of
the Tumult Hype document placed below -->
<div id="container">
<!-- We're setting the height here to the default size of the document. It will adjust
based on the dimensions of the 'container' div -->
<iframe id="hypeFrame" style="border: none;" src="http://site.com/yourtumultdocument.html"
height="831" width="100%" frameborder="0" scrolling="no"></iframe>
</div>
<div>Another div with some text.</div>
<script type="text/javascript">
window.onresize = function(event) {
// Input the Width and the Height of your original document. Just Numbers!
var ratioScale = 1108 / 831;
// get the width of the enclosing Div for the Hype element
var currentWidth = document.getElementById('container').offsetWidth;
// Use the width of the Div, and divide it by the Ratio of the W/H of the document
// and set this as the variable for the height of the Iframe.
var iFrameNewHeight = currentWidth / ratioScale;
// set the iframe to have the correct height.
document.getElementById('hypeFrame').style.height = iFrameNewHeight + "px";
};</script>
</body>
</html>
@plaundy
Copy link

plaundy commented Oct 21, 2014

The following weren't initially clear to me but ended up working:

  • The code on lines 19 and 20 gets added to the lines of code from the yourfile.html document you originally copied and pasted into the body of your export document.
  • In line 19 capitalization matters in the src URL. "site" is yoursitename. And the example URL presupposes you have put your Hype html file at the root level of your site.
  • If you are a Freeway user, lines 26-43 get added to "before " in the Page menu under HTML Markup
  • In lines 26-43, the only line you need to edit is the proportion in line 31. Make sure there are no spaces between the numbers and the "/".

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment