Dynamic changing height to tallest div on window resize - javascript

I am trying to use jQuery to set a set of div to the heigh of the tallest div. I have got the initial function working, where it gets the site and applies it to the rest of the divs on the page.
I also am trying to recalculate the heigh of the div in resize. In the JSfiddle, you can see that when you shrink the text expands out of the card/div.
I have tried to put the function into the resize function however in doesn't re-fire. I'm not sure what i am doing wrong.
I'm a JS beginner, apologies.
HTML
<div class="fluid-container grey-bg">
<div class="container">
<div class="card-default width-25 items">
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque hic aliquid ea id, perferendis mollitia nam consequatur, ut rerum animi nisi iste, quae provident atque placeat repudiandae impedit delectus sequi.
</div>
</div>
<div class="card-default width-25 spacer items">
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque ex sed voluptatum rem iste
</div>
</div>
<div class="card-default width-25 spacer items">
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis omnis, quos id quaerat magni nobis blanditiis, esse magnam provident cupiditate harum non! Modi cupiditate earum eos repudiandae impedit nemo repellendus!
</div>
</div>
<div class="card-default width-25 items">
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid laboriosam magni placeat numquam
</div>
</div>
</div>
</div>
CSS
.card-default {
background-color: #fff;
border-radius: 10px;
color: #333333;
min-height: 100px;
box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.25);
box-sizing: border-box;
padding: 20px 0px;
text-align: center;
margin-bottom: 20px;
display: block;
float: left;
position: relative;
width: 100%;
}
.card-default.width-25 {
width: 23%;
margin-left: 0px;
margin-right: 0px;
padding: 20px 20px;
}
JS
function cardEqualHeight() {
var maxHeight = -1;
$('.items').each(function() {
maxHeight = maxHeight >= $(this).height() ? maxHeight : $(this).height();
});
$('.items .content').each(function() {
$(this).height(maxHeight);
});
}
cardEqualHeight();
https://jsfiddle.net/k3lh4m/7wmfox9m/

Add this to the containter class and don't use your JS function and there you go!
.container {
display: flex;
flex-wrap: wrap;
}
jsfiddle

Related

How can i make a website that if we scroll down the X position move to the right / horizontal scroll

