Creating an arch of list items (javascript)

Question

Hi

I've got a list of items which have a background image (via CSS) and some text. The simple markup is as follows:

<ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
    etc...
</ul>

Imagine that each list item is a square. Is there an easy way to display these as a semi-circle? i.e.

   [][]
 []    []
[]      []

Now to make this slightly more complicated there is one variable - the number of list items is unknown, so I need to work this out on the fly. I can work out the width each list item preety easily, so that it looks correct on the x-xis, I'm just having trouble with the y-axis.

Any help gratefully receieved.

Thanks for your time Sniffer

Answer 1

Your arch is divided up into item_count-1 slices, an entire circle is 2Pi radians, you are only using a semi-circle (1Pi). Divide the total (1Pi) by the number of slices (item_count) and multiply the Sin of that by the height of the arch.

in Javascript:

for(var i=0; i<item_count; i++){
  var angle=Math.PI/(item_count - 1),
      y=(1-Math.sin(angle * i))*arch_height;
  //set the items CSS 'top' property to y
}