supercala

Posted: **Mon Jan 18, 2016 7:15 am**

So, I found a quick tutorial on how to place items and use radians for the measurement. I extended it to allow the javascript and jquery to dynamically change the div or img size if you will use imgs for a menu for instance. it also shows the conversion from degress to radians and vice versa to understand the formula used in placement. The placer div size is divided by 2 so the center point is used to put it on the actual circle's circumference.

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

IMAGES ON A CIRCLE AS TRANSPARENT PNGS VERSION

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.

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

Text only simple version in ZIP as code here

zip of the code and files to test
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>

place_on_circle.css

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

supercala

Placing things on a circle evenly spaced in css jquery

Placing things on a circle evenly spaced in css jquery