Draw divs in elliptical shape with jQuery

0 votes

It seems that my math is not enough for my current task, so thats why i would like to ask help. The main thing is solved, i display the divs in elipsis shape, but i cannot solve how to take care to the dimension of the divs. The current solution works for shapes with equal sides, but my divs are not like that, their width are bigger than their height.

The current function look 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's where the important X and Y coordinates are being output
    jQuery(this).css('margin-top', Y + 'px');
    jQuery(this).css('margin-left', X + 'px');
});
}

Thank you in advance.

Jul 27 in Web Development by gaurav
• 17,580 points
10 views

No answer to this question. Be the first to respond.

Your answer

Your name to display (optional):
Privacy: Your email address will only be used for sending these notifications.

Related Questions In Web Development

0 votes
0 answers

I cant hide divs which has spesific class with Jquery

I changed my code to below code ...READ MORE

Jul 20 in Web Development by gaurav
• 17,580 points
5 views
0 votes
0 answers

jQuery exclude elements with certain class in selector

I want to setup a click event ...READ MORE

Jul 20 in Web Development by gaurav
• 17,580 points
18 views
0 votes
0 answers

How can I specify Google map with driving direction in jQuery mobile

I have done a Google Maps based ...READ MORE

Jul 20 in Web Development by gaurav
• 17,580 points
10 views
0 votes
0 answers

showing result of calculating in textbox with jquery

I want to calculate division of 2 ...READ MORE

Jul 25 in Web Development by gaurav
• 17,580 points
11 views
0 votes
0 answers

UL subdrop not working with jquery in Asp.Net C#

Keep searching why sub drop not working ...READ MORE

Jul 29 in Web Development by gaurav
• 17,580 points
7 views
0 votes
1 answer

get Date between 2 dates in jquery with format (dddd MMMM Do, YYYY)?

This is fairly easy to achieve with ...READ MORE

answered Aug 5 in Web Development by rajatha
• 7,040 points
10 views
0 votes
0 answers

Javascript/jQuery - Display inches in feet and inches

I'm making a BMI calculator (see JSFiddle ...READ MORE

Jul 29 in Web Development by gaurav
• 17,580 points
7 views
0 votes
1 answer

What is jQuery?

Hey, jQuery is a fast and concise JavaScript ...READ MORE

answered Feb 14, 2020 in JQuery by kartik
• 37,500 points
308 views
0 votes
1 answer

Uncaught TypeError: Cannot read property 'msie' of undefined - jQuery tools

Hello, Use the following script tag in your ...READ MORE

answered Apr 28, 2020 in JQuery by Niroj
• 82,740 points
8,827 views
0 votes
1 answer

Uncaught Error: Bootstrap's JavaScript requires jQuery

Hello @kartik, You have provided wrong order for ...READ MORE

answered Apr 28, 2020 in JQuery by Niroj
• 82,740 points
15,808 views
webinar REGISTER FOR FREE WEBINAR X
Send OTP
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP