Placing Items on a Circle

It can be quite challenging to place items on a circle, But with some help from maths we can 🙂 … DEMO

var radius = 200;
var fields = $('.field'), container = $('#container'),
    width = container.width(), height = container.height(),
    angle = 0, step = (2*Math.PI) / fields.length;
fields.each(function() {
    var x = Math.round(width / 2 + radius * Math.cos(angle) - $(this).width() / 2);
    var y = Math.round(height / 2 + radius * Math.sin(angle) - $(this).height() / 2);
    if (window.console) {
        console.log($(this).text(), x, y);
    }
    $(this).css({
        left: x + 'px',
        top: y + 'px'
    });
    angle += step;
});
Advertisements

Published by

shiyam

My passion became my profession , I'm a driven, energetic and proactive tech professionally. I consider myself an engagement professional, as I don't simply provide solutions, I create them. I am a continuous learner – always looking for new technologies, in my spare time I search Google for the latest trends . I like to think of myself as a futurist and I'm a Full Stack JavaScript Developer. >> Skills << ✔ Web App Development ✔ Strong Javascript ✔ Backbone.js, Angular.js, Dojo.js ✔ jQuery.js ✔ Node.js ✔ MongoDb , MySql ✔ Socket.io / Web Sockets (Native) ✔ PHP ✔ Ruby (Watir - Automation) ✔ Grunt ✔ Github , Bitbucket , SVN ✔ Agile Process ✔ Scrum ✔ Ability to research and adapt new techs ✔ Fast Learner ✔ Always Punctual ✔ Critical Thinker ✔ Friendly Personality

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