SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Addict
    Join Date
    Dec 2010
    Posts
    216
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,278
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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.
    Code:
    <!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. #3
    SitePoint Addict
    Join Date
    Dec 2010
    Posts
    216
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    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...

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

  4. #4
    SitePoint Addict bronze trophy AllanP's Avatar
    Join Date
    Sep 2010
    Location
    Australia
    Posts
    298
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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.

    Code:
    <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.
    Code:
    <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.

  5. #5
    SitePoint Addict
    Join Date
    Dec 2010
    Posts
    216
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AllanP View Post
    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.

    Code:
    <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.
    Code:
    <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.
    Thanks for the script and the pointer!
    I have to admit I'm not good at JavaScript and need to learn many things.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,278
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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 came up with this.

  7. #7
    SitePoint Addict
    Join Date
    Dec 2010
    Posts
    216
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile

    Quote Originally Posted by Paul O'B View Post
    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 came up with this.
    Many thanks for your time and beautiful demo!
    And here's what I've just come up with:
    Code:
    <!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/0B5jOXz...m8/resize.html

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,278
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    That's a much more compact solution


Bookmarks

Posting Permissions

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