JQuery - Bubbles Conversation Layout

Question

I need to implement the following layout structure on some website:

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

I am looking for a jQuery plugin that implements this layout structure (or a similar layout structure). This plugin should support at least 2 and 3 participants, but the option for more will be great.

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

Thank!

Answer 1

HTML CSS, .

. , jQuery . , - ( ), .

, GlobalStylesheet Plug-in, 1.4.x, JSFiddle, . , jQuery- / .

, blockquote HTML4 cite, IE.:

Answer 2

- :

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

, , , .

, ?

EDIT: jquery, ,

EDIT 2: , , -!

Answer 3

:

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.