Home/ Questions/Q 3482026
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-18T10:30:43+00:00

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

  • 0

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

alt text

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!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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

    • 0