public
Description: XHTML live Chat based on the XMLHttpRequest Object (ajax) (implemented in PHP + mySQL)
Homepage: http://chat.plasticshore.com
Clone URL: git://github.com/kohlhofer/xhtmlchat.git
Click here to lend your support to: xhtmlchat and make a donation at www.pledgie.com !
xhtmlchat / index.html
100644 111 lines (94 sloc) 5.596 kb
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
107
108
109
110
111
 <!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="weewarCorner" style="position:absolute; top:0px; right:0px; z-index:99;"><a href="http://weewar.com?referrer=alex" title="Have a little war at Weewar.com"><img style="border-width:0px;" src="http://weewar.com/images/weewar_corner_1.gif" width="75px" height="101px" alt="weewar.com corner"/></a></div>
  <div id="header">
      <!-- google_ad_section_start -->
    <div id="credit">
      <h1>XHTML live Chat</h1>
      <p>by alexander kohlhofer<br />
      <a href="http://plasticshore.com" title="visit the plasticshore">plasticshore.com</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>For feedback and suggestions please use the <a href="http://nokahuna.com/projects/1091" title="View and add tasks for this project">No Kahuna Project</a>.</p>
      <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://www.webpasties.com/xmlHttpRequest" 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://plasticshore.com">plasticshore.com.</a></li>
      </ul>
 
    </div>
  </div>
 
</body>
</html>