This JavaScript code example (JavaScript chat code) just help you learn more OOP in JavaScript by making a message box with chat-style window. A simple free JavaScript chat effect with a few codelines... detail at JavaScriptBank. com - 2.000+ free JavaScript codes

[IMG]hxxp ://w w w.javascriptbank. com/javascript.images/misc/simple-javascript-chat-box-with-oop-skill.jpg[/IMG]
Demo: JavaScript Simple JavaScript Chat Box with OOP Skill

How to setup

Step 1: Use CSS code below for styling the script
CSS
Code:
<style type="text/css">
div#list {
  background-color: #DFDFDF;
  color: #000;
  overflow: scroll;
  width: 15em;
  height: 10em;
  padding: 10px;
  text-align: left;
}
</style>
Step 2: Use JavaScript code below to setup the script
JavaScript
Code:
<script type="text/javascript">
// Created by: James Robertson | hxxp ://w w w.r0bertson.co.uk
// This script downloaded from w w w.JavaScriptBank. com

function addText() {
  olist = document.getElementById('list');
  op = document.createElement('p');
  op.innerHTML = 'More text ...';
  ocontent = document.getElementById('content');
  ocontent.appendChild(op);
  olist.scrollTop = olist.scrollHeight;
}
</script>
Step 3: Copy & Paste HTML code below in your BODY section
HTML
Code:
<p>A simple chat-style display</p>

<div id="list">
  <div id="content">
  <p class="other_user">Good afternoon. How are you?</p>
  <p class="other_user">Hello?</p>
  <p class="other_user">Is anybody there?</p>
  </div>
</div>
<p>
<div id="toolbar"><input type="button" value="add text" onclick="addText()" /></div>





JavaScript Countdown Timer - JavaScript Web based Music Player - Free JavaScript Codes