Dynamically Adjust the Height of an iframe

General Development iframe Javascript

Snippet Overview

Dynamically Adjust the Height of an iframe

Essentially an iframe is a window into another site and if that window is not large enough or more specifically tall enough, you don’t get the full picture. If you are using jQuery within your site you can dynamically adjust the height of the iframe container. Just add the following javascript to your sites footer.

<script type="text/javascript" language="javascript"> 
$('.custom-iframe').css('height', $(window).height()+'px');
</script>

The code above is set to detect an iframe with the class .custom-iframe (example below). If your iframe has a different class name, just adjust the script accordingly.

<iframe src="myiframe-source.html" width="100%" class="custom-iframe">
<p>Here is some awesome content within my iframe.</p>
</iframe>

Source: https://stackoverflow.com/questions/7317781/how-to-set-iframe-size-dynamically

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply