javascript - How to add date and sender name to chat bubble -
hey have created kind of simple chat bubbles, want add sender date , sender name. sender name need above each bubble , sender date need beneath each bubble, have try many times , failed. happy suggestions. final result should 
$('#build').bind('click', function() { var inputtext = $('#buildinput').val(); var regmessage = /^#(\d):\s([^#.]*)/gm; var messages = inputtext.split(regmessage); $('#chat').empty(); (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: now? #2: i'm @ party @ 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 now? </div> </div><div class="message left"><div class="message-text">i'm @ 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>
- get current time using date -
getminutes(),gethours() - append message
divdivclassmessage-time. - place div want.
example:
$('#build').bind('click', function() { var inputtext = $('#buildinput').val(); var regmessage = /^#(\d):\s([^#.]*)/gm; var messages = inputtext.split(regmessage); $('#chat').empty(); (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: now? #2: i'm @ party @ 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 now? </div> </div><div class="message left"><div class="message-text">i'm @ 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>
Comments
Post a Comment