BBM Bubbles

The BBM Bubbles UI format allows you to create chat bubbles that look like the ones in BBM. This is a great option for any BBM connected application.

A BBM bubble is created by adding a <div> with the data-bb-type="bbm-bubble" attribute. You can set the direction of the bubble to either "right" or "left" by using the data-bb-style attribute.

The conversation line items that appear inside the BBM Bubble are simply <div>'s that have the data-bb-type="item" attribute. You can also specify an image to appear beside the line item by using the data-bb-img attribute. The contents of the line item <div> will be displayed as the line item text.

	<div data-bb-type="screen">
		<style type="text/css">
			body,html {
				background-color: #B5B2B5;
			}	
		</style>
		<div data-bb-type="bbm-bubble" data-bb-style="right">
			<div data-bb-type="item" data-bb-img="bullet.png">My car just broke down and I have one million things to do!!</div> 
			<div data-bb-type="item" data-bb-img="bullet.png">Why can&apos;t groceries just come to you?</div> 
		</div>
		<div data-bb-type="bbm-bubble" data-bb-style="left">
			<div data-bb-type="item" data-bb-img="read.png">The big island was fun.. We were there for our honeymoon.  One side of the island is pretty much desert grass and volcano ash, and the other side is rainforest</div> 
		</div>
	</div>

JavaScript Interface

When you want to dynamically show or hide your BBM bubble you can call it's show() and hide() functions.

document.getElementById('myBubble').show();
document.getElementById('myBubble').hide();

As a convenience you can also remove your BBM bubble from the screen by calling the remove() function.

document.getElementById('myBubble').remove();

At any point that you wish to read or change the direction/style of the bubble from left to right you can use the getStyle() and setStyle() functions.

document.getElementById('myBubble').setStyle('left');
document.getElementById('myBubble').setStyle('right');

alert(document.getElementById('myBubble').getStyle());