Resize iframe & textarea in reverse directions

Junior Member

joined:Mar 1, 2010
posts: 196
votes: 0

Iframe isn't reziable 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: [jsfiddle.net ]

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!

Resize iframe & textarea in reverse directions

Rain_Lover

Junior Member

DrDoc

Senior Member

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members