Dynamic Textarea Insertion

**Moranor** · 01-31-2007, 06:15 PM

Hello!

I have started a simple chat project just for fun. Everything is working just fine, but my textarea that receives the content from the javascript doesnt scroll down as more content is added. My javascript takes text from a textbox and sends it to an outside .aspx page that then runs the code and writes back. The javascript takes the results and adds them to the textarea's value. However, when the content in the textarea breaks the fold, the textareas scrollbar "shrinks" up instead of down. Meaning the user has to scroll down whenever new content is added.

Is there any way to force the textarea to scrolldown and display the current messages as they come in? It is not very nice to force the user to constantly scrolldown in the textarea just to read the text

Thanks for the help!

**shachi** · 01-31-2007, 06:18 PM

Use divs not textareas. And use this code:

Code:

var elem = document.getElementById("you_elem_id");
elem.scrollTop = elem.scrollHeight;

Should probably work.

But if you still want to use a textarea look at this example:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<script type="text/javascript">
function scrollBox()
{
var elem = document.getElementById('textareaname');
elem.scrollTop = elem.scrollHeight;
}
</script>
</head>

<body>
<form action="#" method="post">
<div>
<textarea name="textareaname" id="textareaname" cols="30" rows="8">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</textarea><br>
<input type="button" onclick="scrollBox()" value="Scroll textarea to bottom">

</div>
</form>
</body>
</html>

**Moranor** · 01-31-2007, 06:26 PM

Awesome! Thank you, and I didnt have to switch to divs. The textarea worked just fine.
Just added your .scrollTop = .scrollHeight thing and it worked.

**shachi** · 01-31-2007, 06:35 PM

By the way, I insist that you wait for a response than send a private message. Waiting for a response is usually more helpful than messaging.

Thread: Dynamic Textarea Insertion

Thread Tools

Search Thread

Dynamic Textarea Insertion

Bookmarks

Bookmarks

Posting Permissions