Creating a grid of CSS/JavaScript circles

Trying to achieve something like this:

It sounds simple, but there are specific requirements: - the width of the parent div should adjust according to the length of the text (is this feasible with CSS?) - random positioning of all circles is proving to be quite challenging for me.

By using border-radius to create circles (with height, width, and border-radius set to 50%), I'm attempting to establish a grid in JavaScript. This involves iterating through each element to retrieve its dimensions, then calculating the position based on the dimensions of the previous element (if applicable). Introducing margins can also aid in preventing overlaps. Is this approach correct?

I'm seeking suggestions on how to tackle these two issues effectively.

javascriptcss

Answer №1

Creating Scalable Circles Based on Content Size

  • Prioritize solving for the dimensions of circles before attempting to place them within a container.

  • When scaling a circle, width takes precedence over height in a container. Achieving equal radius scaling can be challenging without using relative averaging due to this factor.

  • Relative averaging involves determining the average dimensions based on the existing area of the container enclosing the content.

By detecting the width and height of the container with JavaScript, let's assume they are 200px x 20px respectively.

The total area is calculated as width * height, resulting in 4000px. To create a circular shape, we need to find dimensions for a rectangle that shares the same area.

To achieve equal area with matching width * height values:

√ 4000 = 63.2455532 Therefore: 63.2455532 x 63.2455532 = 4000

Placing DIVs Randomly and Preventing Collisions

  • Once you have determined the dimensions, use random (X,Y) coordinates for placement. Store these coordinates and radius in an array. If collisions occur, apply recursion to resolve overlapping elements by adjusting placement accordingly.

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 steps should be taken to make an object rotate in the opposite direction of the cursor

I have a group of cubes enclosed within an Object3D with the pivot point set as the origin: https://i.sstatic.net/JLBr9.png My objective is to rotate the cube in the opposite direction of the cursor's position. For instance, if the cursor is on the ...

javascriptthree.js

What is the best way to integrate AJAX with draggable columns in a Laravel application?

I have successfully integrated draggable functionality for table columns using jQuery Sortable within my Laravel application. I am now facing the challenge of updating the database with the data from these columns through AJAX. Despite researching online ...

javascriptphpjqueryajaxlaravel

Utilize Angular to simultaneously filter search results by URL and make selections in a dropdown menu

As a newcomer to the Angular JS framework, I have successfully created a client-company table where clients can be filtered by company name using a drop-down menu. However, I am now looking to implement a filtering mechanism based on the URL structure su ...

javascriptjqueryjsonangularjsfrontend

What is the best way to achieve the effect of "overflow: hidden" in three.js or WebGL?

I'm diving into the world of designing a WebGL GUI for my games and I'm keen to explore GPU graphics in more depth, as it offers a smoother experience compared to WebKit CSS rendering. Is there a way to create a scrollview where the internal mes ...

javascriptnode.jsthree.jswebgl

problem with passing the identification number into the function

I am facing an issue with passing the id into a javascript onClick method. I am using the Spring framework and in the controller class, I send the related id to the JSP file like this: model.addAttribute("uploadid", uploadid); Afterwards, I need to p ...

javascriptspring

Utilizing HIGHCHARTS to effectively access PHP variables from a separate PHP file through Jquery/Ajax

I am facing an issue with accessing PHP variables from my main page in a PHP file called by AJAX. Is there a way to access these variables or should I include the PHP file in the one called by AJAX? PHP : variables.php <?php $myServername = "loca ...

javascriptphpjqueryajaxhighcharts

Creating and mounting tags dynamically in riot.js

Just starting out with riot.js and I have a question that may seem obvious. When I statically add a tag and then mount it, everything works perfectly. But when I try to dynamically add a tag using JavaScript, nothing shows up. I believe I need to somehow ...

javascriptriot.js

Obtain the RadNumericTextBox value using JavaScript or jQuery in an ASP.NET environment

