PageRenderTime 25ms CodeModel.GetById 18ms app.highlight 5ms RepoModel.GetById 1ms app.codeStats 0ms

/tags/1.2/src/main/webapp/example/chat.html

http://jquery-stream.googlecode.com/
HTML | 83 lines | 76 code | 7 blank | 0 comment | 0 complexity | e5e8019c06d84634925653ba6c24ad29 MD5 | raw file
 1<!DOCTYPE html>
 2<html>
 3	<head>
 4		<title>Chat</title>
 5		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 6		<script type="text/javascript" src="../jquery.js"></script>
 7		<script type="text/javascript" src="../jquery.stream.js"></script>
 8		<script type="text/javascript">
 9		$.stream.setup({enableXDR: true});
10
11		var chat = {
12			lastUsername: "Donghwan Kim",
13			username: $.trim(window.prompt("Username?")) || "Anonymous" + $(window).width()
14		};
15				
16		$(function() {
17			
18			$.stream("chat", {
19				dataType: "json",
20				context: $("#content")[0],
21				open: function() {
22					$("#editor .message").removeAttr("disabled").focus();
23					$.stream().send({username: chat.username, message: "Hello"});
24				},
25				message: function(event) {
26					if (chat.lastUsername !== event.data.username) {
27						$("<p />").addClass("user").text(chat.lastUsername = event.data.username).appendTo(this);
28					}
29					
30					$("<p />").addClass("message").text(event.data.message).appendTo(this);
31					this.scrollTop = this.scrollHeight;
32				},
33				error: function() {
34					$("#editor .message").attr("disabled", "disabled");
35				},
36				close: function() {
37					$("#editor .message").attr("disabled", "disabled");
38				}
39			});
40			
41			$("#editor .user").text(chat.username);
42			$("#editor .message").keyup(function(event) {
43				if (event.which === 13 && $.trim(this.value)) {
44					$.stream().send({username: chat.username, message: this.value});
45					this.value = "";
46				}
47			});
48			
49			$(window).resize(function() {
50				$("#content")
51				.height($(window).height() - $("#editor").outerHeight(true) - 15)
52				.each(function() {
53					this.scrollTop = this.scrollHeight;
54				});
55			}).resize();
56			
57		});
58		</script>
59		<style>
60		body {padding: 0; margin: 0; min-width: 320px; font-family: 'Trebuchet MS','Malgun Gothic',Verdana,Helvetica,Arial,sans-serif; font-size: 62.5%; color: #333333}
61		.content {height: 100%; overflow-y: auto; padding: 14px 15px 0 25px;}
62		.content p {margin: 0; padding: 0;}
63		.content .user {font-size: 1.8em; color: #3e3e3e; font-weight: bold; letter-spacing: -1px; margin-top: 0.5em;}
64		.content .message {font-size: 1.3em; color: #444444; line-height: 1.7em; word-wrap: break-word;}
65		.editor {margin: 0 25px 15px 25px;}
66		.editor .user {font-size: 1.5em; display: inline-block; margin: 1em;}
67		.editor input {font-family: 'Trebuchet MS','Malgun Gothic',Verdana,Helvetica,Arial,sans-serif;}
68		.editor .message {width: 100%; height: 28px; line-height: 28px; border: medium none; border-color: #E5E5E5 #DBDBDB #D2D2D2; border-style: solid; border-width: 1px;}
69		</style>
70	</head>
71	<body>
72		<div id="content" class="content">
73			<p class="user"><span>Donghwan Kim</span></p>
74			<p class="message">Welcome to jQuery Stream!</p>
75		</div>
76		<div id="editor" class="editor">
77			<p class="user"></p>
78			<form action="#" onsubmit="return false;">
79				<input class="message" type="text" disabled="disabled" />
80			</form>
81		</div>
82	</body>
83</html>