Resize iframe & textarea in reverse directions

**Rain Lover** · 01-18-2014, 10:21 AM

Iframe isn't reziable in Firefox. Then I decided to put it in a div and resize that instead:

Code:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Resizable Iframe & Textarea</title>
<style>
#top, #bottom {
    width:300px;
    height:200px;
    border:1px solid #ccc;
    padding:10px;
}
#top {
    overflow:auto;
    resize:vertical;
}
iframe, textarea {
    display:block;
    width:100%;
    height:100%;
    margin:0;
    border:0;
    padding:0;
    resize:none;
    background:#ccc;
}
</style>
</head>
<body>
<div id="parent">
    <div id="top">
        <iframe name="myFrame" src="about:blank"></iframe>
    </div>
    <div id="bottom">
        <textarea></textarea>
    </div>
</div>
<script>
    var parent = document.getElementById("parent").style.height;
    var top = document.getElementById("top").style.height;
    var bottom = document.getElementById("bottom").style.height;
    window.frames["myFrame"].onresize = function() {
        bottom = parent - top;
    }
</script>
</body>
</html>

Demo: http://jsfiddle.net/RainLover/EY4mR/

Here's what I'd like to achieve: when I enlarge the top div, the bottom div should get smaller (and vice versa) so the parent div size remains fixed.

Note: No frameset or jQuery plugin, please! All I need is a simple JavaScript approach to calculate and change the bottom div height as soon as I resize the top div.

Thanks!

**molendijk** · 01-18-2014, 10:06 PM

Use inline style for parent, top and bottom, and use the script below:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Resizable Iframe & Textarea</title>
<style>

iframe, textarea {
display:block;
width:100%;
height:100%;
margin:0;
border:0;
padding:0;
resize:none;
background:#ccc;
}
</style>

</head>

<body>
<div id="parent" style="position: relative; height: 400px; width: 300px; ">

<div id="top" style="position: relative; height: 200px; width: 300px; border:1px solid #ccc; padding: 10px; overflow:auto; resize:vertical">
<iframe src="about:blank" name="myFrame"></iframe>
</div>

<div id="bottom" style="position: relative; height: 200px; width: 300px; border:1px solid #ccc; padding: 10px">
<textarea ></textarea>
</div>

</div>

<script>
window.frames["myFrame"].onresize=onload=function()
{document.getElementById('bottom').style.height=parseInt(document.getElementById('parent').style.height)-parseInt(document.getElementById('top').style.height)+0+'px'}
</script>

</body>

</html>