Free Tarot Readings

Make HTML / Div objects follow a circle using Javascript


I see many people suggest that you use CSS 3 to do the following. That will be the correct and elegant way when the different browser companies get together and actually follow a standard. As it is now I have not seen an elegant way to do it that works in all browsers. Until then use Javascript which is a true standard.

var numberOfItems = 5; //must have corresponding div and class
var width = 100;
var height = 100;
var centerX = 200;
var centerY = 200;
var nextObjectAngle = new Array();
var incrimentAngle;

function circle(mode)
{
if (mode == ‘initialize’)
{
var steps = 360;
incrimentAngle = (2*Math.PI)/steps; //in radians

//initial poitions in circle
var offsetAngle = (2*Math.PI)/numberOfItems ;
for (var a = 0 ; a < numberOfItems ; a++)
{
nextObjectAngle[a] = offsetAngle * a;
var x = Math.cos(nextObjectAngle[a]) * width + centerX;
var y = Math.sin(nextObjectAngle[a]) * height + centerY;
document.getElementsByClassName(“circle”)[a].style.position = ‘relative’;
document.getElementsByClassName(“circle”)[a].style.left = x;
document.getElementsByClassName(“circle”)[a].style.top = y;
}
}
else
{
for (var a = 0 ; a < numberOfItems ; a++)
{
nextObjectAngle[a] = nextObjectAngle[a] + incrimentAngle; //turn circle
var x = Math.cos(nextObjectAngle[a]) * width + centerX;
var y = Math.sin(nextObjectAngle[a]) * height + centerY;
document.getElementsByClassName(“circle”)[a].style.left = x;
document.getElementsByClassName(“circle”)[a].style.top = y;
}
}
setTimeout(circle, 50);
}

circle(‘initialize’);