[JavaScriptBank]

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

Demo: JavaScript Simple JavaScript Chat Box with OOP Skill

How to setup

Step 1: Use CSS code below for styling the script
CSS

<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: Place JavaScript below in your HEAD section
JavaScript

<script type="text/javascript">
// Created by: James Robertson | http://www.r0bertson.co.uk
// This script downloaded from www.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: Place HTML below in your BODY section
HTML

<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 floating message - Javascript multi level drop down menu - JavaScript in_array()