Skip to content
jQuery plugin for creating automatic-scrolling, timestamped, labeled chat message bubbles
Branch: master
Clone or download
Latest commit 73f2e37 Sep 27, 2013
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
css
img Adding a demo for chat bubbles; adding image backgrounds; renaming CS… Sep 27, 2013
js
README.md Adding demo URL Sep 27, 2013
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.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.