Skip to content
jQuery plugin for creating automatic-scrolling, timestamped, labeled chat message bubbles
JavaScript CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
css Adding a demo for chat bubbles; adding image backgrounds; renaming CS… Sep 27, 2013
img
js
README.md
chatbubbledemo.html
chatbubbles.js chatbubbles initial commit Aug 14, 2013

README.md

chatbubbles

jQuery plugin for creating automatic-scrolling, timestamped, labeled chat message bubbles.

Demo: http://dominiquemb.github.io/chatbubbles/

Usage:

$('.chatBubbleContainer').bubbleContainer({
            moveUp: 'deleteOldest', 
            moveUpOnNew: true, 
            deleteOldestOnNew: false, 
            startDeletingAfter: 5,
            interval: 900 
});

$('input').keydown( function(evt) {
            var dateNow = new Date(),
            timestampStr = dateNow.getHours() + ':' + dateNow.getMinutes();
            
            if (evt.which === 13) {
                    var textVal = $(this).val(),
                    chatBubbleHtml = new chatBubble({
                            'userName': 'Username Here:',
                            'chatText': textVal,
                            'timestamp': timestampStr
                    });

                    $('.chatBubbleContainer').append(chatBubbleHtml).trigger('newBubble');
                    
                    $(this).val('');
            }
});

<div class="chatBubbleContainer"></div>
<input placeholder="Type something here"></input>

bubbleContainer Options

moveUp

(string) 'deleteOldest'

Deletes oldest message after moving all messages upwards

(string) 'keepOldest'

Does not delete oldest message after moving all messages upwards

moveUpOnNew

(boolean) true or false

If true, move all messages upwards when a new bubble is created

deleteOldestOnNew

(boolean) true or false

If true, delete oldest message when a new bubble is created

startDeletingAfter

(number)

(optional if moveUp is not used) If this is defined along with moveUp: 'deleteOldest', only messages after the first X number of messages will be deleted.

interval

(number)

(optional if moveUp is not used) Amount of time (in milliseconds) between upwards animation of bubbles

chatBubble Options

userName

(string)

(optional) String to use as the 'username' or message label

chatText

(string)

(optional) String to use as message text

timestamp

(string from timestamp)

Timestamp string. For example, could be the hour and minute when the message is submitted, or you could have it display the full date.

You can’t perform that action at this time.