# Draw divs in elliptical shape with jQuery

It seems that my math is not enough for my current problem, so I would like to ask for help. Mainly solved, I am showing divs in elipsis shape, but I cant figure out how to take care of the div's dimension. The current solution works for shapes with equal sides, but my divs are different, their width is greater than their height.

The current function looks like this:

``````function drawEllipse(selector, x, y, a, b, angle) {
var steps = jQuery(selector).length;
var i = 0;
var beta = -angle * (Math.PI / 180);
var sinbeta = Math.sin(beta);
var cosbeta = Math.cos(beta);

jQuery(selector).each(function(index) {
var alpha = i * (Math.PI / 180);
i += (360 / steps);
var sinalpha = Math.sin(alpha);
var cosalpha = Math.cos(alpha);
var X = x + (a * sinalpha * cosbeta - b * cosalpha * sinbeta);
var Y = y - (a * sinalpha * sinbeta + b * cosalpha * cosbeta);
X = Math.floor(X);
Y = Math.floor(Y);

//again, here where the important X and Y coordinates are being output
jQuery(this).css('margin-top', Y + 'px');
jQuery(this).css('margin-left', X + 'px');
});
}
```

```

+3

source to share

Instead of offsetting your divs with `margin`

, why not use `position: absolute`

? Then you can place them exactly where you want.

You can combine this with a negative margin of half of the div's width and height to center them at that position.

+2

source

I was able to get your code to work with this (it's needed for a completely different reason):

``````Plugin.prototype.drawEllipse = function (element, x, y, a, b, angle) {
var steps = 120;
var i = 0;
var beta = -angle * (Math.PI / 180);
var sinbeta = Math.sin(beta);
var cosbeta = Math.cos(beta);

for (var i=0; i<steps; i++) {
element.html(element.html() + "<div class='ellipsemarker'></div>");
}

\$('.ellipsemarker').each(function(index) {
var alpha = i * (Math.PI / 180);
i += (360 / steps);
var sinalpha = Math.sin(alpha);
var cosalpha = Math.cos(alpha);
var X = x + (a * sinalpha * cosbeta - b * cosalpha * sinbeta);
var Y = y - (a * sinalpha * sinbeta + b * cosalpha * cosbeta);
X = Math.floor(X);
Y = Math.floor(Y);

//again, here where the important X and Y coordinates are being output
\$(this).css('top', Y + 'px');
\$(this).css('left', X + 'px');
});
};
```

```

Sorry for the refactorings, most of which are personal preference. The CSS that makes these width and height constraints (in my case):

``````.ellipsemarker {
background-color: #fff;
border: #e8e8e8 2px solid;
width: 15px;
height: 10px;
position: absolute;
}
```

```

Note the position: absolute, as suggested by another poster.

The additional calling code in my case was just for reference:

``````var x, y;
var pos = \$('#ringwrapper').position();
x = pos.left;
y = pos.top;
console.log(x + " : " + y);

this.drawEllipse(\$('#ringwrapper'), x + (this.ringSize.width / 2.85),
y + (this.ringSize.height / 3.1), 235, 350, 90);
```

```
0

source

All Articles