Utilize the identical mathematical equation across various jQuery values

I have a JavaScript code that calculates the size of circles on the screen based on multiple variables. Currently, I am repeating the same equation for each circle by numbering all the variables accordingly. Is there a way to simplify this process and run the original variable through the equation without duplicating the code?

The following code shows how I am currently handling this situation:

$( document ).ready(function() {

        circle1 = 914;
        circle2 = 600;

        G1 = circle1/Math.PI;
        H1 = Math.sqrt(G1);
        J1 = Math.round(H1*20);

        J1margin = J1/2;

        $('.circle1').animate({"height":J1, "margin-top":"-"+J1margin, "width":J1, "margin-left":"-"+J1margin});

        G2 = circle2/Math.PI;
        H2 = Math.sqrt(G2);
        J2 = Math.round(H2*20);

        J2margin = J2/2;

        $('.circle2').animate({"height":J2, "margin-top":"-"+J2margin, "width":J2, "margin-left":"-"+J2margin});

});// JavaScript Document

I believe there must be a simpler solution to avoid repetition in the code, but I haven't been able to find one online. Any help or suggestions would be greatly appreciated. Thank you!

javascriptjquerycssequations

Answer №1

Utilize a custom function for circle animation:

function animateCircle(radius,el) {

        G = radius/Math.PI;
        H = Math.sqrt(G);
        J = Math.round(H*20);

        Jmargin = J/2;

        $(el).animate({"height":J, "margin-top":"-"+Jmargin, "width":J, "margin-left":"-"+Jmargin});
}
 animateCircle(914,'.circle1');
 animateCircle(600,'.circle2');

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What could be causing the lack of changes when trying to use justify content within the parent div?

I've been delving into CSS and trying to utilize justify-content in flex to center my content, but unfortunately, it's not cooperating. Here is the code I'm working with: .top-container{ display: flex; flex-flow: row nowrap; ma ...

htmlcssflexboxcontainersdisplay

Incorporate JavaScript data into your Laravel project

I am having an issue with adding form data to a database using JavaScript. The postData is correctly being read as I can see in an alert message, but the URL is not executing. I have tried it with both 'donorlist' and '/donorlist'. $(d ...

javascriptphpajaxlaravel

When attempting to insert data into MongoDB with node.js, an issue arises: "TypeError: Unable to access property 'username' of undefined."

I recently set up a MongoDB database and attempted to add data via a POST request using the Postman application. Upon successful creation of the database, a confirmation message was displayed. Here is the code snippet I used: users.js file: const router = ...

javascriptnode.jsmongodbexpresspostman

What is the best way to prompt users to submit comments with a popup textarea box?

Within my project, I have incorporated a dropdown list: <div class="dropdown"> <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Select subject <span class="caret"></span> </but ...

javascriptjqueryhtmlcssforms

Utilizing jQuery to toggle a dropdown box based on multiple checkbox selections

After conducting a search, I came across a helpful resource on Stack Overflow titled Enable/Disable a dropdownbox in jquery which guided me in the right direction. Being new to jQuery, I found it useful to adapt code snippets to suit my needs. Now, my que ...

javascriptjqueryhtml

Script for collapsing or expanding is non-functional

Although I am a beginner in Javascript coding, I am eager to learn more about it. I stumbled upon some tutorials on creating collapse/expand <div> blocks. After testing the code on jsfiddle, I found that it works fine there. You can find the code he ...

javascriptfunctiononclick

Mastering the art of navigating through intricate nested properties within JSON data structures

Presented below is a dynamic JSON structure: data = { "name": "deltha", "type": "object", "important": [ "name", "id", "number" ], "information": { "place": { "editable": false, "visible": true }, "info": { ...

javascriptangular

Tips for effectively handling 404 errors when loading directive templates in AngularJS

When working with an AngularJS directive, the templateUrl parameter is dynamically specified. 'templates/' + content_id + '.html' I am looking for a way to handle situations where the value of content_id may not be valid or result in ...

javascriptangularjs

The floating left div displays oddly when it wraps onto the next line

I currently have a variable number of floating divs, ranging from 1 to 10. When I display either 1-5 or all 10, they appear correctly: item1 item2 item3 item4 item5 item6 item7 item8 item9 item10 However, when I try to display around 7 of them, things s ...

csshtml

Using two divs, each containing different content, with one incorporating a tinymce editor, in order

There are two div elements in my code: <div id="ing" style="position:relative;"> <div id="comm" style="position: absolute; width: 27% !important; height: 141px; right: 18px; top: 1px; "> </div> </div> After that, I set T ...

javascriptjquerycsstinymce

Retrieve the href value from a DOM element

I'm currently working on a piece of code that aims to extract only the hrefs from the nav section. Here's what I have so far: componentDidMount(){ $("nav ul li a").each(function(k, j){ console.log(j); }); } So far, I've bee ...

javascriptjqueryhtmlreactjs

Creating a single Vuetify expansion panel: A step-by-step guide

Is there a way to modify the Vuetify expansion panel so that only one panel can be open at a time? Currently, all panels can be closed which is causing issues. I would like the last opened panel to remain open. I also want to prevent closing the currently ...

javascripthtmlcssvue.jsvuetify.js

Lottie-web experiences a memory leak

Currently implementing lottie web on my front-end, but encountering persistent memory leaks. The JavaScript VM instance remains below 10MB when lottie is removed altogether. However, upon enabling lottie, the memory usage escalates rapidly whenever the pa ...

javascriptvue.jsanimationmemory-leakslottie

Changes made to one order's information can impact the information of another order

Currently, I am in the process of developing a unique shopping cart feature where users input a number and a corresponding product is added to a display list. Users have the ability to adjust both the price and quantity of the products, with the total pric ...

javascriptangulartypescript

Using AngularJS date picker to set value in Spring model setter

When using AngularJS with Spring, I noticed a discrepancy in the date values between my view file and the POJO User object. In my view file, I have used an input type date to bind the "user.dateOfBirth" attribute. When I select a date, it is displayed cor ...

javascriptangularjsspringdatetime

Dropzone: Sending files after an AJAX request is completed

I'm in the process of developing a CRM php tool, which is functioning well at the moment. However, I need to enhance it with an upload file system feature. After some research, I came across Dropzone.js, which seems to be exactly what I need. The chal ...

phpjqueryajaxdropzone.js

How can I adjust the height and width of a checkbox input specifically for mobile screens?

Check out this code snippet: <div class="container-fluid mt-5"> <div class="row"> <div class="col-10"> Hello <br> Hello </div> <div class="col-2"> <input type="checkbox" class= ...

cssbootstrap-4

Adjust camera view according to the rotation in three.js

I am in the process of creating a demonstration, and I'm facing an issue with moving the camera in my scene in the direction it is pointing. The concept is similar to pointer lock controls, but I need the camera to have the ability to move up, down, f ...

javascriptthree.js

What is the process for clearing the cache of a crawling URL?

Currently, I am operating a crawler that gets triggered through an expressjs call. However, whenever I make the same request again, the crawler runs once more but indicates that all routes have already been completed. I even went to the extent of deleting ...

javascriptexpresscrawlee

The image will remain static and will not alternate between hidden and visible states

I am facing a challenge trying to toggle an image between 'hidden' and 'show' My approach is influenced by the post on How to create a hidden <img> in JavaScript? I have implemented two different buttons, one using html and the ...

javascripthtmlimageshowhidden