HTML JS Problem with Collapse and Expand All text - javascript

I'm having trouble with 'Collapse' and 'Expand All' functionality:
The 'Expand All' button isn't working. How do I fix this code?
When I do Collapse each item individually the red and purple boxes (around them) do not expand accordingly (if the text exceeds the pre-set height). The Collapse items also spill over and go all the way down the page and over the footer. How do I get the red and purple box to expand with the text IF the max length of the text goes further down past the end of their height?
//Expand All
function toggleAll() {
var buttons = Array.prototype.slice.call(document.querySelectorAll('.testingpol_extrainfo_column'));
buttons.forEach(function(button) {
//Swap each element between display 'none' and 'block'
if (window.toggleAll === 0) {
button.style.display = 'block';
} else {
button.style.display = 'none';
}
// Swap window.toggleAll between 0 and 1
window.toggleAll = window.toggleAll === 0 ? 1 : 0;
});
}
// Collapse Individual points
var coll = document.getElementsByClassName("testingpol_extrainfo_column");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.display === "block") {
content.style.display = "none";
} else {
content.style.display = "block";
}
});
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/** TESTING POLICY Information **/
.testingpol_extrainfo_outerbackground {
background-color: rgb(51, 20, 223);
height: 900px;
width: auto;
margin: 25px 0px 100px 0px;
padding: 20px 0px 0px 0px;
}
.testingpol-extrainfo-heading {
font-size: 42px;
text-align: center;
color: rgb(0, 0, 0);
padding: 0px;
margin: 50px 0px 0px 0px;
}
.testingpol_extrainfo_banner {
background-color: red;
height: 800px;
width: 1000px;
margin: 10px 0px 100px 250px;
border-radius: 3px;
}
.testingpol_extrainfo_column {
background-color: rgb(119, 119, 119);
color: white;
cursor: pointer;
padding: 18px;
margin: 0px 0px 0px 50px;
width: 900px;
border: none;
text-align: left;
outline: none;
font-size: 15px;
}
.active,
.testingpol_extrainfo_column:hover {
background-color: #555
}
.testingpol_extrainfo_content {
margin: 0px 0px 0px 50px;
padding: 0 18px;
width: 900px;
height: auto;
display: none;
overflow: hidden;
background-color: #f1f1f1;
}
/**** FOOTER ****/
.form-control-bottomstuff {
background-color: teal;
height: 400px;
width: auto;
text-align: center;
font-size: 50px;
padding-top: 150px;
}
.footer_bar {
background-color: black;
height: 400px;
width: auto;
text-align: center;
font-size: 50px;
padding-top: 150px;
color: white;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<title>TEST</title>
</head>
<body>
<section class="main_body">
<div class="testingpol_extrainfo_outerbackground">
<div class="testingpol_extrainfo_banner">
<div class="testingpol-extrainfo-heading ">Collapse Title</div>
<input type="button" value="Expand All" onclick="toggleAll();">
<button type="button" class="testingpol_extrainfo_column">Lorem</button>
<div class="testingpol_extrainfo_content">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste doloribus porro rem corrupti ex sed at provident neque, est eius iure, adipisci sequi possimus velit maiores voluptates laudantium eum odio.
</p>
</div>
<button type="button" class="testingpol_extrainfo_column">Lorem</button>
<div class="testingpol_extrainfo_content">
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Est commodi sunt veritatis similique error modi corporis? Nisi est omnis, praesentium eveniet numquam unde sunt, neque, quod consectetur ipsa ducimus beatae.
<h6>Lorem</h6>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse similique veniam iure, illum officiis quidem cupiditate veritatis? Possimus aliquid, fuga ea rerum dolores, provident, ad vitae commodi veritatis et numquam. Facere
</p><br>
<h6>Lorem</h6><br>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consectetur ab dolor natus quod enim perspiciatis, at hic voluptatem omnis autem deleniti sapiente. Accusantium quo provident libero sunt perspiciatis nostrum rerum.
</p><br>
<h6>Lorem</h6><br>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minima aut est porro maxime sint perferendis praesentium et maiores, cum ducimus numquam exercitationem aperiam animi ex, deleniti eveniet accusantium mollitia vero. distinctio nam
non?</p><br>
<h6>Lorem</h6><br>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni rem culpa aperiam deleniti. Voluptatum odio ducimus reprehenderit, nobis temporibus saepe a est, quasi non ipsa tempore eveniet perspiciatis explicabo neque. </p><br>
<h6>Lorem</h6> <br>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur officiis necessitatibus, iure adipisci in esse, ex praesentium dolores autem rerum hic ab minus, rem animi numquam cupiditate maiores et corrupti! Quaerat distinctio inventore
veritatis nemo dolore saepe? Modi, repellendus voluptas. Sint voluptas deleniti atque vero modi eum, architecto praesentium quidem maiores delectus distinctio sed error ex repudiandae quis, eius similique! nemo?
</p><br>
<h6>lorem</h6><br>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut quisquam doloremque cum beatae corrupti in suscipit repellat ducimus reprehenderit tempore autem officia, pariatur dolore debitis temporibus perferendis esse labore mollitia eaque
vero harum facere.</p><br>
<h6>lorem</h6><br>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minus dolore animi debitis quisquam neque eveniet aspernatur quod commodi vel, dignissimos laborum obcaecati ut laudantium, eaque, impedit nesciunt deleniti atque iure. Iusto, quia
hic quis vel similique qui possimus sit exercitationem. Eius labore dignissimos optio incidunt adipisci doloribus vero, debitis soluta aliquid illo non facilis? Qui corrupti quis iusto voluptate similique! </p>
</p>
</div>
<button type="button" class="testingpol_extrainfo_column">Lorem</button>
<div class="testingpol_extrainfo_content">
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsam recusandae distinctio reiciendis, voluptas suscipit veniam minus error eveniet nisi, incidunt quasi animi provident voluptates, sunt voluptatem laborum dignissimos mollitia! Alias!
</p><br>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ad vel illum veritatis aperiam labore modi culpa, ab officiis laudantium dicta. Reiciendis consectetur mollitia quasi, saepe error eum nemo tempora perferendis.</p><br>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora dignissimos sunt eos quae saepe rerum ipsam magni nulla repellat? Blanditiis saepe veritatis provident molestias facilis doloribus eveniet adipisci a explicabo.</a>.</p>
</div>
<button type="button" class="testingpol_extrainfo_column">Lorem</button>
<div class="testingpol_extrainfo_content">
<p>
<h6>lorem</h6>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti facere rerum, fuga sapiente eveniet tenetur, consectetur repellendus labore aperiam fugit iste voluptate eligendi reprehenderit molestiae ducimus magnam vitae quasi aut!
</p>
<h6>lorem</h6>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit in voluptates tempora aliquam aspernatur. Voluptate laboriosam culpa id porro placeat. Ea tempore doloribus quibusdam quasi itaque ducimus nulla iste architecto. Ipsa neque
sint ut alias et necessitatibus odio quisquam maiores placeat sed nam debitis dolore porro, quos dolorem nulla optio magnam laborum, eaque nemo vel. Nobis quas dicta sit perferendis.</p>
<h6>Lorem</h6>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis magnam dolores non debitis laboriosam voluptas aliquam eius mollitia ullam, impedit, tenetur facilis quo possimus odit quos ex illum distinctio eveniet. Eveniet numquam ducimus,
recusandae, voluptas expedita corrupti reprehenderit amet? Ut, ea.</p>
<h6>lorem</h6>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum illo architecto facere? Obcaecati, quasi eveniet repudiandae eligendi asperiores odio quibusdam? Ducimus cum itaque, eius delectus officia tempora nulla assumenda dolorem?
</p>
</p>
</div>
<button type="button" class="testingpol_extrainfo_column">Lorem</button>
<div class="testingpol_extrainfo_content">
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ab commodi hic distinctio officia. Veniam eum eos repudiandae cumque molestiae. Aliquam iusto repellendus vitae molestiae facere quaerat placeat sint totam illo! Excepturi rem eligendi commodi
</p>
</div>
<button type="button" class="testingpol_extrainfo_column">lorem</button>
<div class="testingpol_extrainfo_content">
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum nostrum fugit dolorum quis possimus optio doloribus adipisci eos quaerat praesentium debitis voluptatum voluptatem, quo quia autem officiis commodi nam dignissimos! Voluptas maxime temporibus
quis est, fugit eaque suscipit pariatur inventore nisi perspiciatis voluptatum cumque labore adipisci. Dicta, pariatur porro inventore illum cum similique consequatur deleniti mollitia atque consequuntur numquam quam!
</p>
</div>
<button type="button" class="testingpol_extrainfo_column">Lorem</button>
<div class="testingpol_extrainfo_content">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur quibusdam officia expedita voluptatem. Sint modi saepe quaerat sequi laborum numquam esse earum, similique hic libero velit fugiat reiciendis et natus?
</p>
</div>
</div>
</div>
</section>
<!-- FOOTER -->
<footer>
<div class="footer_bar ">
<div>
Footer 2
</div>
</div>
</footer>
</body>
<script src="script.js"></script>
</html>

I rewrote all of your JS and added min-height and flexbox properties to your banner and outerbackground as flexbox will flex with the content. I reworked the JS with a .show class and toggled that class. Hope this is what you are looking for.
//Expand All
const expandAll = document.getElementById('expandAll');
expandAll.addEventListener('click', () => {
// const buttons = document.querySelectorAll('.testingpol_extrainfo_column');
const content = document.querySelectorAll(".testingpol_extrainfo_content");
for (let i=0; i < content.length; i++) {
content[i].classList.remove('show-individual');
content[i].classList.toggle('show');
}
});
// Collapse Individual points
const banner = document.querySelector('.testingpol_extrainfo_banner');
banner.addEventListener('click', (e) =>{
const col = document.querySelectorAll(".testingpol_extrainfo_column");
const content = document.querySelectorAll(".testingpol_extrainfo_content");
for (let i=0; i < col.length; i++){
if (e.target === col[i]){
content[i].classList.toggle('show-individual');
}
}
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/** TESTING POLICY Information **/
.testingpol_extrainfo_outerbackground {
background-color: rgb(51, 20, 223);
min-height: 900px;
width: auto;
margin: 25px 0px 100px 0px;
padding: 20px 0px 0px 0px;
}
.testingpol-extrainfo-heading {
font-size: 42px;
text-align: center;
color: rgb(0, 0, 0);
padding: 0px;
margin: 50px 0px 0px 0px;
}
.testingpol_extrainfo_banner {
background-color: red;
min-height: 800px;
display: flex;
flex-direction: column;
/* align-items: flex-start; */
width: 1000px;
margin: 10px 0px 100px 250px;
border-radius: 3px;
}
input[id="expandAll"]{
align-self: flex-start;
}
.testingpol_extrainfo_column {
background-color: rgb(119, 119, 119);
color: white;
cursor: pointer;
padding: 18px;
margin: 0px 0px 0px 50px;
width: 900px;
border: none;
text-align: left;
outline: none;
font-size: 15px;
}
.active,
.testingpol_extrainfo_column:hover {
background-color: #555
}
.testingpol_extrainfo_content {
margin: 0px 0px 0px 50px;
padding: 0 18px;
width: 900px;
height: auto;
display: none;
overflow: hidden;
background-color: #f1f1f1;
}
.show {
display: block;
}
.show-individual {
display: block; }
/**** FOOTER ****/
.form-control-bottomstuff {
background-color: teal;
height: 400px;
width: auto;
text-align: center;
font-size: 50px;
padding-top: 150px;
}
.footer_bar {
background-color: black;
height: 400px;
width: auto;
text-align: center;
font-size: 50px;
padding-top: 150px;
color: white;
}
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<title>TEST</title>
</head>
<body>
<section class="main_body">
<div class="testingpol_extrainfo_outerbackground">
<div class="testingpol_extrainfo_banner">
<div class="testingpol-extrainfo-heading ">Collapse Title</div>
<input id="expandAll" type="button" value="Expand All" >
<button type="button" class="testingpol_extrainfo_column">Lorem</button>
<div class="testingpol_extrainfo_content">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste doloribus porro rem corrupti ex sed at provident neque, est eius iure, adipisci sequi possimus velit maiores voluptates laudantium eum odio.
</p>
</div>
<button type="button" class="testingpol_extrainfo_column">Lorem</button>
<div class="testingpol_extrainfo_content">
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Est commodi sunt veritatis similique error modi corporis? Nisi est omnis, praesentium eveniet numquam unde sunt, neque, quod consectetur ipsa ducimus beatae.
<h6>Lorem</h6>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse similique veniam iure, illum officiis quidem cupiditate veritatis? Possimus aliquid, fuga ea rerum dolores, provident, ad vitae commodi veritatis et numquam. Facere
</p><br>
<h6>Lorem</h6><br>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consectetur ab dolor natus quod enim perspiciatis, at hic voluptatem omnis autem deleniti sapiente. Accusantium quo provident libero sunt perspiciatis nostrum rerum.
</p><br>
<h6>Lorem</h6><br>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minima aut est porro maxime sint perferendis praesentium et maiores, cum ducimus numquam exercitationem aperiam animi ex, deleniti eveniet accusantium mollitia vero. distinctio nam
non?</p><br>
<h6>Lorem</h6><br>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni rem culpa aperiam deleniti. Voluptatum odio ducimus reprehenderit, nobis temporibus saepe a est, quasi non ipsa tempore eveniet perspiciatis explicabo neque. </p><br>
<h6>Lorem</h6> <br>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur officiis necessitatibus, iure adipisci in esse, ex praesentium dolores autem rerum hic ab minus, rem animi numquam cupiditate maiores et corrupti! Quaerat distinctio inventore
veritatis nemo dolore saepe? Modi, repellendus voluptas. Sint voluptas deleniti atque vero modi eum, architecto praesentium quidem maiores delectus distinctio sed error ex repudiandae quis, eius similique! nemo?
</p><br>
<h6>lorem</h6><br>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut quisquam doloremque cum beatae corrupti in suscipit repellat ducimus reprehenderit tempore autem officia, pariatur dolore debitis temporibus perferendis esse labore mollitia eaque
vero harum facere.</p><br>
<h6>lorem</h6><br>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minus dolore animi debitis quisquam neque eveniet aspernatur quod commodi vel, dignissimos laborum obcaecati ut laudantium, eaque, impedit nesciunt deleniti atque iure. Iusto, quia
hic quis vel similique qui possimus sit exercitationem. Eius labore dignissimos optio incidunt adipisci doloribus vero, debitis soluta aliquid illo non facilis? Qui corrupti quis iusto voluptate similique! </p>
</p>
</div>
<button type="button" class="testingpol_extrainfo_column">Lorem</button>
<div class="testingpol_extrainfo_content">
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsam recusandae distinctio reiciendis, voluptas suscipit veniam minus error eveniet nisi, incidunt quasi animi provident voluptates, sunt voluptatem laborum dignissimos mollitia! Alias!
</p><br>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ad vel illum veritatis aperiam labore modi culpa, ab officiis laudantium dicta. Reiciendis consectetur mollitia quasi, saepe error eum nemo tempora perferendis.</p><br>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora dignissimos sunt eos quae saepe rerum ipsam magni nulla repellat? Blanditiis saepe veritatis provident molestias facilis doloribus eveniet adipisci a explicabo.</a>.</p>
</div>
<button type="button" class="testingpol_extrainfo_column">Lorem</button>
<div class="testingpol_extrainfo_content">
<p>
<h6>lorem</h6>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti facere rerum, fuga sapiente eveniet tenetur, consectetur repellendus labore aperiam fugit iste voluptate eligendi reprehenderit molestiae ducimus magnam vitae quasi aut!
</p>
<h6>lorem</h6>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit in voluptates tempora aliquam aspernatur. Voluptate laboriosam culpa id porro placeat. Ea tempore doloribus quibusdam quasi itaque ducimus nulla iste architecto. Ipsa neque
sint ut alias et necessitatibus odio quisquam maiores placeat sed nam debitis dolore porro, quos dolorem nulla optio magnam laborum, eaque nemo vel. Nobis quas dicta sit perferendis.</p>
<h6>Lorem</h6>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis magnam dolores non debitis laboriosam voluptas aliquam eius mollitia ullam, impedit, tenetur facilis quo possimus odit quos ex illum distinctio eveniet. Eveniet numquam ducimus,
recusandae, voluptas expedita corrupti reprehenderit amet? Ut, ea.</p>
<h6>lorem</h6>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum illo architecto facere? Obcaecati, quasi eveniet repudiandae eligendi asperiores odio quibusdam? Ducimus cum itaque, eius delectus officia tempora nulla assumenda dolorem?
</p>
</p>
</div>
<button type="button" class="testingpol_extrainfo_column">Lorem</button>
<div class="testingpol_extrainfo_content">
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ab commodi hic distinctio officia. Veniam eum eos repudiandae cumque molestiae. Aliquam iusto repellendus vitae molestiae facere quaerat placeat sint totam illo! Excepturi rem eligendi commodi
</p>
</div>
<button type="button" class="testingpol_extrainfo_column">lorem</button>
<div class="testingpol_extrainfo_content">
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum nostrum fugit dolorum quis possimus optio doloribus adipisci eos quaerat praesentium debitis voluptatum voluptatem, quo quia autem officiis commodi nam dignissimos! Voluptas maxime temporibus
quis est, fugit eaque suscipit pariatur inventore nisi perspiciatis voluptatum cumque labore adipisci. Dicta, pariatur porro inventore illum cum similique consequatur deleniti mollitia atque consequuntur numquam quam!
</p>
</div>
<button type="button" class="testingpol_extrainfo_column">Lorem</button>
<div class="testingpol_extrainfo_content">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur quibusdam officia expedita voluptatem. Sint modi saepe quaerat sequi laborum numquam esse earum, similique hic libero velit fugiat reiciendis et natus?
</p>
</div>
</div>
</div>
</section>
<!-- FOOTER -->
<footer>
<div class="footer_bar ">
<div>
Footer 2
</div>
</div>
</footer>
</body>
<script src="script.js"></script>

Related

Displaying the image in the background when scrolling text

I create an effect that is to constantly display the image while scrolling text. I have a question how to make it work the same way, instead of position: sticky, posititon: fixed, so that this effect works on ie.
var sticky = document.querySelector('.sticky-container');
var img = document.querySelector('.sticky-item');
window.addEventListener('scroll',setSticky);
function setSticky(){
var top = sticky.offsetTop - window.pageYOffset;
if(top <= 0){
sticky.classList.add('sticky');
}
if(top.toString().replace('-','') >= sticky.offsetHeight || top >= 0){
sticky.classList.remove('sticky');
}
};
* {
margin: 0;
}
body {
width: 100%;
padding: 120vh 0;
}
p {
font-size: 28px;
color: #fff;
text-align: center;
margin: 80px 0;
}
.sticky-item {
width: 100%;
height: 100vh;
background: url(https://www.apple.com/v/iphone-xs/a/images/overview/camera_hero_large.jpg) center / cover no-repeat;
}
.sticky-container.sticky .sticky-item{
position: sticky;
top: 0;
z-index: -1;
}
<div class="sticky-container">
<figure class="sticky-item"></figure>
<p class="anim">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint, magni suscipit modi enim assumenda optio tenetur recusandae sed nobis veritatis!</p>
<p class="anim">Lorem ipsum dolor sit amet consectetur adipisicing elit. A, at.</p>
<p class="anim">Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit laudantium, esse omnis neque, minima voluptatibus repellendus amet, quod odio architecto veniam fuga inventore adipisci! Delectus fugit quisquam ad, ab facilis at saepe? Soluta delectus consequuntur fuga ipsa quasi dolorem officiis?</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cumque dolorum ipsum distinctio ut excepturi facilis laborum, nihil in aliquid assumenda necessitatibus quaerat recusandae. Nobis, dolore? Hic itaque ipsa inventore illo tempora similique perspiciatis architecto rem, nulla dicta error saepe earum ut atque aut aspernatur deserunt doloribus odit ea, a reprehenderit?</p>
</div>
EDIT:
<div class="sticky-container">
<p class="anim">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint, magni suscipit modi enim assumenda optio tenetur recusandae sed nobis veritatis!</p>
<p class="anim">Lorem ipsum dolor sit amet consectetur adipisicing elit. A, at.</p>
<p class="anim">Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit laudantium, esse omnis neque, minima voluptatibus repellendus amet, quod odio architecto veniam fuga inventore adipisci! Delectus fugit quisquam ad, ab facilis at saepe? Soluta delectus consequuntur fuga ipsa quasi dolorem officiis?</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cumque dolorum ipsum distinctio ut excepturi facilis laborum, nihil in aliquid assumenda necessitatibus quaerat recusandae. Nobis, dolore? Hic itaque ipsa inventore illo tempora similique perspiciatis architecto rem, nulla dicta error saepe earum ut atque aut aspernatur deserunt doloribus odit ea, a reprehenderit?</p>
</div>
.sticky-item {
background-attachment: fixed;
background-size: 100%;
}
Dai is correct, you do not need to use a script to achieve this effect.
https://jsfiddle.net/tractionworks/h3r5uvqm/8/
Since you need to use the position:sticky feature I doubt this works on IE without a big effort and actually using JS. But with 1.4% global usage I doubt this is worth your time.
However if you are fine with the coverage of sticky, I would entirely skip using JS and solve it via CSS:
* {
margin: 0;
}
body {
width: 100%;
padding: 120vh 0;
}
p {
font-size: 28px;
color: #fff;
text-align: center;
margin: 80px 0;
}
.sticky-item {
position: sticky;
top: 0;
z-index: -1;
width: 100%;
height: 100vh;
background: url(https://www.apple.com/v/iphone-xs/a/images/overview/camera_hero_large.jpg) center / cover no-repeat;
}
<div class="sticky-item"></div>
<div class="sticky-container">
<p class="anim">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint, magni suscipit modi enim assumenda optio tenetur recusandae sed nobis veritatis!</p>
<p class="anim">Lorem ipsum dolor sit amet consectetur adipisicing elit. A, at.</p>
<p class="anim">Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit laudantium, esse omnis neque, minima voluptatibus repellendus amet, quod odio architecto veniam fuga inventore adipisci! Delectus fugit quisquam ad, ab facilis at saepe? Soluta delectus consequuntur fuga ipsa quasi dolorem officiis?</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cumque dolorum ipsum distinctio ut excepturi facilis laborum, nihil in aliquid assumenda necessitatibus quaerat recusandae. Nobis, dolore? Hic itaque ipsa inventore illo tempora similique perspiciatis architecto rem, nulla dicta error saepe earum ut atque aut aspernatur deserunt doloribus odit ea, a reprehenderit?</p>
</div>

How to hide single div at a time without flashing rather setting visibility hidden

i want to hide a single div at a time so that below flashing can be avoided(shown in image)
NOTE: i cannot use visibility:hidden or visibility:show or $sel.css('visibility','hidden'); or $sel.css('visibility','show');
My Expectation: when I do $content.hide(); in the DOM see html area in image provided by me where style="display:none"/style="display:block" is happening for every element, rather I want to hide that particular element at a time (so no multiple display/hide at a time, only one display/hide) similar to #snippet2, #snippet1 should work (but hidden element should not contain any width/height)
below is my code which should work with display:none or $el.hide()/$el.show():
#Snippet1
$(function() {
var pos = 1;
var ii = 0;
var centerbandTop = $('.center-band').offset().top;
var centerbandBottom = $('.center-band').outerHeight() + centerbandTop;
$('.contents').hide();
var intId = setInterval(function() {
ii++;
pos = -ii;
//console.log(pos);
//if (pos )
$('.contents').each(function() {
var $content = $(this);
var contentTop = $content.offset().top;
var contentBottom = $content.outerHeight() + contentTop;
$content.hide();
//console.log($content.position().top, centerbandTop, contentBottom);
if (centerbandBottom > contentTop && centerbandTop < contentBottom)
$content.show();
});
$('.container').css({
// '-webkit-transform' : 'translate(0,' + pos + ')',
transform: 'translateY(' + pos + 'px)'
});
}, 100);
});
.container{
width: 100%;
height: 100%;
background: #000000d6;
font-size: 19px;
color: #a19999;
position: relative;
}
.contents{
margin-bottom: 15px;
border-bottom: 1px solid #424242;
padding: 20px;
visibility: hidden;
}
.center-band{
width: 98%;
height: 78px;
z-index: 200;
background: #b4b1b147;
position: fixed;
top: 50%;
}
.wrapper{
position: relative;
}
.over{
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="container">
<div class="contents"> (1) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus fugit eius perferendis veritatis accusantium corporis nulla alias sed possimus quibusdam reiciendis nisi maiores inventore error, incidunt eveniet ut asperiores officiis.</div>
<div class="contents">(2) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima, distinctio temporibus facere, laboriosam doloribus error quaerat ipsa, non nobis rerum mollitia quibusdam quas illo a qui consequuntur consectetur deleniti saepe.</div>
<div class="contents">(3) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, sed, atque. Adipisci quasi debitis, soluta praesentium distinctio impedit veritatis officia molestias culpa fuga excepturi voluptates suscipit aliquam ea unde, non!</div>
<div class="contents">(4) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur, incidunt, harum. Perferendis ipsum, molestias nihil sequi nam nulla, aliquid ipsa numquam cum! Perferendis ut voluptates hic excepturi dolores, ipsum impedit.</div>
<div class="contents">(5) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim itaque debitis voluptates, reiciendis dolorum, labore eius. Illum similique ex, iusto rerum ratione minima, corporis aspernatur aliquam, itaque numquam sint enim!</div>
<div class="contents">(6) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint numquam totam, a aliquam veritatis porro ullam! Nostrum sint ipsum odio aperiam deserunt aut placeat dignissimos est ad, quae vitae aliquid.</div>
<div class="contents">(7) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et quos atque enim, alias culpa quibusdam ratione, beatae non possimus, velit eaque. Optio qui saepe, earum harum beatae maxime obcaecati minima.</div>
<div class="contents">(8) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic id incidunt sapiente, magni, sequi ea molestiae iure maxime delectus doloribus error assumenda veritatis maiores saepe nihil neque autem similique obcaecati!</div>
<div class="contents">(9) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum velit hic iure nam nulla natus corrupti eveniet, suscipit voluptates nostrum. Cupiditate vero ipsam alias fuga, magnam voluptas deserunt corporis non!</div>
<div class="contents">(10) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae voluptatibus accusamus pariatur? Ipsum nobis ratione fuga, voluptates quam placeat officia odit eveniet aliquam, eaque quisquam tenetur! Exercitationem maxime vel quas!</div>
</div>
<div class="center-band"> </div>
</div>
Question: Above snippet(#snippet1) should work as same as below(#snippet2) one but without using visibility(#snippet2 Working without flashing)
#snippet2
$(function() {
var pos = 1;
var ii = 0;
var centerbandTop = $('.center-band').offset().top;
var centerbandBottom = $('.center-band').outerHeight() + centerbandTop;
var intId = setInterval(function() {
ii++;
pos = -ii;
//console.log(pos);
//if (pos )
$('.contents').each(function() {
var $content = $(this);
var contentTop = $content.offset().top;
var contentBottom = $content.outerHeight() + contentTop;
$content.css('visibility', 'hidden');
//console.log($content.position().top, centerbandTop, contentBottom);
if (centerbandBottom > contentTop && centerbandTop < contentBottom)
$content.css('visibility', 'visible');
});
$('.container').css({
// '-webkit-transform' : 'translate(0,' + pos + ')',
transform: 'translateY(' + pos + 'px)'
});
}, 100);
});
/* Styles go here */
.container{
width: 100%;
height: 100%;
background: #000000d6;
font-size: 19px;
color: #a19999;
position: relative;
}
.contents{
margin-bottom: 15px;
border-bottom: 1px solid #424242;
padding: 20px;
visibility: hidden;
}
.center-band{
width: 98%;
height: 78px;
z-index: 200;
background: #b4b1b147;
position: fixed;
top: 50%;
}
.wrapper{
position: relative;
}
.over{
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="container">
<div class="contents"> (1) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus fugit eius perferendis veritatis accusantium corporis nulla alias sed possimus quibusdam reiciendis nisi maiores inventore error, incidunt eveniet ut asperiores officiis.</div>
<div class="contents">(2) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima, distinctio temporibus facere, laboriosam doloribus error quaerat ipsa, non nobis rerum mollitia quibusdam quas illo a qui consequuntur consectetur deleniti saepe.</div>
<div class="contents">(3) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, sed, atque. Adipisci quasi debitis, soluta praesentium distinctio impedit veritatis officia molestias culpa fuga excepturi voluptates suscipit aliquam ea unde, non!</div>
<div class="contents">(4) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur, incidunt, harum. Perferendis ipsum, molestias nihil sequi nam nulla, aliquid ipsa numquam cum! Perferendis ut voluptates hic excepturi dolores, ipsum impedit.</div>
<div class="contents">(5) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim itaque debitis voluptates, reiciendis dolorum, labore eius. Illum similique ex, iusto rerum ratione minima, corporis aspernatur aliquam, itaque numquam sint enim!</div>
<div class="contents">(6) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint numquam totam, a aliquam veritatis porro ullam! Nostrum sint ipsum odio aperiam deserunt aut placeat dignissimos est ad, quae vitae aliquid.</div>
<div class="contents">(7) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et quos atque enim, alias culpa quibusdam ratione, beatae non possimus, velit eaque. Optio qui saepe, earum harum beatae maxime obcaecati minima.</div>
<div class="contents">(8) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic id incidunt sapiente, magni, sequi ea molestiae iure maxime delectus doloribus error assumenda veritatis maiores saepe nihil neque autem similique obcaecati!</div>
<div class="contents">(9) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum velit hic iure nam nulla natus corrupti eveniet, suscipit voluptates nostrum. Cupiditate vero ipsam alias fuga, magnam voluptas deserunt corporis non!</div>
<div class="contents">(10) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae voluptatibus accusamus pariatur? Ipsum nobis ratione fuga, voluptates quam placeat officia odit eveniet aliquam, eaque quisquam tenetur! Exercitationem maxime vel quas!</div>
</div>
<div class="center-band"> </div>
</div>
Please help me thanks in advance!!!
It is hard to understand your question, but from the code snippets you provided it looks like you need to fundamentally rethink your approach.
Your code moves the "container" div up and then computes the positions of the contained elements, but the problem is that when you hide or show an element all the other elements move in response. So when "contents 1" gets above the center band and you hide it, it stops taking up space and "contents 2" moves to where "contents 1" was. However, since "contents 1" was above the center band, now "contents 2" is above the center band and you are going to hide that, too. And so in your code, as soon as "contents 1" gets above the center band, all the contents will be hidden.
There are many ways to handle this, and the best way for your situation will probably depend on details of what you are truly trying to accomplish and which are not clear from your question. Using CSS overflow: hidden is probably the most efficient and you do not really explain what is wrong with that solution.
Another option is to adjust the position of the container to compensate for hiding the element. You also have to have some way to figure out when to show items that enter the box, which you cannot do from their position, because they are hidden. This snippet is not ideal, and there are some glitches because of margins, but it shows the concept.
$(function() {
var pos = 0;
var showNext = false;
var centerbandTop = $('.center-band').offset().top;
var centerbandBottom = $('.center-band').outerHeight() + centerbandTop;
var scroll = function() {
pos--; // move the list up one pixel
$('.contents').each(function() {
var $content = $(this);
// If the previous "contents" moved up enough
// to make room for this hidden element, show it.
if (showNext) {
$content.show();
showNext = false;
} else if ($content.is(':hidden')) // nothing to do
return;
// We have to wait until after we have shown
// the element to compute its position.
var contentTop = $content.offset().top;
var contentBottom = $content.outerHeight() + contentTop;
if (contentBottom < centerbandTop) {
// If the element has exited the top of the
// band, hide it, and move the container
// down to compensate for removing this
// element.
pos = pos + $content.outerHeight(true);
$content.hide();
} else if (contentTop > centerbandBottom) {
// If the element is below the band,
// hide it. Really this only needs to
// be done the first time through.
$content.hide();
}
// If there is room in the center band
// below this element, show the next one
showNext = contentBottom < centerbandBottom;
$('.container').css({
transform: 'translateY(' + pos + 'px)'
});
});
}
// We start with the contents "visibility: hidden"
// and all the elements displayed so we do not
// see them but still can compute their positions.
// One pass through scroll() then hides everything
// that needs to be hidden.
scroll();
// Now we can make everthing visible
$('.contents').css('visibility', 'visible');
// And now we set up the scrolling timer
var intId = setInterval(scroll, 100);
});
/* Styles go here */
.container {
width: 100%;
height: 100%;
background: #000000d6;
font-size: 19px;
color: #a19999;
position: relative;
}
.contents {
margin-bottom: 15px;
border-bottom: 1px solid #424242;
padding: 20px;
visibility: hidden;
}
.center-band {
width: 98%;
height: 78px;
z-index: 200;
background: #b4b1b147;
position: fixed;
top: 50%;
}
.wrapper {
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="container">
<div class="contents"> (1) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus fugit eius perferendis veritatis accusantium corporis nulla alias sed possimus quibusdam reiciendis nisi maiores inventore error, incidunt eveniet ut asperiores officiis.</div>
<div class="contents">(2) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima, distinctio temporibus facere, laboriosam doloribus error quaerat ipsa, non nobis rerum mollitia quibusdam quas illo a qui consequuntur consectetur deleniti saepe.</div>
<div class="contents">(3) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, sed, atque. Adipisci quasi debitis, soluta praesentium distinctio impedit veritatis officia molestias culpa fuga excepturi voluptates suscipit aliquam ea unde, non!</div>
<div class="contents">(4) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur, incidunt, harum. Perferendis ipsum, molestias nihil sequi nam nulla, aliquid ipsa numquam cum! Perferendis ut voluptates hic excepturi dolores, ipsum impedit.</div>
<div class="contents">(5) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim itaque debitis voluptates, reiciendis dolorum, labore eius. Illum similique ex, iusto rerum ratione minima, corporis aspernatur aliquam, itaque numquam sint enim!</div>
<div class="contents">(6) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint numquam totam, a aliquam veritatis porro ullam! Nostrum sint ipsum odio aperiam deserunt aut placeat dignissimos est ad, quae vitae aliquid.</div>
<div class="contents">(7) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et quos atque enim, alias culpa quibusdam ratione, beatae non possimus, velit eaque. Optio qui saepe, earum harum beatae maxime obcaecati minima.</div>
<div class="contents">(8) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic id incidunt sapiente, magni, sequi ea molestiae iure maxime delectus doloribus error assumenda veritatis maiores saepe nihil neque autem similique obcaecati!</div>
<div class="contents">(9) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum velit hic iure nam nulla natus corrupti eveniet, suscipit voluptates nostrum. Cupiditate vero ipsam alias fuga, magnam voluptas deserunt corporis non!</div>
<div class="contents">(10) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae voluptatibus accusamus pariatur? Ipsum nobis ratione fuga, voluptates quam placeat officia odit eveniet aliquam, eaque quisquam tenetur! Exercitationem maxime vel quas!</div>
</div>
<div class="center-band"> </div>
</div>
Initially calculate the vertical beginning/ending values of all divs and store this data independently. Make all divs visible (display !== 'none')in the DOM very briefly, while using opacity to hide them, in order to calculate their heights (no way to calculate div height without attaching it to the DOM).
Also need to make all scrollable items position: absolute so that their removal doesn't reflow the items beneath them. This means javascript also needs to calculate top positions for items.
Then, whenever things change (whenever new items potentially need to be shown/hidden) check all independently stored position data against the position of the "hot zone" (the zone with which contact causes visibility).
window.onload = () => {
let positions = []; // Independently store positional data for text items
// Keep references to some useful DOM elements
let hotZone = document.getElementsByClassName('hot-zone')[0];
let scroller = document.getElementsByClassName('scroller')[0];
let scrollerHeight = scroller.getElementsByClassName('height')[0];
let items = document.getElementsByClassName('item');
let totalHeight = 0; // We'll track total height of items as we go
for (let i = 0; i < items.length; i++) {
let { height } = items[i].getBoundingClientRect();
items[i].style.top = `${Math.round(totalHeight)}px`;
items[i].style.display = 'none';
positions.push([ totalHeight, height ]);
totalHeight += height;
}
// Make sure the scroller doesn't shrink when we remove its children
scrollerHeight.style.height = `${Math.round(totalHeight)}px`;
let reevaluate = () => {
let hotRect = hotZone.getBoundingClientRect();
let scrollRect = scroller.getBoundingClientRect();
for (let i = 0; i < items.length; i++) {
let [ itemTop, itemHeight ] = positions[i];
itemTop += scrollRect.top; // Make relative to scroller
itemTop -= scroller.scrollTop; // Make relative to scroll amt
let tooHigh = itemTop + itemHeight < hotRect.top;
let tooLow = itemTop > hotRect.bottom;
let disp = (tooHigh || tooLow) ? 'none' : 'block';
if (disp !== items[i].style.display) items[i].style.display = disp;
}
};
// Immediately call `reevaluate` to initially show items
reevaluate();
// Now everything is nice so make the scroller completely opaque
document.getElementsByClassName('scroller')[0].style.opacity = '1';
// Setup listeners to call `reevaluate` when there's a possibility
// new items need to show. E.g., the "hot zone" has moved, the items
// have moved, scrolls have happened, etc.
scroller.addEventListener('scroll', reevaluate);
};
.contain {
position: fixed;
left: 0; top: 0;
width: 100%; height: 100%;
background-color: #000000;
}
.scroller {
position: relative;
left: 0; top: 0;
width: 100%; height: 100%;
overflow-x: hidden;
overflow-y: scroll;
color: #ffffff;
opacity: 0; /* Initially invisible (to avoid 1-frame flicker) */
}
.scroller > .height {
position: relative;
width: 0; height: 0; /* Invisible; lends the scroller its height */
}
.scroller > .item {
position: absolute;
left: 0; top: 0;
width: 100%;
outline: 1px solid rgba(255, 0, 0, 0.8);
}
.hot-zone {
position: absolute;
left: 0; top: 30%;
width: 100%; height: 20%;
background-color: rgba(255, 255, 255, 0.6);
box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.8);
z-index: 2;
pointer-events: none;
}
<div class="contain">
<div class="hot-zone"></div>
<div class="scroller">
<div class="height"></div>
<div class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus fugit eius perferendis veritatis accusantium corporis nulla alias sed possimus quibusdam reiciendis nisi maiores inventore error, incidunt eveniet ut asperiores officiis.</div>
<div class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus fugit eius perferendis veritatis accusantium corporis nulla alias sed possimus quibusdam reiciendis nisi maiores inventore error, incidunt eveniet ut asperiores officiis.</div>
<div class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus fugit eius perferendis veritatis accusantium corporis nulla alias sed possimus quibusdam reiciendis nisi maiores inventore error, incidunt eveniet ut asperiores officiis.</div>
<div class="item">Not too much here :)</div>
<div class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus fugit eius perferendis veritatis accusantium corporis nulla alias sed possimus quibusdam reiciendis nisi maiores inventore error, incidunt eveniet ut asperiores officiis.</div>
<div class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus fugit eius perferendis veritatis accusantium corporis nulla alias sed possimus quibusdam reiciendis nisi maiores inventore error, incidunt eveniet ut asperiores officiis.</div>
<div class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus fugit eius perferendis veritatis accusantium corporis nulla alias sed possimus quibusdam reiciendis nisi maiores inventore error, incidunt eveniet ut asperiores officiis.</div>
<div class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus fugit eius perferendis veritatis accusantium corporis nulla alias sed possimus quibusdam reiciendis nisi maiores inventore error, incidunt eveniet ut asperiores officiis.</div>
<div class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus fugit eius perferendis veritatis accusantium corporis nulla alias sed possimus quibusdam reiciendis nisi maiores inventore error, incidunt eveniet ut asperiores officiis.</div>
<div class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus fugit eius perferendis veritatis accusantium corporis nulla alias sed possimus quibusdam reiciendis nisi maiores inventore error, incidunt eveniet ut asperiores officiis.</div>
<div class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus fugit eius perferendis veritatis accusantium corporis nulla alias sed possimus quibusdam reiciendis nisi maiores inventore error, incidunt eveniet ut asperiores officiis.</div>
<div class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus fugit eius perferendis veritatis accusantium corporis nulla alias sed possimus quibusdam reiciendis nisi maiores inventore error, incidunt eveniet ut asperiores officiis.</div>
<div class="item">THIS<br/>ONE<br/>IS<br/>REALLY<br/>QUITE<br/>LONG<br/>INDEED<br/>GOOD<br/>SIR</div>
<div class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus fugit eius perferendis veritatis accusantium corporis nulla alias sed possimus quibusdam reiciendis nisi maiores inventore error, incidunt eveniet ut asperiores officiis.</div>
<div class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus fugit eius perferendis veritatis accusantium corporis nulla alias sed possimus quibusdam reiciendis nisi maiores inventore error, incidunt eveniet ut asperiores officiis.</div>
<div class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus fugit eius perferendis veritatis accusantium corporis nulla alias sed possimus quibusdam reiciendis nisi maiores inventore error, incidunt eveniet ut asperiores officiis.</div>
<div class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus fugit eius perferendis veritatis accusantium corporis nulla alias sed possimus quibusdam reiciendis nisi maiores inventore error, incidunt eveniet ut asperiores officiis.</div>
<div class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus fugit eius perferendis veritatis accusantium corporis nulla alias sed possimus quibusdam reiciendis nisi maiores inventore error, incidunt eveniet ut asperiores officiis.</div>
<div class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus fugit eius perferendis veritatis accusantium corporis nulla alias sed possimus quibusdam reiciendis nisi maiores inventore error, incidunt eveniet ut asperiores officiis.</div>
<div class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus fugit eius perferendis veritatis accusantium corporis nulla alias sed possimus quibusdam reiciendis nisi maiores inventore error, incidunt eveniet ut asperiores officiis.</div>
<div class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus fugit eius perferendis veritatis accusantium corporis nulla alias sed possimus quibusdam reiciendis nisi maiores inventore error, incidunt eveniet ut asperiores officiis.</div>
<div class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus fugit eius perferendis veritatis accusantium corporis nulla alias sed possimus quibusdam reiciendis nisi maiores inventore error, incidunt eveniet ut asperiores officiis.</div>
<div class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus fugit eius perferendis veritatis accusantium corporis nulla alias sed possimus quibusdam reiciendis nisi maiores inventore error, incidunt eveniet ut asperiores officiis.</div>
<div class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus fugit eius perferendis veritatis accusantium corporis nulla alias sed possimus quibusdam reiciendis nisi maiores inventore error, incidunt eveniet ut asperiores officiis.</div>
<div class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus fugit eius perferendis veritatis accusantium corporis nulla alias sed possimus quibusdam reiciendis nisi maiores inventore error, incidunt eveniet ut asperiores officiis.</div>
</div>
</div>
So you said in your comment that
but my requirement is whichever content touches that gray band should
be shown otherwise it has to be hidden holding no width and height
From this I understand that you need a vertical text scroller. Why don't you use the gray band div as a container, with overflow hidden, and then scroll the content through it?
$(function() {
var pos = 1;
var ii = 0;
var centerbandTop = $('.center-band').offset().top;
var centerbandBottom = $('.center-band').outerHeight() + centerbandTop;
//$('.contents').hide();
var intId = setInterval(function() {
ii++;
pos = -ii;
//console.log(pos);
//if (pos )
$('.contents').each(function() {
var $content = $(this);
var contentTop = $content.offset().top;
var contentBottom = $content.outerHeight() + contentTop;
//$content.hide();
//console.log($content.position().top, centerbandTop, contentBottom);
//if (centerbandBottom > contentTop && centerbandTop < contentBottom)
//$content.show();
});
$('.container').css({
// '-webkit-transform' : 'translate(0,' + pos + ')',
transform: 'translateY(' + pos + 'px)'
});
}, 100);
});
.container{
width: 100%;
/*height: 100%;*/
background: #000000d6;
font-size: 19px;
color: #a19999;
position: relative;
}
.contents{
margin-bottom: 15px;
border-bottom: 1px solid #424242;
padding: 20px;
/*visibility: hidden;*/
}
.center-band{
width: 98%;
height: 78px;
z-index: 200;
background: #b4b1b147;
position: relative;
/*top: 50%;*/
overflow: hidden;
}
.wrapper{
position: relative;
}
.over{
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div>
some static text above
</div>
<div class="center-band">
<div class="container">
<div class="contents"> (1) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus fugit eius perferendis veritatis accusantium corporis nulla alias sed possimus quibusdam reiciendis nisi maiores inventore error, incidunt eveniet ut asperiores officiis.</div>
<div class="contents">(2) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima, distinctio temporibus facere, laboriosam doloribus error quaerat ipsa, non nobis rerum mollitia quibusdam quas illo a qui consequuntur consectetur deleniti saepe.</div>
<div class="contents">(3) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, sed, atque. Adipisci quasi debitis, soluta praesentium distinctio impedit veritatis officia molestias culpa fuga excepturi voluptates suscipit aliquam ea unde, non!</div>
<div class="contents">(4) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur, incidunt, harum. Perferendis ipsum, molestias nihil sequi nam nulla, aliquid ipsa numquam cum! Perferendis ut voluptates hic excepturi dolores, ipsum impedit.</div>
<div class="contents">(5) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim itaque debitis voluptates, reiciendis dolorum, labore eius. Illum similique ex, iusto rerum ratione minima, corporis aspernatur aliquam, itaque numquam sint enim!</div>
<div class="contents">(6) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint numquam totam, a aliquam veritatis porro ullam! Nostrum sint ipsum odio aperiam deserunt aut placeat dignissimos est ad, quae vitae aliquid.</div>
<div class="contents">(7) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et quos atque enim, alias culpa quibusdam ratione, beatae non possimus, velit eaque. Optio qui saepe, earum harum beatae maxime obcaecati minima.</div>
<div class="contents">(8) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic id incidunt sapiente, magni, sequi ea molestiae iure maxime delectus doloribus error assumenda veritatis maiores saepe nihil neque autem similique obcaecati!</div>
<div class="contents">(9) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum velit hic iure nam nulla natus corrupti eveniet, suscipit voluptates nostrum. Cupiditate vero ipsam alias fuga, magnam voluptas deserunt corporis non!</div>
<div class="contents">(10) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae voluptatibus accusamus pariatur? Ipsum nobis ratione fuga, voluptates quam placeat officia odit eveniet aliquam, eaque quisquam tenetur! Exercitationem maxime vel quas!</div>
</div>
</div>
<div>
some static text below
</div>
</div>

How to hide other div apart from touched div to the band

I want to hide other divs apart from touched div to the band
the band is this element <div class="center-band"></div>
whenever the scrolling element touches the element <div class="center-band"></div> then it has to be shown, and other divs have to be hidden
Question: only touched div to the band has to be shown, and others has to be hidden, that means only one content has to be shown at a time.
jsbin: https://jsbin.com/zudideheza/edit?html,css,js,console,output
$(function()
{
var pos = 1;
var ii = 0;
var intId = setInterval(function()
{
ii++;
pos = - ii;
//console.log(pos);
$('.container').css({
transform: 'translateY(' + pos + 'px)'
});
}, 100);
});
.container {
width: 100%;
height: 100%;
background: #000000d6;
font-size: 19px;
color: #a19999;
position: relative;
}
.contents {
margin-bottom: 15px;
border-bottom: 1px solid #424242;
padding: 20px;
}
.center-band {
width: 98%;
height: 78px;
z-index: 200;
background: #b4b1b147;
position: fixed;
top: 50%;
}
.wrapper {
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="container" style="transform:translateY(0px);">
<div class="contents"> (1) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus fugit eius perferendis veritatis accusantium corporis nulla alias sed possimus quibusdam reiciendis nisi maiores inventore error, incidunt eveniet ut asperiores officiis.</div>
<div class="contents">(2) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima, distinctio temporibus facere, laboriosam doloribus error quaerat ipsa, non nobis rerum mollitia quibusdam quas illo a qui consequuntur consectetur deleniti saepe.</div>
<div class="contents">(3) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, sed, atque. Adipisci quasi debitis, soluta praesentium distinctio impedit veritatis officia molestias culpa fuga excepturi voluptates suscipit aliquam ea unde, non!</div>
<div class="contents">(4) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur, incidunt, harum. Perferendis ipsum, molestias nihil sequi nam nulla, aliquid ipsa numquam cum! Perferendis ut voluptates hic excepturi dolores, ipsum impedit.</div>
<div class="contents">(5) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim itaque debitis voluptates, reiciendis dolorum, labore eius. Illum similique ex, iusto rerum ratione minima, corporis aspernatur aliquam, itaque numquam sint enim!</div>
<div class="contents">(6) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint numquam totam, a aliquam veritatis porro ullam! Nostrum sint ipsum odio aperiam deserunt aut placeat dignissimos est ad, quae vitae aliquid.</div>
<div class="contents">(7) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et quos atque enim, alias culpa quibusdam ratione, beatae non possimus, velit eaque. Optio qui saepe, earum harum beatae maxime obcaecati minima.</div>
<div class="contents">(8) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic id incidunt sapiente, magni, sequi ea molestiae iure maxime delectus doloribus error assumenda veritatis maiores saepe nihil neque autem similique obcaecati!</div>
<div class="contents">(9) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum velit hic iure nam nulla natus corrupti eveniet, suscipit voluptates nostrum. Cupiditate vero ipsam alias fuga, magnam voluptas deserunt corporis non!</div>
<div class="contents">(10) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae voluptatibus accusamus pariatur? Ipsum nobis ratione fuga, voluptates quam placeat officia odit eveniet aliquam, eaque quisquam tenetur! Exercitationem maxime vel quas!</div>
</div>
<div class="center-band"></div>
</div>
Note: I don't want to change scrolling content approach (question is not about positioning)
Please help me thanks in advance!!!!
Try this out:
$(function()
{
var pos = 1;
var ii = 0;
var intId = setInterval(function()
{
ii++;
pos = - ii;
//console.log(pos);
$('.inner-content').css({
transform: 'translateY(' + pos + 'px)'
});
}, 100);
});
.container {
width: 100%;
height: 100%;
background: #000000d6;
font-size: 19px;
color: #a19999;
position: relative;
}
.contents {
margin-bottom: 15px;
border-bottom: 1px solid #424242;
padding: 20px;
/*visibility:hidden;*/
}
.show{
/*visibility: visible;*/
}
.center-band {
width: 98%;
height: 78px;
z-index: 200;
background: #b4b1b147;
position: fixed;
top: 50%;
}
.wrapper {
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="container">
<div class=" center-band" style="overflow-y:hidden;">
<div class="inner-content" style=" transform:translateY(0px);">
<div class="contents"> (1) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus fugit eius perferendis veritatis accusantium corporis nulla alias sed possimus quibusdam reiciendis nisi maiores inventore error, incidunt eveniet ut asperiores officiis.</div>
<div class="contents">(2) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima, distinctio temporibus facere, laboriosam doloribus error quaerat ipsa, non nobis rerum mollitia quibusdam quas illo a qui consequuntur consectetur deleniti saepe.</div>
<div class="contents">(3) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, sed, atque. Adipisci quasi debitis, soluta praesentium distinctio impedit veritatis officia molestias culpa fuga excepturi voluptates suscipit aliquam ea unde, non!</div>
<div class="contents">(4) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur, incidunt, harum. Perferendis ipsum, molestias nihil sequi nam nulla, aliquid ipsa numquam cum! Perferendis ut voluptates hic excepturi dolores, ipsum impedit.</div>
<div class="contents">(5) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim itaque debitis voluptates, reiciendis dolorum, labore eius. Illum similique ex, iusto rerum ratione minima, corporis aspernatur aliquam, itaque numquam sint enim!</div>
<div class="contents">(6) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint numquam totam, a aliquam veritatis porro ullam! Nostrum sint ipsum odio aperiam deserunt aut placeat dignissimos est ad, quae vitae aliquid.</div>
<div class="contents">(7) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et quos atque enim, alias culpa quibusdam ratione, beatae non possimus, velit eaque. Optio qui saepe, earum harum beatae maxime obcaecati minima.</div>
<div class="contents">(8) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic id incidunt sapiente, magni, sequi ea molestiae iure maxime delectus doloribus error assumenda veritatis maiores saepe nihil neque autem similique obcaecati!</div>
<div class="contents">(9) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum velit hic iure nam nulla natus corrupti eveniet, suscipit voluptates nostrum. Cupiditate vero ipsam alias fuga, magnam voluptas deserunt corporis non!</div>
<div class="contents">(10) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae voluptatibus accusamus pariatur? Ipsum nobis ratione fuga, voluptates quam placeat officia odit eveniet aliquam, eaque quisquam tenetur! Exercitationem maxime vel quas!</div>
</div>
</div>
</div>
</div>
It depends on whether you want to include the margins or not, but you can use the following to detect the positions and then apply the class over to the .content divs that are currently hovered over:
$(function() {
var pos = 1;
var ii = 0;
var centerbandTop = $('.center-band').offset().top;
var centerbandBottom = $('.center-band').outerHeight() + centerbandTop;
var intId = setInterval(function() {
ii++;
pos = -ii;
$('.contents').each(function() {
var $content = $(this);
var contentTop = $content.offset().top;
var contentBottom = $content.outerHeight() + contentTop;
$content.removeClass('over');
if (centerbandBottom > contentTop && centerbandTop < contentBottom)
$content.addClass('over');
});
$('.container').css({
// '-webkit-transform' : 'translate(0,' + pos + ')',
transform: 'translateY(' + pos + 'px)'
});
}, 100);
});
Demo: http://plnkr.co/edit/YwaPy3qz07goW5ZfwARl
This is not exactly the direct answer to your questions, but another approach to solve this. May be this will help you somehow.
var domRect = document.getElementById('center-band').getBoundingClientRect();
var centerBandTop = domRect.top+20;
var centerBandBottom = domRect.top + 58;
$(function(){
var pos = 1;
var ii = 0;
var intId = setInterval(function(){
ii++;
pos =- ii;
$('.container').css({
transform : 'translateY('+pos+'px)'
});
$('.contents').each(function(idx,ele){
var domContent = document.getElementsByClassName('contents')[idx].getBoundingClientRect();
// console.log(idx +'---'+ domContent.top)
if(domContent.top < centerBandBottom && domContent.bottom > centerBandTop ){
//$(ele).text('');
}
else{
//$(ele).css('color','#fff');
}
})
},100);
});
.container{
z-index:999;
width: 100%;
height: 100%;
/*background: #222;*/
font-size: 19px;
color: #222;
position: relative;
}
.contents{
margin-bottom: 15px;
/* border-bottom: 1px solid #424242;*/
padding: 20px;
color:#fff;
}
#center-band{
width: 98%;
height: 78px;
background: #222;
position: fixed;
top: 50%;
}
.wrapper{
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="container" style="transform:translateY(0px);">
<div class="contents"> (1) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus fugit eius perferendis veritatis accusantium corporis nulla alias sed possimus quibusdam reiciendis nisi maiores inventore error, incidunt eveniet ut asperiores officiis.</div>
<div class="contents">(2) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima, distinctio temporibus facere, laboriosam doloribus error quaerat ipsa, non nobis rerum mollitia quibusdam quas illo a qui consequuntur consectetur deleniti saepe.</div>
<div class="contents">(3) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, sed, atque. Adipisci quasi debitis, soluta praesentium distinctio impedit veritatis officia molestias culpa fuga excepturi voluptates suscipit aliquam ea unde, non!</div>
<div class="contents">(4) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur, incidunt, harum. Perferendis ipsum, molestias nihil sequi nam nulla, aliquid ipsa numquam cum! Perferendis ut voluptates hic excepturi dolores, ipsum impedit.</div>
<div class="contents">(5) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim itaque debitis voluptates, reiciendis dolorum, labore eius. Illum similique ex, iusto rerum ratione minima, corporis aspernatur aliquam, itaque numquam sint enim!</div>
<div class="contents">(6) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint numquam totam, a aliquam veritatis porro ullam! Nostrum sint ipsum odio aperiam deserunt aut placeat dignissimos est ad, quae vitae aliquid.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint numquam totam, a aliquam veritatis porro ullam! Nostrum sint ipsum odio aperiam deserunt aut placeat dignissimos est ad, quae vitae aliquid.</div>
<div class="contents">(7) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et quos atque enim, alias culpa quibusdam ratione, beatae non possimus, velit eaque. Optio qui saepe, earum harum beatae maxime obcaecati minima.</div>
<div class="contents">(8) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic id incidunt sapiente, magni, sequi ea molestiae iure maxime delectus doloribus error assumenda veritatis maiores saepe nihil neque autem similique obcaecati!</div>
<div class="contents">(9) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum velit hic iure nam nulla natus corrupti eveniet, suscipit voluptates nostrum. Cupiditate vero ipsam alias fuga, magnam voluptas deserunt corporis non!</div>
<div class="contents">(10) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae voluptatibus accusamus pariatur? Ipsum nobis ratione fuga, voluptates quam placeat officia odit eveniet aliquam, eaque quisquam tenetur! Exercitationem maxime vel quas!</div>
</div>
<div id="center-band"> </div>
</div>

jQuery - Set height of parent element to that of absolute positioned overlay, but only for service with active element

I need to work out how to create a function that gets the height of the current opened class "overlay" once it has been "opened", and then apply that to the parent div of class "service-content".
I have pretty much managed that, but I'm not sure how to contain it to the service that has the overlay opened. At the moment it gives the first element clicked height to all available classes.
I got this far:
https://codepen.io/gooseygander/pen/vWMQgd
jQuery(document).ready(function() {
//Click element to show content overlay
$('.open-overlay').click(function() {
//traverse dom to get the parent container
//Finder service overlay container and add/toggle the open lass
jQuery(this).closest('.service-contentContainer').find('.overlay').addClass('overlay--open');
});
$('.close-overlay').click(function() {
//traverse dom to get the parent container
//Finder service overlay container and add/toggle the open lass
$(this).closest('.service-contentContainer').find('.overlay').removeClass('overlay--open');
});
$(".open-overlay").click(function() {
if ($('.serviceOverlay--open')) {
function setTheHeight() {
var maxHeight = $(".service-content").outerHeight();
$('.service-content').height(maxHeight);
};
setTheHeight();
$(window).resize(function() {
setTheHeight();
});
};
});
if (!$('#mydiv').hasClass("serviceOverlay--open")) {
$('.service').removeAttr('height');
}
});
*,
*:before,
*:after {
box-sizing: border-box;
}
.service {
border: 1px solid green;
padding: 20px;
margin: 0 20%;
}
.service-contentContainer {
position: relative;
overflow: hidden;
}
.service-content {
border: 3px solid red;
padding: 20px;
}
.overlay {
background: lightblue;
padding: 20px;
position: absolute;
top: 0;
width: 100%;
height: 100%;
transform: translateX(100%);
transition: all 0.2s ease-out;
z-index: 1000;
overflow: auto;
}
.overlay--open {
transform: translateX(0);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="service">
<div class="service-contentContainer">
<div class="service-content">
<h1>Header </h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur, itaque nihil. Tenetur assumenda exercitationem quibusdam suscipit adipisci eveniet? Placeat nemo laudantium aperiam possimus officia neque iste voluptate atque rem consectetur.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur, itaque nihil. Tenetur assumenda exercitationem quibusdam suscipit adipisci eveniet? Placeat nemo laudantium aperiam possimus officia neque iste voluptate atque rem consectetur.
</p>
Open overlay
</div>
<div class="overlay">
Close overlay
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur, itaque nihil. Tenetur assumenda exercitationem quibusdam suscipit adipisci eveniet? Placeat nemo laudantium aperiam possimus officia neque iste voluptate atque rem consectetur.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur, itaque nihil. Tenetur assumenda exercitationem quibusdam suscipit adipisci eveniet? Placeat nemo laudantium aperiam possimus officia neque iste voluptate atque rem consectetur.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur, itaque nihil. Tenetur assumenda exercitationem quibusdam suscipit adipisci eveniet? Placeat nemo laudantium aperiam possimus officia neque iste voluptate atque rem consectetur.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur, itaque nihil. Tenetur assumenda exercitationem quibusdam suscipit adipisci eveniet? Placeat nemo laudantium aperiam possimus officia neque iste voluptate atque rem consectetur.
</p>
</div>
</div>
</div>
<div class="service">
<div class="service-contentContainer">
<div class="service-content">
<button class="open-overlay">Open overlay</button>
</div>
<div class="overlay">
Close overlay
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur, itaque nihil. Tenetur assumenda exercitationem quibusdam suscipit adipisci eveniet? Placeat nemo laudantium aperiam possimus officia neque iste voluptate atque rem consectetur.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur, itaque nihil. Tenetur assumenda exercitationem quibusdam suscipit adipisci eveniet? Placeat nemo laudantium aperiam possimus officia neque iste voluptate atque rem consectetur.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur, itaque nihil. Tenetur assumenda exercitationem quibusdam suscipit adipisci eveniet? Placeat nemo laudantium aperiam possimus officia neque iste voluptate atque rem consectetur.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur, itaque nihil. Tenetur assumenda exercitationem quibusdam suscipit adipisci eveniet? Placeat nemo laudantium aperiam possimus officia neque iste voluptate atque rem consectetur.
</p>
</div>
</div>
</div>
<div class="service">
<div class="service-contentContainer">
<div class="service-content">
<button class="open-overlay">Open overlay</button>
</div>
<div class="overlay">
Close overlay
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur, itaque nihil. Tenetur assumenda exercitationem quibusdam suscipit adipisci eveniet? Placeat nemo laudantium aperiam possimus officia neque iste voluptate atque rem consectetur.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur, itaque nihil. Tenetur assumenda exercitationem quibusdam suscipit adipisci eveniet? Placeat nemo laudantium aperiam possimus officia neque iste voluptate atque rem consectetur.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur, itaque nihil. Tenetur assumenda exercitationem quibusdam suscipit adipisci eveniet? Placeat nemo laudantium aperiam possimus officia neque iste voluptate atque rem consectetur.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur, itaque nihil. Tenetur assumenda exercitationem quibusdam suscipit adipisci eveniet? Placeat nemo laudantium aperiam possimus officia neque iste voluptate atque rem consectetur.
</p>
</div>
</div>
</div>
Can anybody point me in the right direction to contain this function to the individual service content that the overlay has been activated, and maybe how to remove it once closed?
Cheers

Buttons width to fill up window width

The App will start with 2 buttons in the footer initially.
Depending on user interaction with the app, a third button may need to be inserted/shown. And later it may need to be hidden/removed depending on some user selections form other parts of the app.
Button text is to be centred horizontally inside each button and the footer will need to be fully covered by the buttons except the tiny vertical division for spacing.
The footer in my code has an undesired blank space on the right.
What is the best way to solve this?, hopefully with as much css as possible and the rest with javaScript "I a guessing". Thanks
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
header > button {
height: 1.5em;
width: 1.5em;
font-size: 1.5em;
top: 0;
}
label.pageTitle {
display: inline-block;
width: calc(100% - 5em);
text-align: center;
color: turquoise;
}
header {
border-bottom: 1px solid black;
width: 100%;
position: fixed;
top: 0;
}
section {
margin-top: 40px;
}
footer {
position: fixed;
bottom: 0;
width: 100%;
}
footer > button {
font-size: 1em;
padding: 0.5em 1em;
}
header, footer {
background-color: white;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="index.css">
<meta name="viewport" content="width=device-width" />
</head>
<body >
<header>
<button class="menuLeft" type="button" >☰</button>
<label class="pageTitle">Title of Page</label>
<button class="menuRight" type="button">⋮</button>
</header>
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus adipisci, aliquid, aspernatur culpa dicta dignissimos dolore error expedita ipsa maiores neque non, officia omnis provident quae quidem recusandae rem vero?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut autem facere laborum magnam maxime numquam reprehenderit soluta vitae voluptas. Consequuntur ea exercitationem ipsa officiis, placeat provident quibusdam sequi velit voluptate!lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam architecto corporis doloribus laboriosam necessitatibus non quae, saepe temporibus! Accusamus ducimus eligendi eos fugit ipsam itaque numquam officiis praesentium repellat saepe?lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab consequuntur eum facilis incidunt laudantium nisi non quis sapiente, vero voluptates. Animi deleniti et, fugit laborum molestiae nisi non possimus qui.lorem</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus adipisci, aliquid, aspernatur culpa dicta dignissimos dolore error expedita ipsa maiores neque non, officia omnis provident quae quidem recusandae rem vero?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut autem facere laborum magnam maxime numquam reprehenderit soluta vitae voluptas. Consequuntur ea exercitationem ipsa officiis, placeat provident quibusdam sequi velit voluptate!lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam architecto corporis doloribus laboriosam necessitatibus non quae, saepe temporibus! Accusamus ducimus eligendi eos fugit ipsam itaque numquam officiis praesentium repellat saepe?lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab consequuntur eum facilis incidunt laudantium nisi non quis sapiente, vero voluptates. Animi deleniti et, fugit laborum molestiae nisi non possimus qui.lorem</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus adipisci, aliquid, aspernatur culpa dicta dignissimos dolore error expedita ipsa maiores neque non, officia omnis provident quae quidem recusandae rem vero?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut autem facere laborum magnam maxime numquam reprehenderit soluta vitae voluptas. Consequuntur ea exercitationem ipsa officiis, placeat provident quibusdam sequi velit voluptate!lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam architecto corporis doloribus laboriosam necessitatibus non quae, saepe temporibus! Accusamus ducimus eligendi eos fugit ipsam itaque numquam officiis praesentium repellat saepe?lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab consequuntur eum facilis incidunt laudantium nisi non quis sapiente, vero voluptates. Animi deleniti et, fugit laborum molestiae nisi non possimus qui.lorem</p>
</section>
<footer>
<button class="menuLeft" type="button" >NO</button>
<button class="menuLeft" type="button" >EXTRA</button>
<button class="menuRight" type="button">YES</button>
</footer>
</body>
</html>
Is this what your looking for?
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
header > button {
height: 1.5em;
width: 1.5em;
font-size: 1.5em;
top: 0;
}
label.pageTitle {
display: inline-block;
width: calc(100% - 5em);
text-align: center;
color: turquoise;
}
header {
border-bottom: 1px solid black;
width: 100%;
position: fixed;
top: 0;
}
section {
margin-top: 40px;
}
footer {
position: fixed;
bottom: 0;
width: 100%;
text-align: center;
}
footer > button {
display: inline-block;
font-size: 1em;
padding: 0.5em 1em;
}
header, footer {
background-color: white;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="index.css">
<meta name="viewport" content="width=device-width" />
</head>
<body >
<header>
<button class="menuLeft" type="button" >☰</button>
<label class="pageTitle">Title of Page</label>
<button class="menuRight" type="button">⋮</button>
</header>
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus adipisci, aliquid, aspernatur culpa dicta dignissimos dolore error expedita ipsa maiores neque non, officia omnis provident quae quidem recusandae rem vero?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut autem facere laborum magnam maxime numquam reprehenderit soluta vitae voluptas. Consequuntur ea exercitationem ipsa officiis, placeat provident quibusdam sequi velit voluptate!lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam architecto corporis doloribus laboriosam necessitatibus non quae, saepe temporibus! Accusamus ducimus eligendi eos fugit ipsam itaque numquam officiis praesentium repellat saepe?lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab consequuntur eum facilis incidunt laudantium nisi non quis sapiente, vero voluptates. Animi deleniti et, fugit laborum molestiae nisi non possimus qui.lorem</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus adipisci, aliquid, aspernatur culpa dicta dignissimos dolore error expedita ipsa maiores neque non, officia omnis provident quae quidem recusandae rem vero?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut autem facere laborum magnam maxime numquam reprehenderit soluta vitae voluptas. Consequuntur ea exercitationem ipsa officiis, placeat provident quibusdam sequi velit voluptate!lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam architecto corporis doloribus laboriosam necessitatibus non quae, saepe temporibus! Accusamus ducimus eligendi eos fugit ipsam itaque numquam officiis praesentium repellat saepe?lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab consequuntur eum facilis incidunt laudantium nisi non quis sapiente, vero voluptates. Animi deleniti et, fugit laborum molestiae nisi non possimus qui.lorem</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus adipisci, aliquid, aspernatur culpa dicta dignissimos dolore error expedita ipsa maiores neque non, officia omnis provident quae quidem recusandae rem vero?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut autem facere laborum magnam maxime numquam reprehenderit soluta vitae voluptas. Consequuntur ea exercitationem ipsa officiis, placeat provident quibusdam sequi velit voluptate!lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam architecto corporis doloribus laboriosam necessitatibus non quae, saepe temporibus! Accusamus ducimus eligendi eos fugit ipsam itaque numquam officiis praesentium repellat saepe?lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab consequuntur eum facilis incidunt laudantium nisi non quis sapiente, vero voluptates. Animi deleniti et, fugit laborum molestiae nisi non possimus qui.lorem</p>
</section>
<footer>
<button class="menuLeft" type="button" >NO</button>
<button class="menuLeft" type="button" >EXTRA</button>
<button class="menuRight" type="button">YES</button>
</footer>
</body>
</html>
If you mean that you want all three buttons to take up the same space then this will work for you:
footer > button {
padding: 0.5em 1em;
width: 31.33%;
margin: 0 1%;
float: left;
box-sizing: border-box;
}

Categories

Resources