Is there a way for me to retrieve the widths of all child elements within an HTML document?

Question

Is there a way for me to retrieve the widths of all child elements within an HTML document?

I have been working on a JavaScript (jQuery) function to calculate the maximum width of all child and children's-child elements within a specific div element.

Here is the code I have written so far:

function setBodyMinWidth(name){
var max = 0;
$(name).find('*').each(function(){
    var width = $(this).outerWidth(true);
    if (width > max){
        max = width;
    }
});
$("body").css("minWidth", max+"px");

Unfortunately, it doesn't seem to be functioning correctly. The issue I am facing is that on my website, content with float: "right"; overlaps the page content when the browser window size is too small. My website is currently under construction online, and if you need to see some source code, please feel free to visit here.

javascript jquery html css width

Answer 1

Answer №1

Check out the code on js fiddle

Here is the markup:

<body>
    <div class=one >content1</div>
    <div class=two >content2</div>
</body>

The CSS for this code snippet is as follows:

.one {width: 50px;}
.two {width: 70px;}

And here is the JavaScript part:

var max = 0;
$('body').find('div').each(function(){
    var width = $(this).outerWidth(true);
    if (width > max){
        max = width;
    };
});
alert(max);
$("body").css("minWidth", max+"px");

Answer 2

Check out the code on js fiddle

Here is the markup:

<body>
    <div class=one >content1</div>
    <div class=two >content2</div>
</body>

The CSS for this code snippet is as follows:

.one {width: 50px;}
.two {width: 70px;}

And here is the JavaScript part:

var max = 0;
$('body').find('div').each(function(){
    var width = $(this).outerWidth(true);
    if (width > max){
        max = width;
    };
});
alert(max);
$("body").css("minWidth", max+"px");

Is there a way for me to retrieve the widths of all child elements within an HTML document?

Answer №1

Similar questions

The functionality of the code in a stack snippet may differ from that in a standalone HTML file

Node.js and TestCafe encountered a critical error: Inefficient mark-compacts were performed near the heap limit, resulting in an allocation failure. The JavaScript heap ran

Tips for maintaining the dimensions of Google Map static images in a fluid and responsive manner

Restricting zooming to only occur within the img element in a UI

Enter the UL element and modify the LI class if it contains the .has_children class

When I employ ngroute, the Angular section in the html page does not display

Ways to retrieve the neighboring element's value and modify it with the help of JavaScript or jQuery

Chrome browser alignment problems

Regenerate main JavaScript files in Gulp whenever partials are edited

A guide to eliminating duplicate values within an array and across multiple arrays with the help of jQuery

Implement a hover effect on a specific class targeting a nested element using JavaScript

Control the data options available in the autosuggest textbox

The variable in Vue.js is failing to update, resulting in a "variable is not defined" error

Unit testing in Angular JS is crucial, especially when testing functions in services that do not return any values

Setting the Content-Type of a JavaScript file within a NodeJS application

What is the best way to eliminate the comma at the end of the final array

Trouble with sending data to child components via props

Is there a way to populate fields on a hidden input using Mechanize?

What is the recommended way to retrieve a "NA" value when the radio button is not chosen or unavailable?

Display View with AJAX in the MVC pattern when server-side validation does not pass