Question

in an HTML page I’d like to layout a list of elements in a circular manner.

So I was wondering if there was a simple way of doing this with HTML5/CSS3;
and if a plugin of jQuery / jQuery UI or any other JavaScript library manages this kind of layout.

Thanks in advance for any help.

EDIT:

As of now I’ve used jQuery Radmenu : http://www.tikku.com/jquery-radmenu-plugin;
but its inner working is a bit clumsy.

I may end up with a custom solution inspired by dzejkej code sample.

Answer 1

Simple pure JavaScript example how to place HTML into a circular layout:

// retrieve the elements however you want (class name, tag name, ..)
var elems = document.getElementsByTagName('div');
var increase = Math.PI * 2 / elems.length;
var x = 0, y = 0, angle = 0;

for (var i = 0; i < elems.length; i++) {
  elem = elems[i];
  // modify to change the radius and position of a circle
  x = 100 * Math.cos(angle) + 200;
  y = 100 * Math.sin(angle) + 200;
  elem.style.position = 'absolute';
  elem.style.left = x + 'px';
  elem.style.top = y + 'px';
  angle += increase;
}

HERE is the working code.