Welcome to WebmasterWorld Guest from 3.80.60.248

Forum Moderators: open

Message Too Old, No Replies

Resize iframe & textarea in reverse directions

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

Junior Member

5+ Year Member Top Contributors Of The Month

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

Senior Member

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

joined:Mar 15, 2002
posts:6807
votes: 0


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.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members