CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Brk
Brk

Reputation: 1297

How to add date and sender name to chat bubble

Hey I have created some kind of simple chat bubbles, I want to add a sender date and sender name. The sender name need to be above each bubble and the sender date need to be beneath each bubble, I have try many times to do it and failed. I would be happy for any suggestions. The final result should be like this enter image description here 

$('#build').bind('click', function() {
  var inputText = $('#buildInput').val();
  var regMessage = /^#(\d):\s([^#.]*)/gm;
  var messages = inputText.split(regMessage);
  $('#chat').empty();
  for (var i=1; i<messages.length; i=i+3) {
    addMsg(messages[i], messages[i+1]);
  }
  return false;
})

$('#send').bind('submit', function() {
  var msgText = $('#msgInput').val();
  $('#msgInput').val('');
  
  if (msgText != '') addMsg(1, msgText);
  
  $('#chat').animate({ scrollTop: $('#chat').height() }, 600);
  
  return false;
})

function addMsg(people, msg) {
  console.log('addMsg');
  var side = 'right';
  var $_phone = $('#chat');
  var $_lastMessage = $('#chat .message:last');
  
  if (people == 1) side = 'right';
  if (people == 2) side = 'left';
  
  if ($_lastMessage.hasClass(side)) {
    
    $_lastMessage.append(
      $('<div>').addClass('message-text').text(msg)
    )
    
  } else {
    
    $_phone.append(
      $('<div>').addClass('message '+side).append(
        $('<div>').addClass('message-text').text(msg)
      )
    )
    
  }
  
}
html, body {height: 98%; position: relative; margin: 0;}
body {
  font-family: Helvetica, Arial, serif;
  font-size: 16px;
  padding: 1%
}
.wrapper {
  width: 612px;
  height: 100%;
  margin: 0 auto;
}

.chat-containter {
  width: 340px;
  height: 100%;
}
.chat {
  height: 60%;
  border: 1px solid #dcdcdc;
  overflow-y: auto;
  overflow-x: hidden;
}
.button {
  background-color: none;
  border: 1px solid #36a9fc;
  text-decoration: none;
  border-radius: 10px;
  padding: 5px 10px;
  color: #36a9fc;
  display: block;
  width: 80px;
  text-align: center;
  overflow: hidden;
  text-oveflow: ellipsis;
  margin: 20px auto;
}

.build-container {
  width: 230px;
  height: 100%;
  margin-left: 20px;
  float: right;
}
#buildInput {
  width: 100%;
  height: 60%;
}

/* Messages baloon */
.message {
  margin: 10px 0;
  overflow: hidden;
}
.message-text {
  padding: 10px 20px;
  float: right;
  clear: both;
  border-radius: 25px;
  position: relative;
  margin-bottom: 1px;
}
.message.left .message-text {
  margin-right: 70px;
  margin-left: 20px;
  background-color: white;
  border: 1px solid #e5e5ea;
  float: left;
}
.message.right .message-text {
  margin-left: 70px;
  margin-right: 20px;
  background-color: white;
  border: 1px solid #e5e5ea;
  color: black;
  float: right;
}

.message-text:last-child:before,
.message-text:last-child:after {
  content: '';
  position: absolute;
  bottom: 0;
  width: 35px;
  height: 25px;
  z-index: -1;
}

.message.right .message-text:before,
.message.right .message-text:after {
  border-radius: 0 0 0 50%;
}
.message.right .message-text:before {
  height: 20px;
  right: -23px;
  background-color: #e5e5ea;
}
.message.right .message-text:after {
  right: -35px;
  bottom: -3px;
  background-color: #fff;
}


.message.left .message-text:before,
.message.left .message-text:after {
  border-radius: 0 0 50% 0;
}
.message.left .message-text:before {
  height: 20px;
  left: -23px;
  background-color: #e5e5ea;
}
.message.left .message-text:after {
  left: -35px;
  bottom: -3px;
  background-color: #fff;
}

