Okay, I decided to make a little "AI" chatrrom from javascript. The "AI" part of it isn't really AI, but it's fun to say that. I actually use arrays to store possible responses and names and such, then retrieve it using a combination of Math functions.
More to the point, I got very far already. I can have it respond differently to users' inputs when they have a question mark in them. http://defection.frih.net/other/ai/aichat.htm. It kinda sucks, but I improve it every day.
So now I come to the problem that the conversation can expand beyond the textarea, which is a good thing since I have a contest on DDS Forums for getting the funniest sessions. The only problem with that, is that I can't get the darn textarea to scroll when it goes past view 
.
It's a real pain, and I think there's a way to scroll a textarea, or create a similar effect, but I can't figure it out 
.
This is very frustrating, can someone help me?
PS: The funny session contest is at the DDS Forums The way to scroll a textarea, if you should want that, might be to set the focus to it, and then move the caret to the end. If that's possible.
Maybe you could use a <div> instead of a textarea?
Instead of..
document.getElementById("opt1").value = conversation;
Try..
document.getElementById("myDiv").innerHtml = conversation;
That way, the div element will keep growing, and because the focus is in the send text box, hopefully the screen will keep scrolling.
In any circumstance, you should consider using a <div> instead, since their scrolling is more predictable for various browsers than <textarea>. Also, they obviously allow you to do the log with more freedom in terms of formatting (different colour for nickname etc.)
The solution I know of that works predictably in most browsers is this HTML:
| Code: |
<div id="logcontainer">
<div id="log"></div>
</div> |
i.e., a log <div> inside a logcontainer <div> (the logcontainer is needed to make IE's scrolling predictable).
CSS:
| Code: |
#logcontainer {
height: 200px; /* The height you wish for the log */
width: 80%; /* The width you wish for the log */
overflow: auto; /* Adds scrollbar if needed */
}
#log {
/* Just fill out the container */
width: 100%;
height: 100%;
} |
And then the javascript (conceptual example, you might as well store the references to HTML nodes, rather than calling getElementById every time etc.):
| Code: |
function updateScrollPos() {
var logContainer = document.getElementById("logcontainer");
logContainer.scrollTop = logContainer.scrollHeight;
}
function addLogLine(txt) {
var log = document.getElementById("log");
log.innerHTML += txt + "<br>"; // Or <br /> ;)
updateScrollPos();
} |
In short: element.scrollTop = element.scrollHeight. You can do the same for <textarea>, but it won't actually scroll correctly in IE (either tending to scroll "to far", so there's empty space after the last line, or "too little", so the last line or more aren't in view...) Well, I was considering using nodes for this thing. Nodes are very fun, and my javascript book goes very in-depth on them. I think I may combine that with the divs, and make some nice effects.
Thanks everyone! I'll let you know how it goes.
Might want to look into:
e.offsetWidth
e.scrollLeft
e.scrollWidth
e.offsetHeight
e.scrollTop
e.scrollHeight
Where "e" is the element.
To add text to the DIV, you should be using appendChild, createTextNode and createElement in combination. However I'm sure you'd rather forget about standards and simply use innerHTML.
Might also want to use the ONSCROLL event handler to detect when the user scrolls around. However the ONSCROLL event handler isn't standard and won't work in Opera but will work in Firefox and IE. In that case, you'd want to use ONMOUSEMOVE.
