www.webdeveloper.com
Results 1 to 2 of 2

Thread: Resize iframe & textarea in reverse directions

  1. #1
    Join Date
    Nov 2009
    Posts
    80

    Resize iframe & textarea in reverse directions

    Iframe isn't reziable 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>
    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. #2
    Join Date
    Mar 2009
    Posts
    501
    As written, you have a problem. When you have something such as:
    Code:
    var parent = document.getElementById("parent").style.height;
    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;
    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';
    }
    You may have to make minor adjustments for built in margins and the parent's padding.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles