Advanced Search

Results 1 to 4 of 4

Thread: Dynamic Textarea Insertion

  1. #1
    Join Date
    Jan 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Dynamic Textarea Insertion

    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!

  2. #2
    Join Date
    Aug 2005
    Posts
    971
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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>

  3. #3
    Join Date
    Jan 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

  4. #4
    Join Date
    Aug 2005
    Posts
    971
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •