jQuery - Bubbles Conversation Layout

Question

I need to implement the following layout structure in some web site:

As you can see, in this conversation there are 3 participants. Every line that a participant say is in a bubble. Every participant has different color bubble. All the bubbles for a participant have the same distance from the left.

I'm looking for a jQuery plugin that implements this layout structure (or a similiar layout structure). This plugin should support at least 2 and 3 participants, but an option for more would be great.

If no such plugins exists, how can I implement this? I mean, how can I calculate the width of each bubble (depending on the participants count) and the margin-left for each bubble?

Thanks!

Answer 1

I've created a simple HTML and CSS example using margins and rounded corners, with reasonably semantic markup.

Edit: I've created an updated example that uses jQuery to dynamically calculate how many people are in the conversation and set the margins appropriately. I've written it as a function so that you can call the function on some later event (when a new person joins the conversation) to automatically adjust the sizes.

I tried to get it to work more cleanly using the GlobalStylesheet Plug-in, but either that plug-in doesn't work with 1.4.x, or it doesn't work with JSFiddle, or I was using it improperly. So this uses 'standard' jQuery practice of explicitly setting/updating the styles per element.

Oh, and I moved the blockquote citation into a standard HTML4 cite element so that you can style it with old IE. :p