Contact UsDevelopment Blog
June 27, 2013
Resize iframe to new height.
Our client supports 4 different regions and we're using iframe for this project. The height of the welcome page starts out short and then with a click, this simple jQuery script will resize my iframe to fit the selected tall order form.
(July 2013 Updated)
I've updated the script to support AJAX forms. When new input fields are inserted, we will also need to expand the iframe height so the bottom of the form doesn't get cut off.
RAW
Resize iframe to new height.
jQuery
Our client supports 4 different regions and we're using iframe for this project. The height of the welcome page starts out short and then with a click, this simple jQuery script will resize my iframe to fit the selected tall order form.
(July 2013 Updated)
I've updated the script to support AJAX forms. When new input fields are inserted, we will also need to expand the iframe height so the bottom of the form doesn't get cut off.
RAW
<script type="text/javascript">
function resizeIframe(iframe) {
iframe.height = iframe.contentWindow.document.body.scrollHeight + "px";
}
// onChange increase height due to Ajax increment
$(window).load(function(){
setInterval(function(){
document.getElementById("myframe").style.height = document.getElementById("myframe").contentWindow.document.body.scrollHeight + 'px';
}, 1000);
});
</script>
<a href="page_one.php" target="myframe">Page 1</a><br />
<a href="page_two.php" target="myframe">Page 2</a><br />
<a href="page_three.php" target="myframe">Page 3</a><br />
<a href="page_four.php" target="myframe">Page 4</a><br />
<iframe id="myframe" name="myframe" src="default_page.php" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" vspace="0" hspace="0" style="overflow: visible; width:100%;" onload="resizeIframe(this)"></iframe>