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

Giganews Newsgroups
Subject: Expanding a textarea to fill a window, but without requiring scrollbars
Posted by:  d.wa…@computer.org (David)
Date: 4 Jul 2003

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

Replies