Welcome to WebmasterWorld Guest from 54.205.170.21

Forum Moderators: open

Message Too Old, No Replies

Resize iframe & textarea in reverse directions

   
10:21 am on Jan 18, 2014 (gmt 0)

5+ Year Member Top Contributors Of The Month



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!
7:45 pm on Jan 20, 2014 (gmt 0)

WebmasterWorld Senior Member drdoc is a WebmasterWorld Top Contributor of All Time 10+ Year Member



Quick little help ... You should avoid using keywords as variable names: bottom, parent, top ... those need different names.

Your
style.height
value should also be parsed. You can
parseFloat
to ensure that units are dropped off.
 

Featured Threads

Hot Threads This Week

Hot Threads This Month