Circular Layout for Elements

To line things up in a circle, here’s the best solution.

But wait, you might want to try raphaeljs.com. You can create a circle, aminate/spin things, etc… I think it can create vector – type graphics too. It works on pretty all relevant browsers.

This link on stackoverflow was very helpful!

Check out this demo. Just ckick demo on this page.

<style>
.stage{
width:400px;
height:400px;
margin:2em;
float:left;
position:relative;
background:#ccc;
overflow:hidden;
font-weight:bold;
text-align:center;
}
</style>
<div class=”circle”>HELLO</div>
<div class=”circle”>WORLD</div>
<div class=”circle”>THESE</div>
<div class=”circle”>ARE</div>
<div class=”circle”>SOME</div>
<div class=”circle”>DIV</div>
<div class=”circle”>ELEMENTS</div>

<script>
var elems = document.getElementsByClassName(‘circle’);
var increase = Math.PI * 2 / elems.length;
var x = 0, y = 0, angle = 0, elem;

for (var i = 0; i < elems.length; i++) {
elem = elems[i];
x = 100 * Math.cos(angle) + 200;
y = 100 * Math.sin(angle) + 200;
elem.style.position = ‘absolute';
elem.style.left = x + ‘px';
elem.style.top = y + ‘px';
angle += increase;
}
</script>

This is another helpful link.

About these ads

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s