.send-container {
  background-color: #f6f6f6;
  border: 1px solid #dcdcdc;
  margin-top: -1px;
  padding: 10px;
}
.send-input {
  border-radius: 5px;
  border: 1px solid #dbdbdb;
  background-color: #fff;
  padding: 5px 5px;
  font-size: 1em;
  width: 78%;
}
.send-btn {
  text-decoration: none;
  color: #939297;
  font-weight: bold;
  background-color: transparent;
  border: none;
  font-size: 1em;
  cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="build-container">
    <textarea id="buildInput">
#2: Hello!
#1: Hi!
#1: Where are you now?
#2: I'm at a party at Clara</textarea><br>
    <a href="#" class="button" id="build">Build</a>
    <br><br>
  </div>
  
  <div class="chat-containter">
    <div id="chat" class="chat">
      <div class="message left">
        <div class="message-text">Hello!
        </div>
      </div><div class="message right"><div class="message-text">Hi!
    </div><div class="message-text">Where are you now?
    </div>
      </div><div class="message left"><div class="message-text">I'm at a party of Clara</div></div>
    </div>
    
    <div class="send-container">
      <form id="send">
      <input type="text" id="msgInput" class="send-input" placeholder="Message" />
      <input type="submit" class="send-btn" value="Send">
      </form>
    </div>
    
  </div>
</div>

Upvotes: 2

Views: 2057

Answers (1)

Mosh Feu
Mosh Feu

Reputation: 29317

  1. Get the current time using Date - getMinutes() and getHours()
  2. Append to the message div another div with class message-time.
  3. Place that div as you want.

Example:

$('#build').bind('click', function() {
  var inputText = $('#buildInput').val();
  var regMessage = /^#(\d):\s([^#.]*)/gm;
  var messages = inputText.split(regMessage);
  $('#chat').empty();
  for (var i=1; i<messages.length; i=i+3) {
    addMsg(messages[i], messages[i+1]);
  }
  return false;
})

$('#send').bind('submit', function() {
  var msgText = $('#msgInput').val();
  $('#msgInput').val('');
  
  if (msgText != '') addMsg(1, msgText);
  
  $('#chat').animate({ scrollTop: $('#chat').height() }, 600);
  
  return false;
})

function addMsg(people, msg) {
  console.log('addMsg');
  var side = 'right';
  var $_phone = $('#chat');
  var $_lastMessage = $('#chat .message:last');
  
  if (people == 1) side = 'right';
  if (people == 2) side = 'left';
  
  var time = new Date(),
      timeString = zero(time.getHours()) + ':' + zero(time.getMinutes());
  
  if ($_lastMessage.hasClass(side)) {
    
    $_lastMessage.append(
      $('<div>').addClass('message-text').text(msg).append(
        $('<div>').addClass('message-time').text(timeString)
      )
    )
    
  } else {
    
    $_phone.append(
      $('<div>').addClass('message '+side).append(
        $('<div>').addClass('message-text').text(msg).append('<div class="message-time">' + timeString + '</div>')
      ));
  } 
}

function zero(num) {
    return ('0' + num).slice(-2);
}
html, body {height: 98%; position: relative; margin: 0;}
body {
  font-family: Helvetica, Arial, serif;
  font-size: 16px;
  padding: 1%
}
.wrapper {
  width: 612px;
  height: 100%;
  margin: 0 auto;
}

.chat-containter {
  width: 340px;
  height: 100%;
}
.chat {
  height: 60%;
  border: 1px solid #dcdcdc;
  overflow-y: auto;
  overflow-x: hidden;
}
.button {
  background-color: none;
  border: 1px solid #36a9fc;
  text-decoration: none;
  border-radius: 10px;
  padding: 5px 10px;
  color: #36a9fc;
  display: block;
  width: 80px;
  text-align: center;
  overflow: hidden;
  text-oveflow: ellipsis;
  margin: 20px auto;
}

.build-container {
  width: 230px;
  height: 100%;
  margin-left: 20px;
  float: right;
}
#buildInput {
  width: 100%;
  height: 60%;
}

/* Messages baloon */
.message {
  margin: 10px 0;
  overflow: hidden;
}
.message-text {
  padding: 10px 20px;
  float: right;
  clear: both;
  border-radius: 25px;
  position: relative;
  margin-bottom: 1px;
}
.message.left .message-text {
  margin-right: 70px;
  margin-left: 20px;
  background-color: white;
  border: 1px solid #e5e5ea;
  float: left;
}
.message.right .message-text {
  margin-left: 70px;
  margin-right: 20px;
  background-color: white;
  border: 1px solid #e5e5ea;
  color: black;
  float: right;
}

.message-text:last-child:before,
.message-text:last-child:after {
  content: '';
  position: absolute;
  bottom: 0;
  width: 35px;
  height: 25px;
  z-index: -1;
}

.message.right .message-text:before,
.message.right .message-text:after {
  border-radius: 0 0 0 50%;
}
.message.right .message-text:before {
  height: 20px;
  right: -23px;
  background-color: #e5e5ea;
}
.message.right .message-text:after {
  right: -35px;
  bottom: -3px;
  background-color: #fff;
}


.message.left .message-text:before,
.message.left .message-text:after {
  border-radius: 0 0 50% 0;
}
.message.left .message-text:before {
  height: 20px;
  left: -23px;
  background-color: #e5e5ea;
}
.message.left .message-text:after {
  left: -35px;
  bottom: -3px;
  background-color: #fff;
}

.send-container {
  background-color: #f6f6f6;
  border: 1px solid #dcdcdc;
  margin-top: -1px;
  padding: 10px;
}
.send-input {
  border-radius: 5px;
  border: 1px solid #dbdbdb;
  background-color: #fff;
  padding: 5px 5px;
  font-size: 1em;
  width: 78%;
}
.send-btn {
  text-decoration: none;
  color: #939297;
  font-weight: bold;
  background-color: transparent;
  border: none;
  font-size: 1em;
  cursor: pointer;
}

.message-time {
    font-size: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="build-container">
    <textarea id="buildInput">
#2: Hello!
#1: Hi!
#1: Where are you now?
#2: I'm at a party at Clara</textarea><br>
    <a href="#" class="button" id="build">Build</a>
    <br><br>
  </div>
  
  <div class="chat-containter">
    <div id="chat" class="chat">
      <div class="message left">
        <div class="message-text">Hello!
        </div>
      </div><div class="message right"><div class="message-text">Hi!
    </div><div class="message-text">Where are you now?
    </div>
      </div><div class="message left"><div class="message-text">I'm at a party of Clara</div></div>
    </div>
    
    <div class="send-container">
      <form id="send">
      <input type="text" id="msgInput" class="send-input" placeholder="Message" />
      <input type="submit" class="send-btn" value="Send">
      </form>
    </div>
    
  </div>
</div>

Upvotes: 2

Related Questions