Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Dynamically arrange some elements around a circle

I'm looking for a function to arrange some elements around a circle.
result should be something like :

enter image description here

like image 372
Omid Avatar asked Apr 14 '12 09:04

Omid


1 Answers

Here's some code that should help you:

var numElements = 4,     angle = 0     step = (2*Math.PI) / numElements; for(var i = 0; i < numElements.length; i++) {     var x = container_width/2 + radius * Math.cos(angle);     var y = container_height/2 + radius * Math.sin(angle);     angle += step; } 

It is not complete but should give you a good start.


Update: Here's something that actually works:

var radius = 200; // radius of the circle var fields = $('.field'),     container = $('#container'),     width = container.width(),     height = container.height(),     angle = 0,     step = (2*Math.PI) / fields.length; fields.each(function() {     var x = Math.round(width/2 + radius * Math.cos(angle) - $(this).width()/2),         y = Math.round(height/2 + radius * Math.sin(angle) - $(this).height()/2);     $(this).css({         left: x + 'px',         top: y + 'px'     });     angle += step; }); 

Demo: http://jsfiddle.net/ThiefMaster/LPh33/
Here's an improved version where you can change the element count.

like image 137
ThiefMaster Avatar answered Nov 03 '22 05:11

ThiefMaster