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\$ 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\$ 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\$ Commented Jan 27, 2014 at 18:07

You must log in to answer this question.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.