Last active
September 5, 2018 12:29
-
-
Save themorgantown/a22c5f1fc8d9b73e1285 to your computer and use it in GitHub Desktop.
This example shows how to dynamically adjust the height of a wrapper div which encloses a Tumult Hype document with Flexible Layouts (width & height) enabled. Download the example document here: http://tumult.com/support/examples/4733-Responsive/FlexibleLayoutExample.zip
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title></title> | |
| <style> | |
| body { | |
| color: black; | |
| } | |
| .article { | |
| display: block; | |
| width: 90%; | |
| margin: 20px auto; | |
| } | |
| #wrapper { | |
| width: 90%; | |
| margin: 0 auto; | |
| background-color: gray; | |
| height: auto; | |
| } | |
| </style> | |
| <link href='https://fonts.googleapis.com/css?family=Playfair+Display&subset=latin' rel='stylesheet' type='text/css'> | |
| </head> | |
| <body> | |
| <div id="wrapper"> | |
| <div id="laketestflexiblewidthandheight_hype_container" style="margin:auto;position:relative;width:100%;height;100%;overflow:hidden;" aria-live="polite"> | |
| <script type="text/javascript" charset="utf-8" src="LakeTestFlexibleWidthandHeight/LakeTestFlexibleWidthandHeight.hyperesources/laketestflexiblewidthandheight_hype_generated_script.js?90764"></script> | |
| </div> | |
| </div> | |
| <div class="article"> | |
| <p>This is text below the Hype document. </p> | |
| </div> | |
| <script type="text/javascript"> | |
| // This is width / height of your Hype Document | |
| var ratioScale = 600 / 375; | |
| // This gets the width of the DIV enclosing your document. | |
| // If you're getting inaccurate widths, see: http://stackoverflow.com/a/9619396 | |
| var currentWidth = document.getElementById('laketestflexiblewidthandheight_hype_container').offsetWidth; | |
| var HypeDivNewHeight = currentWidth / ratioScale; | |
| document.getElementById('wrapper').style.height = HypeDivNewHeight + "px"; | |
| console.log('Your Hype Div width is ' + currentWidth + ' and your container height is now ' + HypeDivNewHeight) | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I found also this 100% CSS hack: https://codepen.io/cobycreative/pen/cIrnv
Seems working fine! :)