here is a finished example. if it is down, just use the zip or copy the code in here into their own files as named.
http://www.supercala.net/sites/jquery/c ... circle.php
You can also change the radius of the circle, and other fun stuff if you want in the css. this is a bit more obvious than the tutorial i found on jsfiddle by ThiefMaster. Nice that it is up there though, saved me about 30 minutes of remembering simple math circle formulas. Enjoy it. Use this for whatever.
Also something fun, you can make an array in php that has text or images and then count that array and make it spit the length in the javascript side so it is almost completely dynamic as you add or remove items. be careful in the radius size with your div sizes or overlap happens, etc. Experiment and learn!
Also, on firefox press F12 if you have firebug installed and it spits out the radians, degrees, placer content, and x y position.
You can remove the php and make it totally javascript if you want to populate it in the <script></script> area with an array, or by hand manually add a bunch of divs with the .cField type
Finally it is a fun idea to have a central image in middle of the circle, and you can divide it's height and width and center it, even figure out the div placers around it, their size/2 and match it to a maximum good size for the center image, even test and replace by hand if you like, that is on you to make a new absolute div, probably use z-depth for it, and place it on top of the other icons, or hey, transparent imgs on the placers around the circle and have them overlap and be higher than the central image.IMAGES ON A CIRCLE AS TRANSPARENT PNGS VERSION
page example
http://www.supercala.net/sites/jquery/c ... circle.php
full code with php libraries I wrote
http://www.supercala.net/sites/jquery/c ... circle.zip
zip of the code and files to testText only simple version in ZIP as code here
http://www.supercala.net/sites/jquery/c ... circle.zip
place_on_circle.php
Code: Select all
<?php
/*
place_on_circle.php v1.0 by Kristoffe Brodeur. ©2016 All Rights Reserved.
01-18-2016
original version by ThiefMaster
jsfiddle.net/qf3dxj15/
*/
$fCnt=12; //fieldCount;
$fArr=Array(0,1,2,3,4,5,6,7,8,9,10,11); //can hold anything, images, a href and images, text etc
$fieldStr="";
//
for($f=0;$f<$fCnt;$f++)
{
$fieldStr.="
<div class='cField'>".$fArr[$f]."</div>
";
}
?>
<html>
<head>
<link type="text/css" rel="stylesheet" href="place_on_circle.css">
</head>
<body>
<div id="circleNav">
<?php echo $fieldStr;?>
</div>
</body>
</html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
var radius=200;
var fSize=64;
var cFieldArr=
$('.cField'),
container=$('#circleNav'),
width=container.width(),
height=container.height();
var cnt=cFieldArr.length;
var step=(2*Math.PI)/cFieldArr.length;
/*
change the degAngle from 0 to 270 as it will swing clockwise to the 3rd quadrant
0 +X 0Y
90 0X -Y
180 -X 0Y
270 0X +Y
then since the formula used in x and y is in radians, convert with R=D*(pi/180)
http://www.teacherschoice.com.au/maths_library/angles/angles.htm
*/
var degAngle=270;
var radAngle=degAngle*(Math.PI/180);
//
cFieldArr.each(function(){
/*
this adds ability by the script to change the box size before calculating the position
really good if you want to use 32 64 128 etc sized icons and change without the css file
and the calc on the size/2 for centering and vector placement from the circle center is
then dynamic :D
*/
$(this).css({
width:fSize+'px',
height:fSize+'px'
});
var x=Math.round(width/2+radius*Math.cos(radAngle)-$(this).width()/2);
var y=Math.round(height/2+radius*Math.sin(radAngle)-$(this).height()/2);
//
if(window.console)
{
console.log($(this).text(),"x|"+x,"###y|"+y,"###cnt|"+cnt,"###rad|"+radAngle,"###deg|"+degAngle);
}
//
$(this).css({
left:x+'px',
top:y+'px'
});
radAngle+=step;
degAngle=radAngle*(180/Math.PI);
});
</script>
Code: Select all
body
{
padding:0px;
}
#circleNav
{
width:600px;
height:600px;
border:1px;
border-color:#888888;
border:solid;
position:relative;
}
.cField
{
width:16px;
height:16px;
position:absolute;
background:#DDDDDD;
}