I've seen other questions posted elsewhere about this, but the answers were either not what I'm looking for, or the answers didn't help either.
I'm programming a Chat and IM service (web-based) using Perl and ajax. There's a single file "rbim.cgi" which handles ALL the different IM pages (buddylist, room list, chat room window, etc) by changes in the query strings.
To lower download times for the pages on the user's end, and to decrease the number of different pages that rbim.cgi would need to serve, the chat window is all one page (rather than being a frameset).
The dialog area is a scrolled div. The problem is that I can't get the div to scroll to the bottom when new messages are received.
Here's the code as printed by the cgi for this page:
The "dialog" div contains the actual dialog history of the chat room.
So far, I've tried the following to try scrolling the "container" div to the bottom:
Any help would be much appreciated.
I'm programming a Chat and IM service (web-based) using Perl and ajax. There's a single file "rbim.cgi" which handles ALL the different IM pages (buddylist, room list, chat room window, etc) by changes in the query strings.
To lower download times for the pages on the user's end, and to decrease the number of different pages that rbim.cgi would need to serve, the chat window is all one page (rather than being a frameset).
The dialog area is a scrolled div. The problem is that I can't get the div to scroll to the bottom when new messages are received.
Here's the code as printed by the cgi for this page:
Code:
<html>
<head>
<title>RainbowBoi Chat</title>
<link rel="StyleSheet" type="text/css" href="rbim.css">
<script language="JavaScript" type="text/javascript" src="ChatClient.js"></script>
<script language="JavaScript" type="text/javascript">
ChatServer.username = 'kirsle';
ChatServer.uid = '6877e7257f1b0af099e5a25b7ea69e76';
ChatServer.session = "68:8d34203bb5b9ad63cd638efbe2c9a287:61";
</script>
</head>
<body onLoad="init('chatroom','rbc_lobby')" class="tight">
<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="header" height="25" align="left" valign="middle">
<b>RainbowBoi Chat</b>
</td>
<td class="header" height="25" width="150" align="center" valign="middle">
<b><i>Type /help for help</i></b>
</td>
</tr>
<tr>
<td align="left" valign="top">
<div id="container" class="dialog">
<div id="dialog"></div>
<a href="#bottom">bottom</a>
</div>
</td>
<td align="left" valign="top">
<div id="wholist" class="wholist">
</div>
</td>
</tr>
<tr>
<td height="100" colspan="2" align="center" valign="middle">
<table width="90%" border="0" cellspacing="0" cellpadding="0" class="console">
<tr>
<td class="header" align="left" valign="middle">
<b>Talk to us!</b>
</td>
</tr>
<tr>
<td align="center" valign="top">
<form name="console" action="" onSubmit="return chatSend()">
<b>Say:</b>
<input type="text" size="20" name="msg" class="entry" style="width: 70%">
<input type="submit" name="submit" value="Send!" class="cbttn"><br>
<input type="button" value="Exit Room" class="cbttn">
<input type="button" value="Away" class="cbttn">
<input type="button" value="Action" class="cbttn">
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>The "dialog" div contains the actual dialog history of the chat room.
So far, I've tried the following to try scrolling the "container" div to the bottom:
Code:
1) document.getElementById("container").scroll (0,5000);
// syntax error, scroll isn't a property of a div
2) window.location = "#bottom";
// to scroll to the anchor "bottom" which always appears beneath the dialog
3) var d = document.getElementById('dialog');
var e = document.createElement('a');
d.appendChild(e);
e.scrollIntoView(false);
// did nothing
4) Creating a form and a text box at the bottom of the div, trying to [b]focus[/b] the text box and then [b]blur[/b] it after each message is receivedAny help would be much appreciated.