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, 2022 in Web Development by gaurav
• 23,260 points
555 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, 2022 in Web Development by gaurav
• 23,260 points
301 views
0 votes
0 answers

jQuery exclude elements with certain class in selector

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

Jul 20, 2022 in Web Development by gaurav
• 23,260 points
1,344 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, 2022 in Web Development by gaurav
• 23,260 points
593 views
0 votes
0 answers

showing result of calculating in textbox with jquery

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

Jul 25, 2022 in Web Development by gaurav
• 23,260 points
535 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, 2022 in Web Development by gaurav
• 23,260 points
403 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, 2022 in Web Development by rajatha
• 7,680 points
882 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, 2022 in Web Development by gaurav
• 23,260 points
572 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,520 points
1,350 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,840 points
15,881 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,840 points
23,390 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP