Circular layout of HTML elements

Question

in an HTML page I would like to split the list of circular elements.

So I was wondering if there was an easy way to do this using HTML5 / CSS3 ; and if the jQuery / jQuery UI plugin or any other JavaScript library controls this layout.

Thanks in advance for your help.

EDIT:

At the moment, I used jQuery Radmenu : http://www.tikku.com/jquery-radmenu-plugin ; but his inner work is a little awkward.

As a result, I can create my own solution based on a DJ code sample.

Answer 1

A simple example of simple JavaScript how to place HTML in 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.

Answer 2

You can use RaphaelJS using jQuery or any other framework you like.

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()}); };