Simple Javascript (and CSS) for Reputation

On our chat page, the messages currently come in, with the newest at the top. We'd like to invert that, and put the newest messages at the bottom. Should be a very simple JS fix.

For an additional rep point, we need to condense each message to have less padding and margins, make them closer together.

Firefox's Firebug and Web Developer extensions may help. A CSS fix is easy, but fixing the Javascript to update the page with the right code isn't.

I might even give a cash bonus if the solution is nice and pretty.

 

Oh, slight update. We moved the chat page back to our old page, until we get the issues worked out. You can find the same page on the bottom of our roleplaying index. Thanks in advance to whoever helps!

 

On around line 191, after this:

results = xmlHttp.responseText.split('---');

Code (markup):

add:

results = xmlHttp.responseText.split('---');
results = results.reverse();

Code (markup):

Couldn't find the css styles at all :| well i found some, but none of the id's and classes associated with the chat, from what i can tell it uses the same styles as your forum, so unless you make new ones, if you changed the shoutbox css then the forum would as well.

Could be wrong though

 

Second time typing this post. ~_~

JS didn't work, here's the relevant code....

<!-- IF S_GET_CHAT -->
	<!-- IF S_READ or S_ADD -->
		<!-- BEGIN chatrow -->
			<div id="p{chatrow.MESSAGE_ID}" class="post bg{chatrow.CLASS}">
				<span class="author" id="profile{postrow.POST_ID}">{chatrow.USERNAME_FULL}</span>
				<span class="time"> ({chatrow.TIME}):</span>
				<span class="content">{chatrow.MESSAGE}</span>
				<!-- IF U_ACP or U_MCP -->
					<ul class="profile-icons postprofile">
						<li class="delete-icon">
							<a href="javascript:void({chatrow.MESSAGE_ID})" title="{L_DELETE_POST}" onclick="delete_post('{chatrow.MESSAGE_ID}')"><span>{L_DELETE_POST}</span></a>
						</li>
					</ul>
				<!-- ENDIF -->
			</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">
	<!--
	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);

	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];
					}
					else
					{
						document.getElementById(fieldname).innerHTML = results[0] + document.getElementById(fieldname).innerHTML;
					}
					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"
			}	
		}
	}
	
	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.';
		}
	}
	-->
	</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>
	<div class="forabg" align="left">
		<div class="inner">
			<span class="corners-top"><span></span></span>
			<div class="shouts">
				<div id="chat">
					<!-- BEGIN chatrow -->
						<div id="p{chatrow.MESSAGE_ID}" class="post bg{chatrow.CLASS}">
							<span class="author" id="profile{postrow.POST_ID}">{chatrow.USERNAME_FULL}</span>
							<span class="time"> ({chatrow.TIME}):</span>
							<span class="content">{chatrow.MESSAGE}</span>
							<!-- IF U_ACP or U_MCP -->
								<ul class="profile-icons postprofile" style="display:inline;">
									<li class="delete-icon">
										<a class="delete-icon" href="javascript:void({chatrow.MESSAGE_ID})" title="{L_DELETE_POST}" onclick="delete_post('{chatrow.MESSAGE_ID}')"><span>{L_DELETE_POST}</span></a>
									</li>
								</ul>
							<!-- ENDIF -->
						</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"/><br />
					</form>
				</div>
				<span class="corners-bottom"><span></span></span>
			</div>
		</div>
	<!-- ENDIF -->
	<!-- IF S_CHAT -->
		<!-- INCLUDE overall_footer.html -->
	<!-- ENDIF -->
<!-- ENDIF -->

Code (markup):

 

Try reversing the order of the line in boldface, like the following, and include the new line, as shown:

else
					{
						document.getElementById(fieldname).innerHTML = document.getElementById(fieldname).innerHTML + results[0];
document.getElementById(fieldname).scrollTop = document.getElementById(fieldname).scrollHeight;
					}

Code (markup):

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];
					}
					else
					{
						document.getElementById(fieldname).innerHTML = [B]results[0] + document.getElementById(fieldname).innerHTML;[/B]
					}
					last_id = results[1];
					if (results[2])
					{
						document.getElementById('whois_online').innerHTML = results[2];
						last_time = results[3];
						if (results[4] != read_interval * 1000)
						{

Code (markup):

 

That code posts the new messages to the bottom, but does not display old messages bottom up.

Current code:

<!-- 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">
	<!--
	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);

	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];
					}
					else
					{
						document.getElementById(fieldname).innerHTML = results[0] + document.getElementById(fieldname).innerHTML;
						document.scrollTop = document.scrollHeight;
					}
					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"
			}	
		}
	}
	
	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.';
		}
	}
	-->
	</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">
				<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"/><br />
					</form>
				</div>
				<span class="corners-bottom"><span></span></span>
			</div>
		</div>
	<!-- ENDIF -->
	<!-- IF S_CHAT -->
		<!-- INCLUDE overall_footer.html -->
	<!-- ENDIF -->
<!-- ENDIF -->

Code (markup):