In my ASP.Net Web Page, I have a RadNumericTextBox within a DetailsView. I am attempting to access this element in JavaScript using jQuery. Despite successfully obtaining the RadNumericTextBox as a variable in JavaScript and verifying that it contains all ...

javascriptjqueryasp.nettelerik

When trying to insert glyphicons into a textarea, the result is displaying the actual text instead

When the glyphicon is clicked, I want the entered content to be added dynamically to the textarea. $(document).ready(function(){ //Click Event of glyphicon class $(document).on('click','.glyphicon',function(){ ...

javascriptjqueryhtmlbootstrap-4glyphicons

Send the NameSpace to the object and store it in the local storage

Hey there! I've developed an Android application that accesses the device certificates to retrieve specific information (APPCID). handleCertificate(appId) { OData.defaultHttpClient = sap.AuthProxy.generateODataHttpClient(); this.factory.connectionDa ...

javascriptangularinappbrowsersap-smp

The attribute 'positive_rule' is not found within the structure '{ addMore(): void; remove(index: any): void;'

data() { return { positive_rule: [ { positive_rule: "", }, ], }; }, methods: { addMore() { this.positive_rule.push({ positive_rule: "", }); }, ...

javascripttypescriptvue.jsfrontendvue-component

How can I use Selenium and Python to locate an element on a webpage and extract its input value?

I'm currently working on a specific part of the website and I'm trying to extract the value from . I know how to access the span class using best_offer = driver.find_element_by_class_name('showBestOffer') in Selenium, but I'm wonde ...

pythonhtmlcssseleniumweb-scraping

Issues with Bootstrap Contact Form submission

I found a helpful tutorial for creating a form at the following link: After following the tutorial, I added these scripts to the bottom of my contact form HTML: <script src='https://code.jquery.com/jquery-1.12.0.min.js'></script> ...

javascriptphphtmltwitter-bootstrapexpress

Locate grandchildren elements using getElementById

My task is to modify the content and attributes of the table. The DOM structure is generated by a third-party tool, and I am using JavaScript to make changes in various sections. <div id="myId"> <div> <div> <table&g ...

javascripthtml

What is the best way to activate the dirty flag of an Angular form using JavaScript?

I need to update the dirty flag of a form using JavaScript by accessing its DOM element. In order to do this, I am using @ViewChild to retrieve the element and then retrieving it in the ngOnInit lifecycle method (there are different ways to achieve this s ...

javascriptangular

export default interpretation of something()

While browsing through the React Navigation documentation, I came across the following code snippet: import Ionicons from 'react-native-vector-icons/Ionicons'; import { createBottomTabNavigator } from 'react-navigation'; export defaul ...

javascriptreactjsecmascript-6

Tips for adjusting image dimensions to accommodate small and large screens

Is there a way to make an image adapt to both mobile and full screen sizes? I attempted to make some adjustments, but unfortunately, I wasn't successful. The div class in question has a fixed width and height: <div class="pull-left thumb-con ...

htmlcssimagebootstrap-4

The dialog box in CSS is extending too far down past the bottom of the screen, making it impossible to scroll and click on the buttons located

I am currently working on creating a dialog box with a text area using material UI. Unfortunately, when I input a significant amount of text, the dialog box ends up extending beyond the screen, making it impossible to scroll down to access the buttons. &l ...

cssmaterial-ui

JavaScript for Verifying Phone Numbers

After extensive research and tutorials, I am still unable to figure out what is going wrong with my work. I have a button that looks like this: Despite Stack Overflow causing some trouble for me, please ignore the missing class as it is there. This is no ...

javascripthtmlcss

Ways to eliminate excess white space or margins on the right-hand side of a webpage

After applying some CSS to reduce the height of the images, I encountered an issue where the last image expands in width, creating a white space or margin on the right side of the page. The first three images do not exhibit this problem, leaving me puzzled ...

htmlcssbootstrap-4