Resize iframe & textarea in reverse directions

JavaScript
1

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

2

Hi,

I thought there might be a CSS solution with flexbox but I couldn’t quite get it to work.

This was close (chrome only) but a little buggy.


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.wrap {
	display: -webkit-flex;
	display: -moz-flex;
	display: flex;
	-webkit-flex-flow: column;
	-moz-flex-flow: column;
	flex-flow: column;
	height:400px;
	width:200px;
}
.flex-item {
	-webkit-flex: 1 auto;
	-moz-flex: 1 auto;
	flex: 1 auto;
}
.top { background:blue; }
.base {
	background:green;
	overflow:auto
}
.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 class="wrap">
		<div class="flex-item top"> test1 <br>
				test <br>
				test </div>
		<div class="flex-item  base">test1 <br>
				test <br>
				test <br>
				test <br>
				test <br>
				test <br>
				testlast <br>
		</div>
</div>
</body>
</html>

I haven’t played with flexbox enough yet to know exactly what it can and can’t do.

I think you are stuck looking for a js solution.

3

You’re right. The CSS3 resize property isn’t well-supported: IE11 doesn’t understand it at all and in Chrome/Safari/Opera you can only enlarge the element, not resize it smaller.
Thanks a lot, anyway! :slight_smile:

4

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.

This script works well in Firefox, and somewhat in Chrome. The problem seems to be that the browsers have little support for the CSS 3 resize declaration. Perhaps someone else might be able to get the required action across all browsers with this as a starting point.

<script type="text/javascript">
    var topObj=document.getElementById("top");
    topObj.style.height="200px";
    var bottomObj=document.getElementById("bottom");
    bottomObj.style.height="200px";
    window.frames["myFrame"].onresize = function(){
    bottomObj.style.height=400-parseInt(topObj.style.height)+"px";  }
 </script>

The other thing to keep in mind is that you can’t read the element height using javascript if the height is only set using CSS. You need to set it for the element as illustrated above or start by setting the height as a style attribute within the element tag as follows.

<div id="top" style="height:200px"></div>

. While the last method works, I know that I am inviting the wrath of the purists by suggesting it in this forum. :slight_smile:

5

Thanks for the script and the pointer! :slight_smile:
I have to admit I’m not good at JavaScript and need to learn many things.

6

Hi,

I saw a question in the jquery forum that was similar but related to horizontal elements so I played around with the code and [URL=“http://www.pmob.co.uk/temp/resizable-divs2.htm”]came up with this.

7

Many thanks for your time and beautiful demo!
And here’s what I’ve just come up with:

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Resize</title>
    <style>
        textarea,
        iframe {
            display: block;
            width: 300px;
            height: 200px;
            margin: 0;
            border: 0;
            padding: 0;
        }
        textarea {
            background: green;
            resize: none;
        }
        iframe {
            background: blue;
        }
    </style>
</head>

<body>
    <input id="slide" oninput="resize();" onchange="resize();" type="range" min="0" max="400" value="200">
    <textarea id="textarea"></textarea>
    <iframe id="iframe"></iframe>
    <script>
        var slide = document.getElementById("slide");
        var textarea = document.getElementById("textarea");
        var iframe = document.getElementById("iframe");

        function resize() {
            var slideValue = slide.value;
            textarea.style.height = slideValue + "px";
            iframe.style.height = 400 - slideValue + "px";
        }
    </script>
</body>

</html>

Demo: https://googledrive.com/host/0B5jOXzxlxbMhYVF3b0lubjlDWm8/resize.html

8

That’s a much more compact solution :slight_smile: