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\$
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
    Jan 27 '14 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
    Jan 27 '14 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
    Jan 27 '14 at 18:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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