5
\$\begingroup\$

I have a textarea and iframe whose sizes should change dynamically and in reverse directions. I'd like to achive this effect without using a frameset or jQuery plugin. Here's the result of my attempt:

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

I wonder if you could review my code and let me know what you think.

\$\endgroup\$

1 Answer 1

Reset to default
3
\$\begingroup\$

Perhaps add overflow:hidden; to the CSS of the textarea and iframe, and add scrolling="no" as an attribute of the HTML iframe element: because otherwise, a scrollbar will appear when the slider is very big or very small.

Maybe a scrollbar is what you want (for usability); but a scrollbar makes a small visual artifact in an empty textbox or iframe, when the element is shorter than one line.

\$\endgroup\$
3
  • \$\begingroup\$ Thanks for the answer, but this textarea isn't going to be empty. If I add overflow:hidden; to the textarea and remove its scrolling functionality, then how can I insert and access a long string of text? \$\endgroup\$
    – Mori
    Commented Jan 27, 2014 at 7:39
  • \$\begingroup\$ @RainLover The scrollbar was a minor (perhaps unhelpful) answer: it was the only thing I found to comment on or criticize. Apart from that the code looks good to me: simple and easy to read. You could perhaps add a comment in the code to explain what functionality it is implementing. Do you have any specific questions/concerns about he code you posted? \$\endgroup\$
    – ChrisW
    Commented Jan 27, 2014 at 11:27
  • \$\begingroup\$ Nothing in particular. Just wanted to make sure my coding is right and if there's a better approach to achieve the same effect. Thanks anyway! :) \$\endgroup\$
    – Mori
    Commented Jan 27, 2014 at 18:07

Not the answer you're looking for? Browse other questions tagged or ask your own question.