Log in

View Full Version : 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 :rolleyes:

Thanks for the help!
shachi
01-31-2007, 06:18 PM
Use divs not textareas. And use this 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:



<!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.