function http_object()
{
if (window.XMLHttpRequest)
{
return new XMLHttpRequest();
}
else if(window.ActiveXObject)
{
return new ActiveXObject("Microsoft.XMLHTTP");
}
else
{
document.getElementById('p_status').innerHTML = 'Status: Cound not create XmlHttpRequest Object. Consider upgrading your browser.';
}
}
var fieldname = 'chat';
var last_time = 0;
var xmlHttp = http_object();
var last_id = {LAST_ID};
var type = 'receive';
var post_time = {TIME};
var read_interval = 1500;
var interval = setInterval('handle_send("read", last_id);', read_interval);
var objDiv = document.getElementById(fieldname);
var chatscroll = new Object();
chatscroll.Pane =
function(scrollContainerId)
{
this.bottomThreshold = 25;
this.scrollContainerId = scrollContainerId;
}
chatscroll.Pane.prototype.activeScroll =
function()
{
var scrollDiv = document.getElementById(this.scrollContainerId);
var currentHeight = 0;
if (scrollDiv.scrollHeight > 0)
currentHeight = scrollDiv.scrollHeight;
else
if (objDiv.offsetHeight > 0)
currentHeight = scrollDiv.offsetHeight;
if (currentHeight - scrollDiv.scrollTop - ((scrollDiv.style.pixelHeight) ? scrollDiv.style.pixelHeight : scrollDiv.offsetHeight) < this.bottomThreshold)
scrollDiv.scrollTop = currentHeight;
scrollDiv = null;
}
var divScroll = new chatscroll.Pane('chatbox');
function handle_send(mode, f)
{
if (xmlHttp.readyState == 4 || xmlHttp.readyState == 0)
{
indicator_switch('on');
type = 'receive';
param = 'mode=' + mode;
param += '&last_id=' + last_id;
param += '&last_time=' + last_time;
param += '&last_post=' + post_time;
param += '&read_interval=' + read_interval;
if (mode == 'add' && document.text.message.value != '')
{
type = 'send';
for(var i = 0; i < f.elements.length; i++)
{
elem = f.elements[i];
param += '&' + elem.name + '=' + encodeURIComponent(elem.value);
}
document.text.message.value = '';
}
else if (mode == 'delete')
{
type = 'delete';
param += '&chat_id=' + f;
}
xmlHttp.open("POST", '{FILENAME}', true);
xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xmlHttp.onreadystatechange = handle_return;
xmlHttp.send(param);
}
}
function handle_return()
{
if (xmlHttp.readyState == 4)
{
if (type != 'delete')
{
results = xmlHttp.responseText.split('---');
if (results[1])
{
if (last_id == 0)
{
document.getElementById(fieldname).innerHTML = results[0];
divScroll.activeScroll();
}
else
{
document.getElementById(fieldname).innerHTML = document.getElementById(fieldname).innerHTML + results[0];
divScroll.activeScroll();
}
last_id = results[1];
if (results[2])
{
document.getElementById('whois_online').innerHTML = results[2];
last_time = results[3];
if (results[4] != read_interval * 1000)
{
window.clearInterval(interval);
read_interval = results[4] * 1000;
interval = setInterval('handle_send("read", last_id);', read_interval);
//document.getElementById('update_seconds').innerHTML = results[4];
}
post_time = results[5];
}
}
}
indicator_switch('off');
}
}
function delete_post(chatid)
{
document.getElementById('p' + chatid).style.display = 'none';
handle_send('delete', chatid);
}
function indicator_switch(mode)
{
if(document.getElementById("act_indicator"))
{
var img = document.getElementById("act_indicator");
if(img.style.visibility == "hidden" && mode == 'on')
{
img.style.visibility = "visible";
}
else if (mode == 'off')
{
img.style.visibility = "hidden"
}
}
}
<!-- IF S_GET_CHAT -->
<!-- IF S_READ or S_ADD -->
<!-- BEGIN chatrow -->
<div id="p{chatrow.MESSAGE_ID}" class="post bg{chatrow.CLASS}">
<!-- IF U_ACP or U_MCP -->
<a href="javascript:void({chatrow.MESSAGE_ID})" title="{L_DELETE_POST}" onclick="delete_post('{chatrow.MESSAGE_ID}')" style="float:right;">{L_DELETE_POST}</a>
<!-- ENDIF -->
<span class="author" id="profile{postrow.POST_ID}">{chatrow.USERNAME_FULL}</span>
<!-- <span class="time"> ({chatrow.TIME}):</span> -->
<span class="content">{chatrow.MESSAGE}</span>
</div>
<!-- END chatrow -->---{LAST_ID}
<!-- IF S_WHOISONLINE -->---
<!-- BEGIN whoisrow -->
<div>
<div class="inner">
<div class="user"><img src="{T_IMAGESET_PATH}/{whoisrow.USER_STATUS}.png" class="online_img" /> : {whoisrow.USERNAME_FULL}</div>
</div>
</div>
<!-- END whoisrow -->---{LAST_TIME}---{DELAY}---{LAST_POST}
<!-- ENDIF -->
<!-- ENDIF -->
<!-- ELSE -->
<!-- IF S_CHAT -->
<!-- INCLUDE overall_header.html -->
<!-- ENDIF -->
<script type="text/javascript">
<!--
function http_object()
{
if (window.XMLHttpRequest)
{
return new XMLHttpRequest();
}
else if(window.ActiveXObject)
{
return new ActiveXObject("Microsoft.XMLHTTP");
}
else
{
document.getElementById('p_status').innerHTML = 'Status: Cound not create XmlHttpRequest Object. Consider upgrading your browser.';
}
}
var fieldname = 'chat';
var last_time = 0;
var xmlHttp = http_object();
var last_id = {LAST_ID};
var type = 'receive';
var post_time = {TIME};
var read_interval = 1500;
var interval = setInterval('handle_send("read", last_id);', read_interval);
var objDiv = document.getElementById(fieldname);
var chatscroll = new Object();
chatscroll.Pane =
function(scrollContainerId)
{
this.bottomThreshold = 25;
this.scrollContainerId = scrollContainerId;
}
chatscroll.Pane.prototype.activeScroll =
function()
{
var scrollDiv = document.getElementById(this.scrollContainerId);
var currentHeight = 0;
if (scrollDiv.scrollHeight > 0)
currentHeight = scrollDiv.scrollHeight;
else
if (objDiv.offsetHeight > 0)
currentHeight = scrollDiv.offsetHeight;
if (currentHeight - scrollDiv.scrollTop - ((scrollDiv.style.pixelHeight) ? scrollDiv.style.pixelHeight : scrollDiv.offsetHeight) < this.bottomThreshold)
scrollDiv.scrollTop = currentHeight;
scrollDiv = null;
}
var divScroll = new chatscroll.Pane('chatbox');
function handle_send(mode, f)
{
if (xmlHttp.readyState == 4 || xmlHttp.readyState == 0)
{
indicator_switch('on');
type = 'receive';
param = 'mode=' + mode;
param += '&last_id=' + last_id;
param += '&last_time=' + last_time;
param += '&last_post=' + post_time;
param += '&read_interval=' + read_interval;
if (mode == 'add' && document.text.message.value != '')
{
type = 'send';
for(var i = 0; i < f.elements.length; i++)
{
elem = f.elements[i];
param += '&' + elem.name + '=' + encodeURIComponent(elem.value);
}
document.text.message.value = '';
}
else if (mode == 'delete')
{
type = 'delete';
param += '&chat_id=' + f;
}
xmlHttp.open("POST", '{FILENAME}', true);
xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xmlHttp.onreadystatechange = handle_return;
xmlHttp.send(param);
}
}
function handle_return()
{
if (xmlHttp.readyState == 4)
{
if (type != 'delete')
{
results = xmlHttp.responseText.split('---');
if (results[1])
{
if (last_id == 0)
{
document.getElementById(fieldname).innerHTML = results[0];
divScroll.activeScroll();
}
else
{
document.getElementById(fieldname).innerHTML = document.getElementById(fieldname).innerHTML + results[0];
divScroll.activeScroll();
}
last_id = results[1];
if (results[2])
{
document.getElementById('whois_online').innerHTML = results[2];
last_time = results[3];
if (results[4] != read_interval * 1000)
{
window.clearInterval(interval);
read_interval = results[4] * 1000;
interval = setInterval('handle_send("read", last_id);', read_interval);
//document.getElementById('update_seconds').innerHTML = results[4];
}
post_time = results[5];
}
}
}
indicator_switch('off');
}
}
function delete_post(chatid)
{
document.getElementById('p' + chatid).style.display = 'none';
handle_send('delete', chatid);
}
function indicator_switch(mode)
{
if(document.getElementById("act_indicator"))
{
var img = document.getElementById("act_indicator");
if(img.style.visibility == "hidden" && mode == 'on')
{
img.style.visibility = "visible";
}
else if (mode == 'off')
{
img.style.visibility = "hidden"
}
}
}
-->
</script>
<style type="text/css">
<!--
#act_indicator {
visibility:hidden;
}
.shouts {
width: 85%;
height:300px;
overflow:auto;
float:left;
}
#chat {
width: 100%;
text-align:left;
}
#chat * {
margin:0px;
padding:0px;
min-height:0px;
}
.post {
font-size:1.2em;
}
.postprofile {
min-height: 5px !important;
}
.chatform {
width: 90%;
text-align:center;
}
.onlinelist {
width: 15%;
overflow:auto;
height:300px;
}
.users {
width: 90%;
text-align: left;
text-indent: 5px;
margin-left:auto;
margin-right:auto;
}
.user {
width: 95%;
font-size: 1.1em;
font-family:Verdana, Arial, Helvetica, sans-serif;
line-height: 1.4em;
}
#act_indicator {
visibility: hidden;
}
.chatinput {width: 80% !important;}
.online_img {
vertical-align:middle;
}
-->
</style>
<!-- IF S_CHAT -->
<style type="text/css">
<!--
.shouts {
height:400px;
}
.onlinelist {
height:400px;
}
-->
</style>
<!-- ENDIF -->
<div class="forabg" align="left">
<div class="inner">
<span class="corners-top"><span></span></span>
<div class="shouts" id="chatbox">
<div id="chat">
<!-- BEGIN chatrow -->
<div id="p{chatrow.MESSAGE_ID}" class="post bg{chatrow.CLASS}">
<!-- IF U_ACP or U_MCP -->
<a href="javascript:void({chatrow.MESSAGE_ID})" title="{L_DELETE_POST}" onclick="delete_post('{chatrow.MESSAGE_ID}')" style="float:right;">{L_DELETE_POST}</a
><!-- ENDIF -->
<span class="author" id="profile{postrow.POST_ID}">{chatrow.USERNAME_FULL}</span>
<!-- <span class="time"> ({chatrow.TIME}):</span> -->
<span class="content">{chatrow.MESSAGE}</span>
</div>
<!-- END chatrow -->
</div>
</div>
<div class="onlinelist bg1">
<div class="users" id="whois_online">
<!-- BEGIN whoisrow -->
<div>
<div class="inner">
<div class="user"><img src="{T_IMAGESET_PATH}/{whoisrow.USER_STATUS}.png" class="online_img" /> {whoisrow.USERNAME_FULL}</div>
</div>
</div>
<!-- END whoisrow -->
</div>
</div>
<span class="corners-bottom"><span></span></span>
</div>
</div>
<!-- IF S_USER_LOGGED_IN -->
<div class="forabg">
<div class="inner">
<span class="corners-top"><span></span></span>
<div class="chatform" align="center">
<form name="text" id="text" method="post" action="javascript:void(0);" onsubmit="handle_send('add', this)" autocomplete="off">
<strong style="color: white;">{L_MESSAGE}:</strong> <input type="text" tabindex="1" name="message" id="message" class="inputbox chatinput" />
<input type="submit" class="button1" value="{L_SUBMIT}" name="submit" tabindex="6" accesskey="s"/>
</form>
</div>
<span class="corners-bottom"><span></span></span>
</div>
</div>
<!-- ENDIF -->
<!-- IF S_CHAT -->
<!-- INCLUDE overall_footer.html -->
<!-- ENDIF -->
<!-- ENDIF -->
Refactorings
No refactoring yet !
This code clumsily handles the client side of an AJAX chat found at http://www.roleplaygateway.com/chat.php - it's slow and unwieldy. The divScroll.activeScroll(); is undependable, too - it doesn't seem to work at times (the div stops scrolling, and the user has to scroll down to see new messages. This is only supposed to occur when they've manually scrolled the chatbox div, and then it should return to the autoscroll behavior when they've scrolled down).