Location: PHPKode > scripts > Simple jQuery Chatroom > jquery_simplechatroom/www/chatroom.php
<?php
require('chatconfig.php');
?><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>

<title>Simple jQuery Chatroom : AdvanceByDesign</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Author" content="AdvanceByDesign">

<script language="Javascript" type="text/Javascript" src="jquery.js"></script>
<script language="Javascript" type="text/Javascript">
<!--
var chat_username = "";
var chat_refresh = 0;
var last_update = 0;
var last_post = 0;
var post_delay = <?php echo $chat_timelimit; ?>;
var post_delay_comment = 0;

function chat_delay_update() {
	tmp = (new Date().getTime()/1000);
	if((last_post+post_delay)<tmp) {
		$("#id_chat_delay").css("display","none");
		$("#id_chat_send").removeAttr('disabled');
		clearInterval(post_delay_comment);
		return;
	}
	
	$("#id_chat_delay").html("You can post again in "+Math.round((last_post+post_delay)-tmp)+" seconds...");
}

function chat_update() {
	last_update = new Date().getTime();
	
	$.get("chatview.php", { lastfetch : last_update }, function(data) {
		$("#chat_text").html(data);
		$("#chat_text").scrollTop($("#chat_text").height()+$("#chat_text").scrollTop());
	});
}

function post_message() {
	if((last_post+post_delay)>=(new Date().getTime()/1000)) { return; }
	
	var chat_message = $("#id_chat_message").val();
	if(chat_message.length) {
		$.post("chatsend.php",{ username : chat_username, message : chat_message });
		$("#id_chat_message").val("");
	}
	
	$("#id_chat_send").attr('disabled','disabled');
	last_post = (new Date().getTime()/1000);
	post_delay_comment = window.setInterval('chat_delay_update();', 1000);
	chat_delay_update();
	$("#id_chat_delay").css("display","block");
}

$(function() {
	$("#chat_container").css("display","block");
	
	$("#id_chat_set_username").click(function() {
		var tmp = $("#id_chat_username").val();
		
		if(tmp.match(/^[a-z0-9_\-\s]{3,12}$/i)==null) {
			$("#id_chat_username").addClass("chat_bad_username");
		} else {
			$("#chat_form_username").css("display","none");
			$("#chat_form_message").css("display","block");
			chat_username = tmp;
			
			chat_refresh = window.setInterval('chat_update();', <?php echo $chat_refresh*1000; ?>);
			
			$("#id_chat_send").click(function() {
				post_message();
			});
			$("#id_chat_message").keypress(function(event) {
				if(event.which==13) {
					post_message();
				}
			});
		}
	});
});
// -->
</script>

<style type="text/css">
body {
	font-size:0.7em;
	font-family:Helvetica, Arial, sans-serif;
	color:#777777;
}
#chat_container {
	display:none;
	padding:5px;
	border:2px solid #DDDDDD;
	border-radius:8px;
	width:420px;
	text-align:left;
}
.chat_bad_username {
	border:3px solid #C00;
	
}
#id_chat_username {
	width:200px;
}
#id_chat_set_username {
	width:120px;
}
#chat_text {
	width:400px;
	height:150px;
	border:1px solid #CCC;
	padding:8px;
	overflow:auto;
}
#chat_form_message {
	display:none;
}
#id_chat_message {
	width:300px;
}
#id_chat_send {
	width:100px;
}

.chat_line { }
.chat_user {
	font-weight:bold;
	color:#CC0000;
	padding-right:8px;
}
#chat_noscript div {
	padding:10px;
	width:400px;
	border:2px solid #CC0000;
	background-color:#FFFFDD;
}
#id_chat_delay {
	display:none;
	font-weight:bold;
	color:#999999;
}
</style>
</head>

<body>

<noscript id="chat_noscript">
<div>Your browser must have Javascript enabled to use the chatroom.</div>
</noscript>
<center>
<div id="chat_container">
	<p><h1>Simple chat room</h1>
	Simple jQuery chat room.  This software is provided completely free by AdvanceByDesign!
	</p>
	<div id="chat_text">Please enter a username!</div>
	<div id="chat_form">
		<div id="chat_form_username">
			<input type="text" maxlength="12" id="id_chat_username">
			<input type="button" value="Set" id="id_chat_set_username">
			<p id="chat_form_bad_username">
				Your username can only contain letters, numbers, underscores, hyphens,
				and blank spaces, and must be between 3 and 12 characters in length.
			</p>
		</div>
		<div id="chat_form_message">
			<input type="text" id="id_chat_message" placeholder="Enter message here" maxlength="<?php echo $chat_maxline; ?>">
			<input type="button" id="id_chat_send" value="Send">
			
			<div id="id_chat_delay">
				Please wait before posting again...
			</div>
		</div>
	</div>
</div>
</center>

</body>
</html>
Return current item: Simple jQuery Chatroom