CODEWITHSUNDEEP
javascriptjqueryhtmlcsslayout
Pragmateek
Pragmateek

Reputation: 13354

Circular layout of HTML elements

in an HTML page I'd like to layout a list of elements in a circular manner.

So I was wondering if there was a simple way of doing this with HTML5/CSS3; and if a plugin of jQuery / jQuery UI or any other JavaScript library manages this kind of layout.

Thanks in advance for any help.

EDIT:

As of now I've used jQuery Radmenu : http://www.tikku.com/jquery-radmenu-plugin; but its inner working is a bit clumsy.

I may end up with a custom solution inspired by dzejkej code sample.

Upvotes: 4

Views: 6301

Answers (2)

kubetz
kubetz

Reputation: 8556

Simple pure JavaScript example how to place HTML into a circular layout:

// retrieve the elements however you want (class name, tag name, ..)
var elems = document.getElementsByTagName('div');
var increase = Math.PI * 2 / elems.length;
var x = 0, y = 0, angle = 0;

for (var i = 0; i < elems.length; i++) {
  elem = elems[i];
  // modify to change the radius and position of a circle
  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;
}

HERE is the working code.

Upvotes: 22

Gabriel Gartz
Gabriel Gartz

Reputation: 2870

YOu can use RaphaelJS, with jQuery or any other framework you enjoy.

This demo will help you: http://raphaeljs.com/hand.html

window.onload = function () {
    var r = Raphael("holder", 640, 480), angle = 0;
        while (angle < 360) {
            var color = Raphael.getColor();
            (function (t, c) {
                r.circle(320, 450, 20).attr({stroke: c, fill: c, transform: t, "fill-opacity": .4}).click(function () {
                s.animate({transform: t, stroke: c}, 2000, "bounce");
            }).mouseover(function () {
                this.animate({"fill-opacity": .75}, 500);
            }).mouseout(function () {
                this.animate({"fill-opacity": .4}, 500);
            });
        })("r" + angle + " 320 240", color);
        angle += 30;
    }
    Raphael.getColor.reset();
    var s = r.set();
    s.push(r.path("M320,240c-50,100,50,110,0,190").attr({fill: "none", "stroke-width": 2}));
    s.push(r.circle(320, 450, 20).attr({fill: "none", "stroke-width": 2}));
    s.push(r.circle(320, 240, 5).attr({fill: "none", "stroke-width": 10}));
    s.attr({stroke: Raphael.getColor()});
};

Upvotes: 3

Related Questions