Stay Updated

Subscribe to Bootsnipp newsletter. (only important updates will be sent, your email is never shared or sold to anyone else)

Recent Comments

Hi,This is so cool and helpful!But I wonder why I remove settime as this:jsfunction insertChat(who, text, time){ if (time === undefined){ time = 0; } var control = ""; var date = formatAMPM(new Date()); if (who == "me"){ control = '<li style="width:100%">' + '<div class="msj macro">' + '<div class="avatar"><img class="img-circle" style="width:100%;" src="'+ me.avatar +'" /></div>' + '<div class="text text-l">' + '<p>'+ text +'</p>' + '<p><small>'+date+'</small></p>' + '</div>' + '</div>' + '</li>'; }else{ control = '<li style="width:100%;">' + '<div class="msj-rta macro">' + '<div class="text text-r">' + '<p>'+text+'</p>' + '<p><small>'+date+'</small></p>' + '</div>' + '<div class="avatar" style="padding:0px 0px 0px 10px !important"><img class="img-circle" style="width:100%;" src="'+you.avatar+'" /></div>' + '</li>'; } $("ul").append(control).scrollTop($("ul").prop('scrollHeight')); }The dialogs will not show anymore. What is the reason we should put setTimeout here?Thanks!
Simple Chat

Hello Pablo!This's a great example. Can you wrap text when message gets bigger? Currently when message is big then it simply overflows a little outside chat pop-up box and is missed.Regards!
Simple Chat

Thank you very much for your contribution. The problem of the scroll is already solved. I also added a button to send a message
Simple Chat

I have change the following in order to works fine. @pablocorezzola I miss two things, one is a scroll bar when chat overflows certain height, and the other one is a separator for show the date if it has changed. $(document).ready(function() { $(".mytext").on("keyup", function(e){ if ((e.keyCode || e.which) == 13){ var text = $(this).val(); if (text !== ""){ insertChat("me", text); $(this).val(''); } } });});
Simple Chat

this is not working for IE11
Simple Chat