PDA

View Full Version : Resize iframe & textarea in reverse directions



Rain Lover
01-18-2014, 10:21 AM
Iframe isn't reziable (https://developer.mozilla.org/en-US/docs/Web/CSS/resize) in Firefox. Then I decided to put it in a div and resize that instead:


<!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>