This post has been de-listed
It is no longer included in search results and normal feeds (front page, hot posts, subreddit posts, etc). It remains visible only via the author's post history.
1
Matching column widths on windows resize?
Post Body
Hello - and thank you for reading.
I am in the beginning stages of learning JS, so any recommendation beyond my question would be great.
Goal of this small script: To make all three .columns the same height as the tallest .column on both on page load and on widow resize.
Problem: Everything works as expected except the match height on window resize. The text runs outside of the .column div. The div isn't expanding as the text expands past the div boundaries.
JS
// Add a common class or tag here.
let eleID = '.column';
// Find Tallest Column
function getElement(ele) {
let ok = document.querySelectorAll(ele);
let boxHeight;
let boxes;
let allBoxes = [];
for (i = 0; i < ok.length; i ) {
boxes = ok[i].getBoundingClientRect();
boxHeight = Math.floor(boxes.height);
allBoxes.push(boxHeight);
}
tallest = Math.max(...allBoxes);
for (i = 0; i < ok.length; i ) {
ok[i].style.height = tallest;
}
};
getElement(eleID);
window.addEventListener("onresize", getElement(eleID));
Html
<html>
<head>
<style type="text/css" media="all">
@import url("styles.css");
</style>
</head>
<body>
<h1>Hello! </h1>
<div class='column'>
<h1>Column 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ultricies felis id ligula maximus, nec aliquet est scelerisque. Fusce bibendum, nibh eget pharetra auctor, nunc dolor consectetur ex, eget dignissim lectus elit eu elit. Nullam interdum non turpis eu elementum. Morbi auctor lectus pretium, eleifend sem vel, viverra dolor. In ullamcorper eget eros sed pellentesque. Proin eu ex convallis, vestibulum urna sit amet, lobortis libero. Aliquam tortor elit, semper ut commodo eget, lacinia non urna.
</p>
</div>
<div class='column'>
<h1>Column 2</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ultricies felis id ligula maximus, nec aliquet est, lobortis libero. Aliquam tortor elit, semper ut commodo eget, lacinia non urna.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ultricies felis id non turpis eu elementum. Morbi auctor lectus pretium, eleifend sem vel, viverra dolor. In ullamcorper eget eros sed pellentesque. Proin eu ex convallis, vestibulum urna sit amet, lobortis libero. Aliquam tortor elit, semper ut commodo eget, lacinia non urna.
</p>
</div>
<div class='column'>
<h1>Column 3</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ultricies felis id ligula maximus, nec aliquet est scelerisque. Fusce bibendum, nibh eget pharetra auctor, nunc dolor consectetur ex.
</p>
</div>
</body>
<footer>
<script src="script.js"></script>
</footer>
</html>
CSS
:root {
background: #efefef;
}
.column {
background-color: #00f;
margin-top: 0;
border: 3px solid #f00;
width: 30%;
float: left;
}
Author
Account Strength
100%
Account Age
5 years
Verified Email
Yes
Verified Flair
No
Total Karma
19,260
Link Karma
9,270
Comment Karma
9,533
Profile updated: 1 week ago
Posts updated: 2 weeks ago
Subreddit
Post Details
We try to extract some basic information from the post title. This is not
always successful or accurate, please use your best judgement and compare
these values to the post title and body for confirmation.
- Posted
- 3 years ago
- Reddit URL
- View post on reddit.com
- External URL
- reddit.com/r/learnjavasc...