jQuery - Bubbles Conversation Layout

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 structur开发者_如何学Goe (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!

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

Here's one implementation:

xhtml:

<dl>
    <dt class="participantOne">Participant One</dt>
    <dd class="participantOne">This is something from the first particpant.</dd>

    <dt class="participantTwo">Participant Two</dt>
    <dd class="participantTwo">Lorem ipsum</dd>
    <dd class="participantTwo">dolor sit amet. And so forth.</dd>

    <dt class="participantThree">Participant Three</dt>
    <dd class="participantThree">Something or other</dd>

    <dt class="participantOne">Participant One</dt>
    <dd class="participantOne">Yadda yadda.</dd>

    <dt class="participantThree">Participant Three</dt>
    <dd class="participantThree">Blah? With other text...</dd>
</dl>

css:

dt,
dd {
    border: 1px solid #000;
}
dt {
    border-bottom: 1px dashed #000;
    margin: 0.5em 0 0 0;
    border-radius: 1em 1em 0 0;
    padding: 0.5em 0 0 0.5em;
    box-shadow: inset 0 10px 15px rgba(255,255,255,0.5), 0 5px 10px rgba(255,255,255,0.5), 0 1px 1px rgba(255,255,255,0.5);
    -o-box-shadow: inset 0 10px 15px rgba(255,255,255,0.5), 0 5px 10px rgba(255,255,255,0.5), 0 1px 1px rgba(255,255,255,0.5);
    -webkit-box-shadow: inset 0 10px 15px rgba(255,255,255,0.5), 0 5px 10px rgba(255,255,255,0.5), 0 1px 1px rgba(255,255,255,0.5);
    -moz-box-shadow: inset 0 10px 15px rgba(255,255,255,0.5), 0 5px 10px yellow, 0 1px 1px rgba(255,255,255,0.5);
}

dt:after {
    content: " says: ";
}

dd {
    border-top: none;
    padding: 0 0.5em;
}

dd + dd {
    margin-top: -1px;
    border-top-width: 1px;
    border-top-style: dashed;
}

.participantOne {
    margin-left: 0;
    background-color: #f00;
}

.participantTwo {
    margin-left: 1em;
    background-color: #0f0;
}
.participantThree {
    margin-left: 2em;
    background-color: #00f;
}

JS Fiddle demo.

Why not just do something like this:

http://www.jsfiddle.net/NBHBD/1/

Assign a class to each one, and every time you generate it, simply assign that class.

Is this what you ment?

EDIT: If you want to do it with jquery, maybe you could use the the class selector

EDIT 2: Maybe you could adapt this plugin too, it is cross browser!