Facebook Type Chat Box

Lets make a Facebook Type Chat Box. Believe me its so much fun ;)

by Alexus fox

HTML

<div id="fixed">
  <div class="fixedHeader">CHAT</div>
  <div class="fixedContent"></div>
  <div class="chatbox">
    <textarea class="userinput" style="height: 16px; ">Talk to me...</textarea>
  </div>
</div>

CSS

#fixed {
  bottom: 30px;
  left: 50%;
  margin-left: -200px;
  overflow: hidden;
  padding: 0 5px;
  position: fixed;
  width: 400px;
  z-index: 1001;
}

.fixedHeader {
  background:white; repeat scroll 0 0 ;grey;
  border-bottom: none;
  color:black;
  height: 0px;
  margin: 0 auto;
  padding: 0px;
  width: 390px;
  font-weight: 700;
  font-size: 30px;
}

.fixedContent {
  background: none repeat scroll 0 0 #ffffff;

  margin: 20;
  width: 400px;
  height: 200px;
  overflow: auto;
}

.userinput {
  width: 390px;
  height: 16px;
  outline: none;
  display: block;
  resize: none;
  padding: 5px;
}

.messages {
  color: #333;
  line-height: 1.28;
  padding: 5px;
  margin-left: 70px;
  font-size: 14px;
  display: block;
}

.userwrap {
  position: relative;
}

.user {
  padding: 5px;
  font-size: 12px;
  color: #888;
  font-weight: 700;
  position: absolute;
  left: 0;
  top: 0;
}

JavaScript

var toggle = false;
var user = "chater";
var searchBoxText = "Type here...";
var fixIntv;
var fixedBoxsize = $('#fixed').outerHeight() + 'px';
var Parent = $("#fixed"); // cache parent div
var Header = $(".fixedHeader"); // cache header div
var Chatbox = $(".userinput"); // cache header div
Parent.css('height', '30px');

Header.click(function() {
  toggle = (!toggle) ? true : false;
  if (toggle) {
    Parent.animate({
      'height': fixedBoxsize
    }, 300);
  } else {
    Parent.animate({
      'height': '30px'
    }, 300);
  }

});

Chatbox.focus(function() {
  $(this).val(($(this).val() == searchBoxText) ? '' : $(this).val());
}).blur(function() {
  $(this).val(($(this).val() == '') ? searchBoxText : $(this).val());
}).keyup(function(e) {
  var code = (e.keyCode ? e.keyCode : e.which);
  if (code == 13) {
    $('.fixedContent').append("<div class='userwrap'><span class='user'>" + user + "</span><span class='messages'>" + $(this).val() + "</span></div>");
    event.preventDefault();

    $(".fixedContent").scrollTop($(".fixedContent").height());
    $(this).val('');
  }

});