homepage Welcome to WebmasterWorld Guest from 54.226.168.96
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
Resize iframe & textarea in reverse directions
Rain_Lover




msg:4638320
 10:21 am on Jan 18, 2014 (gmt 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!

 

DrDoc




msg:4638771
 7:45 pm on Jan 20, 2014 (gmt 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.
Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved