I have a common chat room where all the users can type in messages and these messages can be seen by others as well. I have a situation were lets say I type in a message in the chat box then the bg-color of the div changes to red and with next message it changes to white. Also, if any other user send any message in the common chat box and lets say the last bg color of the div was white then it should come as red seen to all. In short i need to change the bg color of the div with every message sent by any user in that common chat box. The result should look something like the attached screenshot. Can this be achieved with the help of a timestamp? If yes the how?
This is my simple HTML div updated by jQuery:
<div id="wrapper">
<div class="bubble-container" ></div>
</div>
This is my styling sheet CSS:
.bubble-container
{
display: none;
width: 100%;
height: 50px;
}
.bubble
{
display: inline-block;
position: relative;
clear: both;
background-color: #ffffff;
width: 100%;
}
.bubble-text
{
height: 50px;
display:table;
margin-left: 10px;
}
.bubble-text p
{
display: table-cell;
vertical-align: middle;
font-size:16px;
margin-left: 10px;
}
JQuery Code for the message the user types in and showing on the UI. I am using websockets to make this chat application.
The logic of the function is working fine. But i think the part that will interest you is the way i am styling div. As of now for every message this code has a white bg div. But i need to change it alternatively.
function onMessage(evt) {
var msgText = evt.data;
var bubble = $('<div class="bubble-container"><span class="bubble"><div class="bubble-text"><p>' + msgText + '</p></div></div>');
var bubbles = 1;
var maxBubbles = 8;
var server;
//var bubble = text;
$("#msgText").val("");
$(".bubble-container:last")
.after(bubble);
if (bubbles >= maxBubbles) {
var first = $(".bubble-container:first")
.remove();
bubbles--;
}
bubbles++;
$('.bubble-container').show(250, function showNext() {
if (!($(this).is(":visible"))) {
bubbles++;
}
$(this).next(".bubble-container")
.show(250, showNext);
$("#wrapper").scrollTop(9999999);
});
}