xhtmlchat/index.html at master · InfiniteDevelopment/xhtmlchat · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>XHTML live chat based on the XMLHttpRequest Object</title>
  <meta name="Author" content="Alexander Kohlhofer" />
  <link href="default.css" rel="stylesheet" type="text/css" />
	<script src="scripts.js" language="JavaScript" type="text/javascript"></script>
	<!--


	XHTML live Chat
	author: alexander kohlhofer
 	version: 1.0
 	http://www.plasticshore.com
 	http://www.plasticshore.com/projects/chat/
 	please let the author know if you put any of this to use
 	XHTML live Chat (including this html code) is published under a creative commons license
 	license: http://creativecommons.org/licenses/by-nc-sa/2.0/


	-->
</head>
<body>
  <div id="header">
    <div id="credit">
      <h1>XHTML live Chat</h1>
      <p>by <a href="http://kohlhofer.com" title="visit kohlhofer.com">alexander kohlhofer</a></p>
    </div>
    <h2>chat input</h2>
    <form id="chatForm" name="chatForm" onsubmit="return false;" action="">
      <label for="name">your name:</label><input type="text" size="12" maxlength="30" name="name" id="name" onblur="checkName();" /> <label for="chatbarText">your message:</label> <input type="text" size="55" maxlength="500" name="chatbarText" id="chatbarText" onblur="checkStatus('');" onfocus="checkStatus('active');" /> <input onclick="sendComment();" type="submit" id="submit" name="submit" value="submit" />
    </form>
  </div>
  <div id="content">
    <div id="description">
      <h2>Description</h2>
      <h3>XHTML live Chat based on the XMLHttpRequest Object (ajax)</h3>
      <p>The <a href="http://github.com/kohlhofer/xhtmlchat/tree/master" title="View the sources, start contributing">sources are available on GitHub</a> or you can <a href="ajaxchat.zip">download a zip archive</a>.</p>

      <h3>Known issues</h3>
      <p>Works in latest IE(win), Firefox and Safari.</p>
      <p>As a chat it would be more intuitive if the layout was following the usual chat scheme: input at the bottom, history moving upwards.</p>
      <p>The frequent update cycles should be intelligent (i.e. slow down if nothing has changed or switch into a pause mode)</p>
      <h3>Where do we go from here?</h3>
      <p>Apart from this being a chat I can think of some more (even more useful?) applications:</p>
      <ul>
        <li>An advanced comment function for blogs offering immediate communication between users.</li>
        <li>An advanced shoutbox.</li>
        <li>A live single/multi-user publishing system.</li>
        <li>A XHTML Broadcasting tool for live coverage of events.</li>
      </ul>
      <p>All of these could degrade gracefully if javascript is not available!</p>

      <h3>Credits</h3>
      <p>I have used the following resources:</p>
      <ul>
        <li><a href="http://cavalcante.us/Concursos/Analista_de_Sistemas/Material_Peter/Multiplus/Daves%20Coper/posjava/ajax/Guide%20to%20Using%20XMLHttpRequest%20(with%20Baby%20Steps)%20from%20WebPasties%20-%20Step%20%231%20to%20Step%20%234.htm" title="baby steps to XMLHttpRequest">Guide to Using XMLHttpRequest (with Baby Steps)</a><br />
        Providing all you need to know about XMLHttpRequest.</li>
        <li><a href="http://www.onlinetools.org/articles/unobtrusivejavascript" title="Unobtrusive Javascript">Unobtrusive Javascript</a><br />
        Got me started on the whole javascript thing.</li>
      </ul>
      <h3>Creative Commons License</h3>
            <p>This web site (including XHTML, CSS, Javascript, PHP, all images), unless otherwise noted, is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/2.0/">Creative Commons License</a>.</p>
            <!-- /Creative Commons License -->
<!--
<rdf:RDF xmlns="http://web.resource.org/cc/"
    xmlns:dc="http://purl.org/dc/elements/1.1/"
    xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
<Work rdf:about="">
   <dc:type rdf:resource="http://purl.org/dc/dcmitype/Interactive" />
   <license rdf:resource="http://creativecommons.org/licenses/by-nc-sa/2.0/" />
</Work>

<License rdf:about="http://creativecommons.org/licenses/by-nc-sa/2.0/">
   <permits rdf:resource="http://web.resource.org/cc/Reproduction" />
   <permits rdf:resource="http://web.resource.org/cc/Distribution" />
   <requires rdf:resource="http://web.resource.org/cc/Notice" />
   <requires rdf:resource="http://web.resource.org/cc/Attribution" />
   <prohibits rdf:resource="http://web.resource.org/cc/CommercialUse" />
   <permits rdf:resource="http://web.resource.org/cc/DerivativeWorks" />
   <requires rdf:resource="http://web.resource.org/cc/ShareAlike" />
</License>

</rdf:RDF>

-->


<p>valid <a href="http://validator.w3.org/check?uri=referer">XHTML</a></p>
    </div>
    <div id="chatoutput">

      <h2>chat output</h2>

      <ul id="outputList">
                <li><span class="name">Alex:</span>Hello there! Visit me at <a href="http://kohlhofer.com">kohlhofer.com.</a></li>
      </ul>

    </div>
  </div>

</body>
</html>