Circular layout of HTML elements

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.

• Mike Christensen: Possible dupe? stackoverflow.com/questions/8218124/…
• Mike Christensen: Check out jCurvy - jcurvy.com/index.html
• Duke Hall: cssplay.co.uk/menus/cssplay-round-and-round.html#url
• Pragmateek: @Mike: thanks, jCurvy seems cool for Bezier curves but in the current case I'd like a pure circle.
• kubetz: Also check out jQuery Roundrr - maybe that is what you are looking for. Demo here and tutorial here.

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.

• Pragmateek: Thanks, neat and simple; but it does not take into account the size of the elements. So if they are not the same size the layout looks elliptic. But this should be usable in my situation as I should display images.
• kubetz: @Serious that is just a example to demonstrate how to achieve the circular layout. You didn't specify any more details :). You can modify it to take size into consideration by using the width and height when computing x and y.
• Starx: Coulc you please explain var increase = Math.PI * 2 / elems.length; as per its logical meaning?
• xSphere: A full circle is 2*Pi radians, so the full circle is divided by the number of elements so the elements can be equally spaced around the circle.

Answer 2

YOu can use RaphaelJS, with jQuery or any other framework you enjoy.

This demo will help you: http://raphaeljs.com/hand.html

window.onload = function () {
 var r = Raphael("holder", 640, 480), angle = 0;
 while (angle < 360) {
 var color = Raphael.getColor();
 (function (t, c) {
 r.circle(320, 450, 20).attr({stroke: c, fill: c, transform: t, "fill-opacity": .4}).click(function () {
 s.animate({transform: t, stroke: c}, 2000, "bounce");
 }).mouseover(function () {
 this.animate({"fill-opacity": .75}, 500);
 }).mouseout(function () {
 this.animate({"fill-opacity": .4}, 500);
 });
 })("r" + angle + " 320 240", color);
 angle += 30;
 }
 Raphael.getColor.reset();
 var s = r.set();
 s.push(r.path("M320,240c-50,100,50,110,0,190").attr({fill: "none", "stroke-width": 2}));
 s.push(r.circle(320, 450, 20).attr({fill: "none", "stroke-width": 2}));
 s.push(r.circle(320, 240, 5).attr({fill: "none", "stroke-width": 10}));
 s.attr({stroke: Raphael.getColor()});
};

• Pragmateek: Thanks Gabriel for this sample; but AFAIK Raphael is really interesting (and even awesome) for SVG manipulation. Here my elements could be anyhting and I don't want to blotter my code with SVG hackeries.