Resizing Entire Page by Width

Using JavaScript with Hype
21

Ok I think I understand what you’re doing, but I still feel a bit like I’m repairing something with a blindfold on.

Take a look at this example: Iframe Scaler.zip (118.0 KB)

I’ve placed a Hype document in an iframe set to scale its width to scale to 100%. This iframe contains the ‘width-only’ scaling document from here. The height of the iframe adjusts based on the ratio of your Hype document, so as the iframe has less space to work with, the height will expand or shrink.

I shared a variation of this technique with someone embedding a Hype document within a Wordpress site and it worked well because in their situation they couldn’t use Responsive Layouts.

The iframe code is: <iframe id="hypeFrame" style="margin:0 auto;border: none;" src="scale-width-only.html" height="200" width="100%" frameborder="0" scrolling="no"></iframe>

(The height here really doesn’t matter, but it should be a good initial height)

And the following function iframeScaler() handles height, width, and ratio:

<script type="text/javascript">
    
    function iframeScaler() {
    // this is width / height of your Hype Document.  
    var ratioScale = 600 / 400;
	
	// This gets the width of the DIV enclosing the iframe, or of the iframe itself. 
	// If you are placing your iframe in another div, you'll need to replace instances of
	// Hypeframe with the ID of the enclosing element. 
	// If you're getting inaccurate widths, see: http://stackoverflow.com/a/9619396 
	var currentWidth = document.getElementById('hypeFrame').offsetWidth;

    var iFrameNewHeight = currentWidth / ratioScale;
    document.getElementById('hypeFrame').style.height = iFrameNewHeight + "px";

	console.log('Your iframe width is ' + currentWidth + ' and your iframe height is now ' + iFrameNewHeight )

	}
	
	iframeScaler();
	// reset if device is rotated
	window.addEventListener('orientationchange', function(){
     iframeScaler();
});

</script>

You may want to run iframeScaler in response to any window-resize event as well.