more chat work - this time the ajax bits to actually show chats on the page

1 files changed, 34 insertions, 5 deletions

diff --git a/view/tpl/chat.tpl b/view/tpl/chat.tpl
index c65c117cd..f3f3ee5bd 100644
--- a/view/tpl/chat.tpl
+++ b/view/tpl/chat.tpl
@@ -1,12 +1,13 @@
-<div id="chatContainer" style="height: 100%; width: 100%; position: absolute; right: 0; bottom: 0;">
+<div id="chatContainer" style="height: 100%; width: 100%;">
 
-    <div id="chatTopBar" style="float: left; height: 80%;"></div>
-    <div id="chatLineHolder"></div>
+    <div id="chatTopBar" style="float: left; height: 400px; width: 400px; overflow-y: auto;">
+    	<div id="chatLineHolder"></div>
+	</div>
 
     <div id="chatUsers" style="float: right; width: 120px; height: 100%; border: 1px solid #000;" ></div>
 
 	<div class="clear"></div>
-    <div id="chatBottomBar" style="position: absolute; bottom: 0; height: 150px;">
+    <div id="chatBottomBar" style="position: relative; bottom: 0; height: 150px; margin-top: 20px;">
         <div class="tip"></div>
 
         <form id="chat-form" method="post" action="#">
@@ -18,12 +19,23 @@
     </div>
 
 </div>
+<style>
+section {
+	padding-bottom: 0;
+}
+</style>
 
 <script>
 var room_id = {{$room_id}};
 var last_chat = 0;
 var chat_timer = null;
 
+$(document).ready(function() {
+	chat_timer = setTimeout(load_chats,300);
+
+});
+
+
 $('#chat-form').submit(function(ev) {
 	$('body').css('cursor','wait');
 	$.post("chatsvc", $('#chat-form').serialize(),function(data) {
@@ -49,11 +61,28 @@ function load_chats() {
 }
 
 function update_inroom(inroom) {
-
+	var html = document.createElement('div');
+	var count = inroom.length;
+	$.each( inroom, function(index, item) {
+		var newNode = document.createElement('div');
+		$(newNode).html('<img style="height: 32px; width: 32px;" src="' + item.img + '" alt="' + item.name + '" />');
+		html.appendChild(newNode); 		
+	});
+	$('#chatUsers').html(html);	
 }
 
 function update_chats(chats) {
 
+	var count = chats.length;
+	$.each( chats, function(index, item) {
+		last_chat = item.id;
+		var newNode = document.createElement('div');
+		$(newNode).html('<div style="margin-bottom: 5px; clear: both;"><img style="height: 32px; width: 32px; float: left;" src="' + item.img + '" alt="' + item.name + '" /><div class="chat-body; style="float: left; width: 80%;">' + item.text + '</div></div>');
+		$('#chatLineHolder').append(newNode);
+		});
+	var elem = document.getElementById('chatTopBar');
+	elem.scrollTop = elem.scrollHeight;
+
 }
 
 </script>