<!---Java--->
<script>
let container = document.getElementById('container');
window.addEventListener('scroll',function(){
let value = window.scrollY;
container.style.right = value * 0.25 + 'px';
})
</script>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container-top,
.container-bottom {
position: relative;
display: flex;
width: 100%;
scroll-behavior: smooth;
}
.container {
position: relative;
display: flex;
width: 100%;
scroll-behavior: smooth;
right: 0;
}
.container section,
.container-top,
.container-bottom {
display: flex;
justify-content: center;
align-items: center;
min-width: 100%;
height: 100vh;
background: #f53b62;
}
.container section:nth-child(2) {
background: #505050 ;
}
.container section:nth-child(3) {
background: #46c2a1 ;
}
.container section:nth-child(4) {
background: #f49c61 ;
}
.content{
max-width: 800px;
text-align: center;
padding: 40px;
}
.content h2 {
text-transform: uppercase;
font-size: 40px;
}
.content p {
color: aliceblue;
font-size: 20px;
line-height: 30px;
}
.container-top {
background: #8662f5;
}
.container-bottom {
background: #6296f5;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>scroll horinzontal</title>
</head>
<body>
<div class="container-top">
<section>
<div class="content">
<h2>Zero</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptate et ipsum illo ipsa mollitia,
voluptatum rem quidem neque? Aut dolore ex cum perspiciatis non quidem placeat deleniti dolorum
corporis assumenda?</p>
</div>
</section>
</div>
<div class="container element_size" id="container" >
<section>
<div class="content">
<h2>One</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptate et ipsum illo ipsa mollitia,
voluptatum rem quidem neque? Aut dolore ex cum perspiciatis non quidem placeat deleniti dolorum
corporis assumenda?</p>
</div>
</section>
<section>
<div class="content">
<h2>Two</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptate et ipsum illo ipsa mollitia,
voluptatum rem quidem neque? Aut dolore ex cum perspiciatis non quidem placeat deleniti dolorum
corporis assumenda?</p>
</div>
</section>
<section>
<div class="content">
<h2>Three</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptate et ipsum illo ipsa mollitia,
voluptatum rem quidem neque? Aut dolore ex cum perspiciatis non quidem placeat deleniti dolorum
corporis assumenda?</p>
</div>
</section>
<section>
<div class="content">
<h2>Four</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptate et ipsum illo ipsa mollitia,
voluptatum rem quidem neque? Aut dolore ex cum perspiciatis non quidem placeat deleniti dolorum
corporis assumenda?</p>
</div>
</section>
</div>
<div class="container-bottom">
<section>
<div class="content">
<h2>Five</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptate et ipsum illo ipsa mollitia,
voluptatum rem quidem neque? Aut dolore ex cum perspiciatis non quidem placeat deleniti dolorum
corporis assumenda?</p>
</div>
</section>
</div>
</body>
</html>
Horizontal and Vertical scrolling
I want to make a simple website like burgerboss.com scroll effect , when we scroll until y position and we continue scroll down the page scroll to the horizontal scroll position without scrollbar help and if we scroll in the end of the horizontal content it continue scroll down
I have try to reseacrh about this problem but i cant find one

Sticky header and hidden content with box-shadow

I'm new to coding and on my way to becoming a Junior Dev. This is also my first post on Stack Overflow.
Situation:
I have made a sticky header that has a box-shadow property intended to uncover content when scrolling down and hover on the body section. The box-shadow values are set to make the content hidden and only the nav header appears as visible. The header has position: fixed;
Question:
I was wondering if it's possible to make my content still be as hidden when the browser is open (just at the moment of opening, but unhide it when scrolled on the body section. If so, where could I apply the box-shadow property or is there a better way to do it? My knowledge is limited but so I'm looking for ways.
Code
window.addEventListener("scroll", function() {
const header = document.querySelector("header");
header.classList.toggle("sticky", window.scrollY > 0);
})
/* experimental start */
.wrapper-nav {
position: fixed;
top: 0%;
left: 0%;
width: 100%;
display: flex;
transition: 3s;
padding: 20px 40px;
justify-content: space-around;
background-color: goldenrod;
box-shadow: 0px 400px 300px 1000px;
color: blueviolet;
z-index: 1;
}
.wrapper-nav:hover {
box-shadow: none;
transition: 0.6s;
}
<header>
<nav>
<div class="container-nav">
<div class="wrapper-nav">
</div>
</div>
</nav>
</header>
<main>
<h1>Lorem</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At impedit architecto, obcaecati eligendi, iste laborum est, nobis quibusdam magni ratione eum odio ut voluptatem quo adipisci repellendus? Consectetur, possimus perferendis.
</p>
<h1>Lorem</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At impedit architecto, obcaecati eligendi, iste laborum est, nobis quibusdam magni ratione eum odio ut voluptatem quo adipisci repellendus? Consectetur, possimus perferendis.
</p>
<h1>Lorem</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At impedit architecto, obcaecati eligendi, iste laborum est, nobis quibusdam magni ratione eum odio ut voluptatem quo adipisci repellendus? Consectetur, possimus perferendis.
</p>
<h1>Lorem</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At impedit architecto, obcaecati eligendi, iste laborum est, nobis quibusdam magni ratione eum odio ut voluptatem quo adipisci repellendus? Consectetur, possimus perferendis.
</p>
</main>
Additional: Any improvements on how to write a better code or create a better inquiry on StackOverflow are welcome.
Thank you for your time.
Realized I need to change some CSS after receiving help. Thank you!
.wrapper-nav {
position: fixed;
top: 0%;
left: 0%;
width: 100%;
display: flex;
transition: 2s;
padding: 20px 40px;
justify-content: space-around;
background-color: goldenrod;
}
.wrapper-nav:hover {
box-shadow: none;
transition: 2s;
box-shadow: 0px 400px 300px 1000px;
color: blueviolet;
z-index: 1;
}
Welcome!
const main= document.querySelector("main");
window.addEventListener("scroll", function() {
const header = document.querySelector("header");
main.style.boxshadow=none;
header.classList.toggle("sticky", window.scrollY > 0);
})
window.addEventListener("DOMContentLoaded"),function(){
main.style.boxshadow= 0px 400px 300px 1000px;
}
Due to short time, I didn't run it but tried to answer the question on DOMload event the content is hidden on scroll I change the style to none to make it visible.

How do I fix red and green blocks with CSS ?

everyone
Would like to ask at present I am making a version when the web page to slide up the red and green block to be fixed, only the yellow block can slide!
The current treatment on the green side is using
position:sticky;
right:0px;
top:100px;
The grammar keeps him fixed there, but there's a problem because if you don't give height it looks like it's position:sticky; I want his height to be customizable, so I give him a height of 200px; As a result, when the content is too much or in RWD mode, it goes out of the green zone.
Is there a better way to fix the red and green blocks?
Here's what I'm trying to do so far.
https://codepen.io/hong-wei/pen/wvgbbye?editors=1100
Add align-items: flex-start; to your .container class and remove any height value from the aside.
.wrap{
background-color: #ccc;
line-height: 1.5;
}
.header{
position: fixed;
width: 100%;
background-color: #f75454;
box-shadow:0px 1px 30px #212529;
z-index: 1;
}
.header .list{
display: flex;
padding:20px;
justify-content:space-between;
}
.container{
display: flex;
padding:30px;
padding-top: 100px;
background-color: #5c5c5c;
align-items: flex-start;
}
.main{
flex:2;
padding:20px;
height: 1600px;
margin:0px 20px;
background-color: #f9cf5a;
}
.aside{
position:sticky;
right:0px;
top:100px;
padding:20px;
flex:1;
width: 100%;
background-color: #1ba784;
color:#eef7f2;
}
<div class="wrap">
<div class="header">
<ul class="list">
<li>測試</li>
<li>測試</li>
</ul>
</div>
<div class="container">
<div class="main">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum expedita pariatur facere repellat nobis sed modi, porro, at numquam accusantium aut consequuntur delectus ducimus atque officia dolores! Dolore quas delectus fuga accusantium quia atque esse, non, aut quae optio officia odit natus accusamus, libero iure nam? Accusantium veritatis ad repellat.</p>
</div>
<div class="aside">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex assumenda officiis sunt laboriosam impedit fuga tenetur pariatur distinctio ipsum suscipit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex assumenda officiis sunt laboriosam impedit fuga tenetur pariatur distinctio ipsum suscipit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex assumenda officiis sunt laboriosam impedit fuga tenetur pariatur distinctio ipsum suscipit.</p>
</div>
</div>
</div>

Changing the color of a fixed-position div while scrolling

I am experimenting with a very basic layout that has 4 divs, the first and third divs have dark blue backgrounds and the second and fourth have white backgrounds. I have a div in fixed position to the right with a default white color. I need to write some code that if this fixed div is scrolled through the white background divs, it changes its color to black, if it scrolled in the blue, it remains white as it is.
I tinkered for a whole day with getClientBoundingRect() and the IntersectionObserver API and I didn't have any luck.
Here is the code of the basic layout:
const oddElems = document.querySelectorAll('.oddElem');
const evenElems = document.querySelectorAll('.evenElem');
const allElems = document.querySelectorAll('.elem');
function handleInteresection(entries) {
entries.forEach(entry => {
console.log(entry)
})
}
const observer = new IntersectionObserver(handleInteresection);
allElems.forEach(elem => {
observer.observe(elem);
})
* {
box-sizing: border-box;
}
body {
width: 70%;
margin: auto;
padding: 0;
}
.elem {
border: 2px solid;
}
#elem {
background: #007;
padding: 20rem;
color: white;
}
#elem2 {
padding: 20rem;
background: #fff;
}
#elem3 {
padding: 20rem;
background: #007;
}
#elem4 {
padding: 20rem;
background: #fff;
}
#flyingbox {
padding: 2rem;
width: 2rem;
left: 80%;
position: fixed;
top: 10px;
background: #fff;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Get Bounding</title>
</head>
<body>
<div id="flyingbox">
</div>
<div class="elem oddElem" id="elem">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa blanditiis reprehenderit odio, eos
recusandae ipsam nulla quas sed voluptatum ex neque natus fuga illum dolores. Quis quibusdam odit, unde
minus?
</p>
</div>
<div class="elem evenElem" id="elem2">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa blanditiis reprehenderit odio, eos
recusandae ipsam nulla quas sed voluptatum ex neque natus fuga illum dolores. Quis quibusdam odit, unde
minus?
</p>
</div>
<div class="elem oddElem" id="elem3">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa blanditiis reprehenderit odio, eos
recusandae ipsam nulla quas sed voluptatum ex neque natus fuga illum dolores. Quis quibusdam odit, unde
minus?
</p>
</div>
<div class="elem evenElem" id="elem4">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa blanditiis reprehenderit odio, eos
recusandae ipsam nulla quas sed voluptatum ex neque natus fuga illum dolores. Quis quibusdam odit, unde
minus?
</p>
</div>
</body>
</html>
It doesn't look like you have any event listener to track the current scroll position. Basically I created an array of each section's offsetTop (distance from parent top) in reverse order, and conditionally check whether window.scrollY (current scroll position) matches an even or odd index.
const allElems = document.querySelectorAll('.elem');
const offsetTops = Array.from(allElems).map(ele => ele.offsetTop).reverse();
const flyingBox = document.getElementById("flyingbox");
window.addEventListener("scroll", ()=> {
const isBlack = offsetTops.findIndex(offsetTop => window.scrollY + 45 > offsetTop)%2 === 0 ? true : false;
if(flyingBox.classList.contains("black") && !isBlack) flyingBox.classList.toggle("black");
if(!flyingBox.classList.contains("black") && isBlack) flyingBox.classList.toggle("black");
});
* {
box-sizing: border-box;
}
body {
width: 70%;
margin: auto;
padding: 0;
}
.elem {
border: 2px solid;
}
#elem {
background: #007;
padding: 20rem;
color: white;
}
#elem2 {
padding: 20rem;
background: #fff;
}
#elem3 {
padding: 20rem;
background: #007;
}
#elem4 {
padding: 20rem;
background: #fff;
}
#flyingbox {
padding: 2rem;
width: 2rem;
left: 80%;
position: fixed;
top: 10px;
background: #fff;
}
.black {
background-color: black !important;
}
It doesn't look like you have an event listener to retrieve the current scroll position:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Get Bounding</title>
</head>
<body>
<div id="flyingbox">
</div>
<div class="elem oddElem" id="elem">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa blanditiis reprehenderit odio, eos
recusandae ipsam nulla quas sed voluptatum ex neque natus fuga illum dolores. Quis quibusdam odit, unde
minus?
</p>
</div>
<div class="elem evenElem" id="elem2">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa blanditiis reprehenderit odio, eos
recusandae ipsam nulla quas sed voluptatum ex neque natus fuga illum dolores. Quis quibusdam odit, unde
minus?
</p>
</div>
<div class="elem oddElem" id="elem3">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa blanditiis reprehenderit odio, eos
recusandae ipsam nulla quas sed voluptatum ex neque natus fuga illum dolores. Quis quibusdam odit, unde
minus?
</p>
</div>
<div class="elem evenElem" id="elem4">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa blanditiis reprehenderit odio, eos
recusandae ipsam nulla quas sed voluptatum ex neque natus fuga illum dolores. Quis quibusdam odit, unde
minus?
</p>
</div>
</body>
</html>

