Javascript CSS Direct Messaging Live Chat Room Example

by Posted on

Javascript CSS Direct Messaging Live Chat Room Example
This is surely going to get you excited. Its dim background and contemporary looks makes it an incredible format anytime quickly. The designer has given you a mobile phone feel in the design. As this is a Live Chat, an instant reply will be given for each of your messages.All important elements like Name of the person you are chatting with, Image, Message Delivery time and more are included.This format likewise doesn’t give any issues with back end incorporation.

Javascript CSS Direct Messaging Live Chat Room Example

HTML

 
<div class="chat">
  <div class="chat-title">
    <h2>Kelly Chen</h2>
    <figure class="avatar"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/764024/profile/profile-512.jpg"/></figure>
  </div>
  <div class="messages">
    <div class="messages-content"></div>
  </div>
  <div class="action-box">
    <textarea class="action-box-input" type="text" placeholder="Type message..."></textarea>
    <button class="action-box-submit" type="submit" onclick="insertMessage()"><i class="fa fa-paper-plane"></i></button>
  </div>
</div>


CSS

body .chat, body .messages-content .message.typing::after, body .messages-content .message.typing span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
 
body .chat-title::after, body .action-box::after {
  content: "";
  display: block;
  clear: both;
}
 
@keyframes ball {
  0% {
    margin-top: 0;
  }
  20% {
    margin-top: 3px;
  }
  80% {
    margin-top: -5px;
  }
}
@keyframes pop {
  0% {
    transform: scale(0.6);
  }
  30% {
    transform: scale(1.1);
  }
  60% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
.mCSB_container {
  margin: 0 !important;
}
 
.mCSB_scrollTools {
  margin-right: -3px;
}
 
* {
  outline: none;
}
 
body, html {
  margin: 0;
  height: 100%;
  width: 100%;
}
 
html {
  background: #bdc3c7;
  background: -webkit-linear-gradient(to right bottom, #bdc3c7, #2c3e50);
  background: linear-gradient(to right bottom, #bdc3c7, #2c3e50);
}
 
body {
  font-family: "Microsoft JhengHei", Arial, sans-serif;
  background: url("https://www.transparenttextures.com/patterns/45-degree-fabric-light.png");
  letter-spacing: 1px;
}
body .chat {
  width: 300px;
  height: 80vh;
  max-height: 500px;
  border-radius: 15px;
  background-color: rgba(0, 0, 0, 0.5);
  overflow: hidden;
}
body .chat-title {
  background-color: rgba(0, 0, 0, 0.3);
  width: 100%;
  height: 50px;
}
body .chat-title h2 {
  margin: 10px 0;
  padding: 0;
  color: #f0f0f0;
  font-weight: normal;
  font-size: 16px;
  display: inline-block;
  line-height: 30px;
}
body .chat-title .avatar {
  float: left;
  margin: 10px;
  padding: 0;
  width: 30px;
  height: 30px;
}
body .chat-title .avatar img {
  border-radius: 50%;
  width: 30px;
  height: 30px;
}
body .messages {
  width: 100%;
  height: calc(100% - 90px);
}
body .messages-content {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  box-sizing: border-box;
}
body .messages-content .message {
  max-width: calc(100% - 76px);
  padding: 8px;
  margin: 8px 0 8px 12px;
  border-radius: 5px;
  background-color: rgba(170, 187, 204, 0.1);
  color: #e3e3e3;
  float: left;
  font-size: 13px;
  position: relative;
  word-break: break-all;
  clear: both;
  animation: pop 0.3s forwards;
}
body .messages-content .message .timestamp {
  position: absolute;
  right: -40px;
  bottom: 0;
  font-size: 12px;
  color: #bababa;
}
body .messages-content .message.personal {
  float: right;
  margin: 8px 12px 8px 0;
}
body .messages-content .message.personal .timestamp {
  right: auto;
  left: -40px;
}
body .messages-content .message.typing {
  width: 30px;
  height: 16px;
}
body .messages-content .message.typing::after {
  content: "";
  border-radius: 50%;
  width: 3px;
  height: 3px;
  background-color: white;
  transform: translate(-50%, -50%);
  animation: ball 1.2s infinite linear;
}
body .messages-content .message.typing span {
  width: 3px;
  height: 3px;
  transform: translate(-50%, -50%);
}
body .messages-content .message.typing span::before, body .messages-content .message.typing span::after {
  content: "";
  border-radius: 50%;
  width: 3px;
  height: 3px;
  position: absolute;
  background-color: white;
  animation: ball 1.2s infinite linear;
}
body .messages-content .message.typing span::before {
  left: 8px;
  animation-delay: 0.3s;
}
body .messages-content .message.typing span::after {
  right: 8px;
  animation-delay: -0.3s;
}
body .action-box {
  background-color: rgba(0, 0, 0, 0.3);
  width: 100%;
  height: 40px;
}
body .action-box-input, body .action-box-submit {
  box-sizing: border-box;
  border: 0;
  float: left;
}
body .action-box-input {
  width: calc(100% - 60px);
  height: 20px;
  background-color: transparent;
  resize: none;
  color: white;
  margin: 10px 0;
  padding: 0 10px;
  line-height: 20px;
  font-size: 16px;
  letter-spacing: 1px;
  overflow: hidden;
}
body .action-box-input::-webkit-input-placeholder {
  line-height: 20px;
  font-size: 13px;
}
body .action-box-submit {
  width: 60px;
  height: 40px;
  background-color: rgba(189, 195, 199, 0.2);
  color: white;
  cursor: pointer;
}


JS

(function () {
  // JS practice.
  // Reference：https://codepen.io/supah/pen/jqOBqp
  // It's Cool ! ↑
  var fakeMsg, fakeNum, isTyping, messages, uctTimer;
 
  messages = $(".messages-content");
 
  fakeNum = 0;
 
  isTyping = true;
 
  uctTimer = null;
 
  window.userTypingClear = function () {
    return uctTimer = setTimeout(function () {
      $(".message.personal.typing").remove();
      return isTyping = true;
    }, 3500);
  };
 
  window.setDate = function () {
    var d, timestamp;
    timestamp = $("<div>").addClass("timestamp");
    d = new Date();
    timestamp.text(d.getHours() + ":" + (d.getMinutes() < 10 ? '0' : '') + d.getMinutes());
    return timestamp.appendTo($('.message:last'));
  };
 
  window.updateScrollbar = function () {
    return messages.mCustomScrollbar("update").mCustomScrollbar('scrollTo', 'bottom', {
      scrollInertia: 10,
      timeout: 0 });
 
  };
 
  fakeMsg = ["Hi there, I\'m Kelly and you?", "Nice to meet you", "How are you doing?", "Pretty good", "How\'s life been treating you?", "It could be worse, thanks", "I\'ve gotta go now", "It was a pleasure chat with you", "Bye :)"];
 
  window.setFakeMessage = function () {
    var typing;
    typing = $("<div>").append("<span>").addClass("message typing");
    typing.appendTo($('.mCSB_container'));
    updateScrollbar();
    return setTimeout(function () {
      var msg;
      typing.remove();
      msg = $("<div>").addClass("message");
      msg.text(fakeMsg[fakeNum]);
      msg.appendTo($('.mCSB_container'));
      setDate();
      updateScrollbar();
      return fakeNum++;
    }, 1000 + Math.random() * 10 * 100);
  };
 
  window.insertMessage = function () {
    var msg, msgText;
    msgText = $(".action-box-input").val();
    if ($.trim(msgText) === "") {
      return false;
    }
    msg = $("<div>").addClass("message");
    msg.text(msgText);
    msg.addClass("personal").appendTo($('.mCSB_container'));
    setDate();
    updateScrollbar();
    $(".action-box-input").val(null);
    $(".message.personal.typing").remove();
    isTyping = true;
    clearTimeout(uctTimer);
    if ($.trim(fakeMsg[fakeNum]) === "") {
      return false;
    }
    return setTimeout(function () {
      return setFakeMessage();
    }, 500 + Math.random() * 10 * 100);
  };
 
  $(window).on('keydown', function (e) {
    if (e.which === 13) {
      insertMessage();
      return false;
    }
  });
 
  $(window).load(function () {
    messages.mCustomScrollbar();
    setTimeout(function () {
      return setFakeMessage();
    }, 100);
  });
 
  $(".action-box-input").on("keydown", function (e) {
    var typing;
    if ($(".action-box-input") !== "" && isTyping === true && e.which !== 13) {
      typing = $("<div>").append("<span>").addClass("message personal typing");
      typing.appendTo($('.mCSB_container'));
      updateScrollbar();
      isTyping = false;
      return userTypingClear();
    }
  });
 
}).call(this);
 
 
//# sourceURL=coffeescript

See live demo and download source code.
|

Don’t forget to Subscribe My Public Notebook for more useful free scripts, tutorials and articles.

This awesome script developed by xichen. Visit their official repository for more information and follow for future updates.

Published by admin