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

D

David

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
 
B

Bagbourne

----- Original Message -----
From: "David" <[email protected]>
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
 
D

David

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
 
B

Bagbourne

David said:
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!
 

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,734
Messages
2,569,441
Members
44,832
Latest member
GlennSmall

Latest Threads

Top