Question

I am creating a circular menu in Javascript and have decided to use a combination of absolute positioning and -webkit-transforms to position the list items around the outside of a circle.

Here is a demo that has been hacked into shape for a JSFiddle: http://jsfiddle.net/5XnKZ/6/

You can see that the placement of the list items is loosely circular, but they don’t appear in order or with the equal widths between that I was expecting. If you experiment with adding and removing the items from the list you will see that different numbers of list items have vastly different effects on how they are displayed.

I am positioning the items in the center of the circle with absolute positioning, then translating them into their positions on the circle with webkit transforms. The x and y for the transforms are obtained like this:

var x = Math.cos(d) * r;
var y = Math.sin(d) * r;

Where d is the angle in radians that the item should be at, and r is the radius of the circle I am positioning them on.

Can anyone see what is going wrong?

Answer 1

Your index was not calculated right.

(function() {
    //A foreach alternative function
    var each = function(a, b) {
        for (var i = 0; i < a.length; i++) {
            b(a[i]);
        }
    };

    //Get an array of all the circlr elements
    var circles = document.getElementsByClassName('circle');
    //Iterate over these elements
    each(circles, function(circle) {
        //For each of their children
        var i = 0;
        each(circle.children, function(child) {
            //Get child's index as a percentage of 2 PI radian
            var p = (i) / circle.children.length * (2*Math.PI);
            var r = 80;
            child.style.webkitTransform = 'translatey(' + Math.sin(p) * r + 'px) translatex(' + Math.cos(p) * r + 'px)';
            i++;
        });
    });
})();

Check the corrected JsFiddle.