Text color gradient on the last line of an article

I have this code, which is an article with a toggle anchor "read more" and "read less", i want to add a gradiant color to the last line of the visible area of the article (before your press "read more" ).
This image may give you a clear idea :
There is the code:
$('.wrapper').find('a[href="#"]').on('click', function (e) {
e.preventDefault();
this.expand = !this.expand;
$(this).text(this.expand?"Read less":"Read more");
$(this).closest('.wrapper').find('.small, .big').toggleClass('small big');
});
.small {
height: 50px;
width: 255px;
overflow:hidden;
}
.big {
height: auto;
width: 255px;
}
<script
src="https://code.jquery.com/jquery-1.9.1.min.js"
integrity="sha256-wS9gmOZBqsqWxgIVgA8Y9WcQOa7PgSIX+rPA0VL2rbQ="
crossorigin="anonymous">
</script>
<div class="wrapper">
<div class="small">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Soluta aut dolores autem officia eveniet, earum, necessitatibus et, in ut dolorum optio id hic numquam repudiandae? Quos expedita aliquam nobis adipisci?.</p>
</div>
Read more
</div>
Thank you.
You could achieve that effect with CSS only, making use of pseudo selectors and setting the background of the pseudo element. Something like the following will make that possible. You can play a bit with the positioning to your liking.
.small p
{
position: relative;
}
.small p:after
{
content: "";
display: block;
height: 25px;
width: 100%;
position: absolute;
bottom: 0;
background: rgba(240,248,255,0) linear-gradient(to top,#fff,rgba(255,255,255,0)) repeat scroll 0 0;
}
<div class="wrapper">
<div class="small">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Soluta aut dolores autem officia eveniet, earum, necessitatibus et, in ut dolorum optio id hic numquam repudiandae? Quos expedita aliquam nobis adipisci?.</p>
</div> Read more
</div>
You could try using linear-gradient
$('.wrapper').find('a[href="#"]').on('click', function (e) {
e.preventDefault();
this.expand = !this.expand;
$(this).text(this.expand?"Read less":"Read more");
$(this).closest('.wrapper').find('.small, .big').toggleClass('small big');
});
.small {
height: 50px;
width: 255px;
overflow:hidden;
background-image: linear-gradient(to bottom, #000, #000, #fff);
color:transparent;
-webkit-background-clip: text;
}
.big {
height: auto;
width: 255px;
}
<script
src="https://code.jquery.com/jquery-1.9.1.min.js"
integrity="sha256-wS9gmOZBqsqWxgIVgA8Y9WcQOa7PgSIX+rPA0VL2rbQ="
crossorigin="anonymous">
</script>
<div class="wrapper">
<div class="small">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Soluta aut dolores autem officia eveniet, earum, necessitatibus et, in ut dolorum optio id hic numquam repudiandae? Quos expedita aliquam nobis adipisci?.</p>
</div> Read more
</div>
Taking into account your example, this is my recommendation to solve your problem, there are several ways to do it, but an easy one without adding any additional HTML elements, would be to use the after pseudo selector
$('.wrapper').find('a[href="#"]').on('click', function (e) {
e.preventDefault();
this.expand = !this.expand;
$(this).text(this.expand?"Read less":"Read more");
$(this).closest('.wrapper').find('.small, .big').toggleClass('small big');
});
.small {
height: 50px;
width: 255px;
overflow:hidden;
}
.small:after {
height: 1em;
width: 100%;
position: absolute;
top: calc(50px - 0.5em);
background: rgba(240,248,255,0) linear-gradient(to top,#fff,rgba(255,255,255,0)) repeat scroll 0 0;
content: '';
}
.big {
height: auto;
width: 255px;
}
<script
src="https://code.jquery.com/jquery-1.9.1.min.js"
integrity="sha256-wS9gmOZBqsqWxgIVgA8Y9WcQOa7PgSIX+rPA0VL2rbQ="
crossorigin="anonymous">
</script>
<div class="wrapper">
<div class="small">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Soluta aut dolores autem officia eveniet, earum, necessitatibus et, in ut dolorum optio id hic numquam repudiandae? Quos expedita aliquam nobis adipisci?.</p>
</div> Read more
</div>

Categories

Resources