By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,650 Members | 1,976 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,650 IT Pros & Developers. It's quick & easy.

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

P: n/a
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
Jul 20 '05 #1
Share this Question
Share on Google+
4 Replies


P: n/a
----- Original Message -----
From: "David" <d.****@computer.org>
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
Jul 20 '05 #2

P: n/a
> 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
Jul 20 '05 #3

P: n/a
"David" <d.****@computer.org> wrote in message
news:1e*************************@posting.google.co m...
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!
Jul 20 '05 #4

P: 1
This works well for me. Adding the "overflow:visible" lets the textarea grow as the user enters text.

<textarea name="mytext" style="width:100%; overflow:visible">sample text</textarea>
Feb 11 '06 #5

This discussion thread is closed

Replies have been disabled for this discussion.