Stay Updated

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

Featured Templates

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