/    Sign up×
Community /Pin to ProfileBookmark

Resize iframe & textarea in reverse directions

Copy linkTweet thisAlerts:
Jan 18.2014

Iframe isn’t [URL=”https://developer.mozilla.org/en-US/docs/Web/CSS/resize”]reziable[/URL] in Firefox. Then I decided to put it in a div and resize that instead:

[CODE]<!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>[/CODE]

Demo: [URL=”http://jsfiddle.net/RainLover/EY4mR/”]http://jsfiddle.net/RainLover/EY4mR/[/URL]

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!

to post a comment
JavaScript

1 Comments(s) ↴

Copy linkTweet thisAlerts:
@TcobbJan 19.2014 — As written, you have a problem. When you have something such as:
[CODE]var parent = document.getElementById("parent").style.height;[/CODE]

you are not going to get the height. You can only get this value from [whatever].style.height if the style for height has been set inline. In your code its not, its set by an internal style sheet. If you want to get the height, use:

[CODE]var parent = document.getElementById("parent").offsetHeight;[/CODE]

So, try something like:

[CODE]...onresize = function(){
var parent = document.getElementById("parent");
var top = document.getElementById("top");
var bottom = document.getElementById("bottom");
bottom.style.height = (parent.offsetHeight - top.offsetHeight) + 'px';
}[/CODE]

You may have to make minor adjustments for built in margins and the parent's padding.
×

Success!

Help @Rain_Lover spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 11.28,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @bahaedd,
tipped: article
amount: 1000 SATS,

tipper: @Balmasexy,
tipped: article
amount: 1000 SATS,

tipper: @mbsaad,
tipped: article
amount: 1000 SATS,
)...