Expanding a textarea to fill a window, but without requiring scrollbars

Discussion in 'Javascript' started by David, Jul 4, 2003.

  1. David

    David Guest

    It's sad to say, but when using the AOL web site, like to send an
    email, they have a nifty capability such that when a window is
    resized, the textarea where the message is input expands not only
    horizontally, but also vertically, to fill the space.

    I took a look at their javascripts, but they are quite complex and
    convoluted since they make use of many of their own functions designed
    to work with their web site.

    Does anybody have a good mechanism to determine how big such a field
    can be made as the window is resized (or even just based on the
    initial size of the window when it's opened) so that if the user has a
    bigger window, then the textarea will be bigger for them to input
    their data.

    For horizontal expansions, I've seen the simple style for the textarea
    element like: style="width: 100%;" This works well on all current
    browsers.

    But getting the textarea to grow taller is made harder. The AOL basic
    code looks something like:

    function doWindowResize()
    {
    var textarea = document.forms.myform.mytextarea;
    var bodyElement = document.getElementById('bodyElement');

    var bottom;
    var pageHeight;
    var textareaHeight;

    if (document.all)
    {
    bottom = bodyElement.offsetTop + bodyElement.clientHeight;
    pageHeight = document.body.clientHeight;
    textareaHeight = textarea.clientHeight;
    }
    else
    { // NS6UP
    bottom = bodyElement.offsetTop + bodyElement.offsetHeight;
    pageHeight = innerHeight;
    textareaHeight = textarea.offsetHeight;
    }

    bottom += 6;
    var textareaDiff = pageHeight - bottom;
    var newTextareaHeight = Math.max(150, textareaHeight +
    textareaDiff);
    textarea.style.height = newTextareaHeight + 'px';
    }

    But while this does appear to make the textarea bigger than the
    "default", it will tend to make it big enough that scrollbars become
    active, so the window is actually too big.

    I'm looking for something, even if I have to put a "fake" field in,
    but something that says as long as the window doesn't have scrollbars
    active, make the textarea bigger. If it can be pre-calculated (as
    attempted above), then greater still.

    Anybody have any good ideas on how to do this?

    Thanks
    David
    David, Jul 4, 2003
    #1
    1. Advertising

  2. David

    Bagbourne Guest

    ----- Original Message -----
    From: "David" <>
    Newsgroups: comp.lang.javascript
    Sent: Friday, July 04, 2003 6:40 PM
    Subject: Expanding a textarea to fill a window, but without requiring
    scrollbars


    > It's sad to say, but when using the AOL web site, like to send an
    > email, they have a nifty capability such that when a window is
    > resized, the textarea where the message is input expands not only
    > horizontally, but also vertically, to fill the space.
    >
    > I took a look at their javascripts, but they are quite complex and
    > convoluted since they make use of many of their own functions designed
    > to work with their web site.
    >
    > Does anybody have a good mechanism to determine how big such a field
    > can be made as the window is resized (or even just based on the
    > initial size of the window when it's opened) so that if the user has a
    > bigger window, then the textarea will be bigger for them to input
    > their data.


    You should be able to get your head round this:

    <html>
    <head>
    <script type="text/javascript" src="jscript/utils.js"></script>
    <script type="text/javascript">
    function fixHeightOfTheText()
    {
    var t = document.getElementById("thetext");
    var h = window.innerHeight ? window.innerHeight :
    t.parentNode.offsetHeight;
    t.style.height = (h - t.offsetTop - 20) + "px";
    }
    window.onresize = fixHeightOfTheText;
    </script>
    </head>
    <body>
    <textarea id="thetext" style="width:100%"></textarea>
    <script type="text/javascript">
    fixHeightOfTheText(); // fix it first time in.
    </script>
    </body>
    </html>

    Nige
    Bagbourne, Jul 4, 2003
    #2
    1. Advertising

  3. David

    David Guest

    > You should be able to get your head round this:
    >
    > <html>
    > <head>
    > <script type="text/javascript" src="jscript/utils.js"></script>
    > <script type="text/javascript">
    > function fixHeightOfTheText()
    > {
    > var t = document.getElementById("thetext");
    > var h = window.innerHeight ? window.innerHeight :
    > t.parentNode.offsetHeight;
    > t.style.height = (h - t.offsetTop - 20) + "px";
    > }
    > window.onresize = fixHeightOfTheText;
    > </script>
    > </head>
    > <body>
    > <textarea id="thetext" style="width:100%"></textarea>
    > <script type="text/javascript">
    > fixHeightOfTheText(); // fix it first time in.
    > </script>
    > </body>
    > </html>
    >
    > Nige



    This just isn't working for me -- at least with my initial testing on
    IE 6 on WinXP. In fact, it appears to cause an loop in that the
    resizing of the textarea, triggers the 'onresize' event handler (this
    is my guess, since a debug 'alert' call repeated is invoked once I try
    to resize the window), forcing the browser window to have to be killed
    as it becomes unresponsive.

    David
    David, Jul 5, 2003
    #3
  4. David

    Bagbourne Guest

    "David" <> wrote in message
    news:...
    > This just isn't working for me -- at least with my initial testing on
    > IE 6 on WinXP. In fact, it appears to cause an loop in that the
    > resizing of the textarea, triggers the 'onresize' event handler (this
    > is my guess, since a debug 'alert' call repeated is invoked once I try
    > to resize the window), forcing the browser window to have to be killed
    > as it becomes unresponsive.


    I don't have that software. Over to you to debug it!
    Bagbourne, Jul 5, 2003
    #4
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. tekmicha
    Replies:
    6
    Views:
    298
    David Resnick
    Mar 24, 2006
  2. KDawg44
    Replies:
    2
    Views:
    349
    jim-on-linux
    Apr 20, 2007
  3. Fabio Mastria
    Replies:
    5
    Views:
    4,335
    TechMCAD13
    Jan 30, 2008
  4. James Radke
    Replies:
    3
    Views:
    180
    Jeffrey Tan[MSFT]
    Oct 13, 2003
  5. Max

    scrollbars in textarea

    Max, Feb 26, 2004, in forum: Javascript
    Replies:
    2
    Views:
    68
    Randy Webb
    Feb 26, 2004
Loading...

Share This Page