HTML/CSS/JS: Max-Height being misrecognized and not applied on transitions - javascript

So let's say I have a blue square and a compressed red-box:
So I want that, when I click on the square, the red-box readapts it's size to it's current content:
And when I click again on the square, I want the red box to return to it's original state:
And I want both movements to happen slowly, with the transition property.
So I have two problems: First, the transition is not working at any of the steps. Second, once I bring the box once to it's original state, I can't make it enlarge anymore.
Here's the code:
HTML:
<div id="red_box">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam commodo, ipsum non ultrices pulvinar, turpis nulla sollicitudin leo, vitae convallis orci velit sed ante. In sodales sed lorem in blandit. Proin ornare cursus tortor, at tincidunt libero. Nulla in ex in augue iaculis congue ut egestas odio. Morbi tristique varius lorem, id dictum magna convallis eget. Nulla sit amet massa eu tortor facilisis dapibus. Phasellus nec porttitor enim. Donec vitae pharetra nibh. Nam convallis arcu et rutrum fringilla.
Curabitur at mauris pharetra, ultrices tortor quis, congue tortor. In nec ornare eros. Morbi imperdiet luctus sem sit amet pellentesque. Maecenas ac accumsan sapien. Vivamus eu dui tristique, pharetra ex id, tincidunt est. Nulla viverra eu mi fringilla blandit. Ut sagittis quam nisl. In eu rutrum ex. Ut ac ante id nibh aliquam ultrices quis vel arcu. Donec molestie ipsum sapien, sed pellentesque lectus ornare sit amet. Maecenas vitae turpis arcu. Praesent ac faucibus sapien. Quisque ornare venenatis pulvinar. In felis metus, posuere non convallis id, commodo sed lorem.
Maecenas porta risus sed ipsum luctus mattis. Integer faucibus placerat justo, sed lobortis est gravida tincidunt. Aliquam ut aliquet sem, et sodales enim. Vivamus rhoncus sodales felis a fermentum. Phasellus pellentesque fringilla lorem ut lobortis. Maecenas erat urna, viverra et egestas consectetur, eleifend vel sem. Praesent fermentum vehicula porttitor. Duis faucibus gravida nulla non volutpat. Nam tincidunt ligula in nisi efficitur, a ultricies magna aliquam. Morbi commodo posuere egestas. Maecenas quis orci interdum velit elementum lacinia nec ac dolor. Nullam sodales magna at dui pharetra efficitur.
Nulla ultricies eros et ex tempus, eu faucibus orci dapibus. In ac sapien ornare, malesuada velit id, congue augue. Cras metus lectus, molestie id leo maximus, accumsan fermentum elit. Aliquam congue malesuada iaculis. Donec tempus enim quis tortor tristique finibus. Curabitur sed sapien quis felis venenatis porttitor quis sed dui. Phasellus in commodo orci. Vestibulum tempor purus vitae ultrices condimentum. Mauris mattis erat sed nunc suscipit tincidunt.
Quisque porttitor dolor vel faucibus molestie. Quisque sollicitudin accumsan ipsum, a ultrices lectus dignissim interdum. Integer vestibulum mauris vitae purus suscipit, ut rutrum ante vehicula. Sed sollicitudin lectus eu justo commodo aliquet. Etiam rhoncus tellus sed diam aliquam consequat. Aenean tristique, dolor et dignissim rhoncus, turpis urna euismod elit, ac commodo nulla purus id tellus. Aliquam suscipit consequat vestibulum.
Phasellus massa ex, pharetra nec augue eu, blandit volutpat ligula. Duis finibus nulla nunc, vitae ultrices nibh sollicitudin ac. Donec consectetur quam eu turpis dapibus, ut egestas arcu condimentum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque posuere tincidunt sem, at fermentum leo efficitur vitae. Maecenas mattis erat quis urna accumsan, vel elementum felis pellentesque. Etiam id pretium ex. Suspendisse arcu turpis, blandit rutrum mi eu, volutpat tincidunt nunc. Duis pretium, augue in faucibus convallis, turpis nulla tempus metus, at ornare dolor turpis ac elit. Ut dapibus diam vel sem aliquet aliquet id nec sapien. Sed dictum eu ligula quis dictum. Curabitur blandit neque eu nibh vestibulum, eget tincidunt nibh aliquam.
Nulla molestie ultricies sem, nec pharetra mi pharetra ac. Mauris aliquam vestibulum augue et convallis. Nunc rutrum quis felis at fermentum. Integer non mauris a augue finibus laoreet. Etiam dignissim tincidunt porttitor. Phasellus dignissim turpis eget accumsan hendrerit. Praesent nisl urna, semper nec luctus non, dignissim quis enim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus elit lacus, rutrum et volutpat ac, hendrerit eu ante. Phasellus vitae erat ante. Aenean pulvinar libero eu magna auctor aliquet. Morbi facilisis, erat eu bibendum aliquet, dui augue mattis nisl, non bibendum lorem lorem sit amet odio. Vestibulum elit orci, posuere nec iaculis at, maximus quis libero.
</div>
<div id="square"></div>
CSS:
#red_box{
width:40%;
max-height:0px;
overflow:hidden;
background-color:white;
color:black;
border:5px double red;
position:relative;
left:55%;
transition:max-height 1s, overflow 1s;
display:inline-block;
}
#square{
float:left;
width:200px;
height:150px;
background-color:blue;
}
Javascript:
document.querySelector("#square").onclick = set_red_box;
function set_red_box(){
if(document.querySelector("#red_box").style.maxHeight == 0){
grow_red_box();
}
else{
diminish_red_box();
}
}
function grow_red_box(){
document.querySelector("#red_box").style.maxHeight = "5000000px";
document.querySelector("#red_box").style.overflow = "auto";
}
function diminish_red_box(){
document.querySelector("#red_box").style.maxHeight = "0";
document.querySelector("#red_box").style.overflow = "hidden";
}
And the JFiddle:
https://jsfiddle.net/rerr6ra8/2/

You can not use transitions this way because the height depends on the content in the box (auto). This is not supported by CSS transitions. However the max-height property is perfectly able to use with animations.
What you can do, is calculate the height with JavaScript and use that in with your code:
var redbox = document.getElementById('red_box');
var height = redbox.clientHeight;
redbox.style.maxHeight = "0px";
https://jsfiddle.net/rerr6ra8/7/

You can't animate an unknown height using transition, which means that height: auto doesn't work, you need to set height explicitly.
However, as you are using JS to change height, you can set the height to be equal to the scrollHeight, which is (mdn):
The Element.scrollHeight read-only attribute is a measurement of the
height of an element's content, including content not visible on the
screen due to overflow.
Fiddle
document.querySelector("#square").onclick = set_red_box;
var redBox = document.querySelector("#red_box");
var open = false; // redBox state used for toggle
function set_red_box() {
if (open) {
redBox.style.height = '0';
} else {
redBox.style.height = redBox.scrollHeight + 'px'; // scrollHeight is the full content height
}
open = !open;
}
CSS:
#red_box {
width:40%;
height: 0;
overflow:hidden;
background-color:white;
color:black;
border:5px double red;
position:relative;
left:55%;
transition: height 1s; /** change transition to height **//
display:inline-block;
}

Related

How to make a scrollbar be transparent and on top of the div

I currently have a div with a list of text and a button that adds more lines of text. Once the lines of text reach the bottom of the screen the scrollbar appears. I would like the scrollbar the appear transparent and on top of the div rather than fully opaque and next to the div how it is currently. Is there any way to do this?
I used overflow:overlay; to display scrollbar over content and background-color on the thumb and track to make them 25% opaque. Please see snippet below :
div{
height:100px;
background-color:lightblue;
overflow:overlay;
}
/* ===== Scrollbar CSS ===== */
/* Firefox */
* {
scrollbar-width: auto;
scrollbar-color: #00000025 #ffffff25;
}
/* Chrome, Edge, and Safari */
*::-webkit-scrollbar {
width: 16px;
}
*::-webkit-scrollbar-track {
background: #ffffff25;
}
*::-webkit-scrollbar-thumb {
background-color: #00000025;
border-radius: 10px;
border: 3px none #00000025;
}
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum luctus scelerisque facilisis. Etiam vestibulum neque at ornare lacinia. Phasellus malesuada massa vel dapibus volutpat. Donec elit metus, mollis id egestas vel, mattis et felis. Duis rutrum diam eu lacus molestie mollis. Phasellus interdum imperdiet vehicula. Morbi eget ex massa.
Curabitur interdum semper mauris non efficitur. Ut eros ipsum, blandit sit amet hendrerit sed, tincidunt nec est. Duis finibus posuere orci sit amet semper. Ut quis ligula nec purus elementum accumsan quis id felis. Sed eget imperdiet dui. Suspendisse faucibus porttitor massa. Proin auctor, libero ut pharetra ullamcorper, arcu enim lobortis tellus, in mollis mi turpis vitae nibh. Pellentesque eget neque pharetra, ornare diam quis, vehicula risus. Phasellus pellentesque facilisis enim, vitae elementum augue. Phasellus ac vulputate nunc. Morbi non ante gravida, mattis nisi eu, ullamcorper sem. Nullam egestas ligula ut lectus dapibus vehicula. In in erat viverra, sagittis odio a, venenatis erat. Nunc ut nunc scelerisque, egestas sapien sed, venenatis lorem. Vivamus fringilla nunc leo, in dictum tortor vehicula vitae.
Donec eleifend est in felis molestie convallis. Etiam dolor ligula, lobortis eu molestie feugiat, aliquam eget ligula. Quisque tempor ornare enim, sed varius mi vestibulum sit amet. In at vestibulum ligula. Vivamus pretium non purus vel scelerisque. Pellentesque a mauris sit amet orci lobortis pellentesque. In purus nulla, maximus non sapien vitae, rhoncus tristique arcu. In placerat dui vel iaculis commodo. Nullam malesuada suscipit nulla, at scelerisque tortor vulputate at. In a diam at libero cursus bibendum in vitae libero. In tortor magna, ornare nec massa vitae, sagittis tincidunt turpis.
Proin malesuada in lectus vitae suscipit. Sed nibh risus, accumsan vel enim vel, mattis porta augue. Aliquam et lacinia neque. Etiam pellentesque tempor augue eget ullamcorper. Aenean dictum efficitur dolor sed ultrices. Donec vitae euismod odio. Nam quis posuere ante. Fusce quis sagittis nulla, sit amet gravida urna. Nulla facilisi. Vivamus id auctor mi. Curabitur pellentesque risus et tortor viverra, vitae pretium ex fringilla. Mauris efficitur maximus lorem vitae hendrerit. Cras efficitur sollicitudin sapien sed dignissim. Duis fermentum imperdiet tincidunt. Praesent augue justo, elementum eu pharetra in, iaculis quis ipsum. Donec sit amet varius arcu, in dictum risus.
Ut ex urna, scelerisque quis augue a, viverra bibendum ligula. Aliquam iaculis dolor quis dolor finibus consectetur. Integer vehicula, turpis sed sollicitudin cursus, est justo posuere elit, non facilisis massa nulla id ligula. Duis tempus, sem vel congue scelerisque, augue mauris efficitur tortor, nec commodo magna sapien et eros. Donec ultrices dui mi, ut malesuada odio ornare a. Duis auctor, ex eu ultricies semper, leo diam consequat turpis, eu ornare felis velit rhoncus quam. Vestibulum lacinia ipsum nec ipsum laoreet faucibus. Mauris sed eros sem. Morbi a tellus quam. Nulla porttitor scelerisque massa eu efficitur. In metus libero, viverra fermentum accumsan et, tristique a ipsum. Proin lacinia tortor leo, facilisis volutpat ante elementum vel. Pellentesque sed ipsum ut sem lobortis mollis sed sit amet dolor. Pellentesque vulputate, justo id eleifend congue, felis enim consectetur nibh, id malesuada ipsum enim nec lectus.
</div>

How to get the height of an element without its CSS?

My element has a CSS class that defines what the height of it should be.
.very-long-container {
height: 50px;
}
<div class="very-long-container">...</div>
I want to know the original height of that element, so not what is defined with CSS.
Well, my way of getting the height is to reset the CSS first, get the original height and then set the height with CSS again. Like this:
document.querySelector('.very-long-container').style.height = 'inherit';
console.log(document.querySelector('.very-long-container').offsetHeight);
document.querySelector('.very-long-container').style.height = '50px';
Since this is not the best practice, I am sure that there are better answers.
The container is 50px and will always be that if you tell it. When you remove the 50px from the CSS it will take the height of the children inside of it.
So one way of know what the actual height would be whenever there is no fixed height set is to either have another container inside of the container or to sum the height of all children inside of the container.
The former is the easiest to work out. If a child container does not have a fixed height, it will automatically take the height of the children inside of it, despite the outer container having a fixed height.
The example below uses the aforementioned technique. Reading the offsetHeight of the inner container. As a bonus it uses a ResizeObserver to update the height whenever the size of the inner container changes.
const innerContainer = document.querySelector('.inner-container');
let height = innerContainer.offsetHeight;
const resizeObserver = new ResizeObserver(entries => {
for (const { target } of entries) {
height = target.offsetHeight;
console.log(height);
}
});
resizeObserver.observe(innerContainer);
.very-long-container {
height: 50px;
overflow: hidden;
}
<div class="very-long-container">
<div class="inner-container">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam congue efficitur purus vel posuere. Nam eget tincidunt dolor, eu tempor neque. Aliquam ac ex urna. Ut scelerisque urna purus, tincidunt bibendum massa accumsan id. Mauris vitae cursus mi.
Phasellus imperdiet vel metus et ornare. Donec nulla justo, convallis sed lacus at, dapibus rhoncus neque. Cras velit erat, lacinia eu lectus lobortis, rhoncus congue ex. Curabitur lacus diam, dignissim at tortor ac, suscipit venenatis tortor. Fusce
tempus consectetur dui, vel placerat purus luctus nec. Morbi elementum, mi lacinia rhoncus vehicula, dolor dolor iaculis augue, id feugiat arcu tortor sed lectus. Quisque lacus justo, luctus sit amet finibus quis, pretium sed ex.
</p>
<p>
Morbi luctus neque non nunc placerat varius. Sed cursus scelerisque mi id interdum. Sed sodales orci ut laoreet imperdiet. Duis pretium erat ut libero consectetur ultrices. Aenean suscipit ultricies diam at pretium. Fusce pharetra lectus at lectus ornare,
sit amet lobortis libero lacinia. Quisque odio orci, ornare sed molestie non, fermentum at enim. Nam ut tortor enim. Nulla facilisi. Maecenas vehicula vitae felis ut mollis. Nam varius elementum felis, condimentum hendrerit velit elementum eu. Praesent
laoreet, turpis vel condimentum auctor, nisi erat viverra purus, sed gravida odio nulla nec urna.
</p>
<p>
Morbi sed enim ligula. Fusce vitae feugiat nunc. Sed vel velit orci. Nunc ut euismod ipsum. Cras sed velit nec lectus scelerisque sagittis. Fusce non nunc leo. Donec viverra eu felis sed molestie. Proin ut molestie libero, ut ultricies purus. Nullam dapibus
felis non vestibulum aliquam. Mauris quam mi, dictum eu nisi vitae, malesuada ultricies turpis. Donec vitae dolor leo. Nulla at dui eget eros molestie congue. Etiam imperdiet lobortis feugiat.
</p>
<p>
Maecenas enim magna, convallis vitae scelerisque at, lobortis vitae elit. Cras interdum ipsum non purus feugiat rhoncus. Fusce eu elit porttitor, aliquet libero at, dapibus massa. Suspendisse dignissim varius mauris, sed ullamcorper mauris interdum quis.
Proin viverra purus massa, in finibus magna faucibus ut. Nulla malesuada ipsum vel maximus vestibulum. Vestibulum molestie in dui fringilla interdum. Donec dignissim sapien nisl. Suspendisse aliquam elit turpis, at euismod mauris consectetur vel.
</p>
<p>
Suspendisse fermentum urna a arcu dignissim tincidunt. Nulla pellentesque orci vitae vulputate rutrum. Vestibulum interdum faucibus lectus vel vehicula. Suspendisse egestas dolor sit amet justo vehicula sodales. Integer fringilla eget erat id rhoncus.
Aenean luctus purus ut libero volutpat, viverra lobortis dui maximus. Integer sit amet aliquet nulla. In suscipit id orci sed tincidunt. Suspendisse pharetra suscipit tempus. Cras mattis a nibh eu porttitor. Donec nec iaculis metus. Pellentesque
molestie diam eu eleifend cursus. Suspendisse tincidunt, lorem quis pulvinar viverra, metus felis imperdiet nisi, ut dignissim velit urna nec odio. Quisque pulvinar turpis non ipsum mattis, a iaculis ipsum pellentesque. Vestibulum finibus sed sapien
quis faucibus. Vivamus tristique, neque id finibus ultrices, sapien elit consequat odio, placerat commodo magna odio id velit.
</p>
</div>
</div>

scroll event listener + position: sticky element that changes height causes jittery infinite scroll

I have an element at the top of the screen with position:sticky; and a JS scroll eventlistener to add a stuck class when the element is stuck (scroll Y is bigger than 0).
This stuck makes an element (that has CSS transition) inside the sticky element to reduce in height.
When you scroll very slowly, this change in height makes the scrollY jump back to zero and removes the stuck class, and this creates a jolty scrolling loop which is infinite until you scroll faster and outscroll the issue.
How can I make this smooth when using position: sticky, you can see it live here:
https://jsfiddle.net/27rzba5v/
This is happening because you're changing the element's height, which is affecting the box model and thus the dimensions of your document. A simple fix would be to instead use a transform on .wrap instead of transitioning its height. It's better to animate transforms and opacity as it can be handled by the GPU rather than by making the browser repaint.
var lastScrollY = 0;
var ticking = false;
window.addEventListener('scroll', function(e) {
lastScrollY = window.scrollY;
if ( ! ticking ) {
window.requestAnimationFrame(function() {
console.log( lastScrollY );
if ( lastScrollY > 0 ) {
document.body.classList.add('stuck');
} else {
document.body.classList.remove('stuck');
}
ticking = false;
});
ticking = true;
}
} );
body {
margin: 0;
}
.wrap {
background: #666;
text-align: center;
position: sticky;
top: 0;
transition: 0.5s; /* Move transition here */
transform-origin: top left; /* Make sure transition happens from the top left */
}
.block {
width: 80px;
height: 80px;
background: red;
display: block;
}
.stuck .wrap { /* Transform wrap instead of block */
transform: scaleY(.5); /* Change scale instead of height */
}
<div class="wrap">
<span class="block"></span>
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ac lorem a metus tincidunt eleifend id in odio. Nam malesuada hendrerit tristique. Pellentesque id ornare elit, ac lobortis metus. Sed iaculis et nisi et consectetur. Proin pellentesque metus mi, quis fringilla mauris pulvinar et. Vivamus pharetra elit ligula, eu consectetur magna consequat nec. Donec sed enim sit amet augue malesuada varius id a libero. Nullam nec ante id justo elementum congue quis in purus. Integer finibus cursus volutpat. Donec non laoreet ipsum.
Maecenas id venenatis velit, eu feugiat dolor. Vestibulum malesuada erat ut turpis mattis vehicula. Vestibulum sem leo, cursus quis lacinia eu, tincidunt eu velit. Nulla odio elit, tristique vel bibendum vitae, placerat nec eros. Proin auctor id leo sed rutrum. Proin convallis erat sit amet neque aliquam vestibulum. Ut sodales vel nisl eu imperdiet.
Donec a porttitor dui, vitae ullamcorper nibh. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam non elit eu elit blandit hendrerit id ut eros. Duis sagittis elementum ligula eu venenatis. Aenean nunc mauris, dignissim ut venenatis ac, pharetra eget magna. Curabitur elementum enim sed pharetra rhoncus. Praesent sodales at ex at consectetur. Curabitur sed dictum mi, ut eleifend arcu. Nam feugiat risus quis congue porttitor. Maecenas vehicula lorem ultrices ante sollicitudin, placerat sollicitudin dolor fermentum. Aliquam arcu turpis, faucibus vel placerat a, molestie vel lectus. Sed condimentum euismod tincidunt. Mauris odio tortor, luctus id eleifend vitae, aliquet ut libero. Vestibulum vitae placerat turpis. Duis nec facilisis eros. Morbi ipsum arcu, tempus ac massa nec, mollis aliquet lacus.
Phasellus maximus eros quis massa maximus, et mattis tellus cursus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id lacus interdum, cursus diam ut, posuere purus. Duis non vestibulum nulla, vitae egestas elit. Phasellus venenatis libero in nunc lobortis tempor in vel orci. Praesent varius lacus eleifend, pretium lectus ut, pulvinar arcu. Nunc ornare dolor velit, id pulvinar urna semper eget. Aenean finibus dui vitae dolor ullamcorper finibus. Cras consequat viverra tellus, a accumsan sem viverra sed. Nulla felis tortor, laoreet non tincidunt elementum, tempus ac risus. Sed nibh nisl, ultrices vel iaculis in, fringilla at ipsum. Curabitur metus ligula, tincidunt non arcu eget, ultricies pellentesque ligula. Duis id est posuere, molestie urna non, gravida tortor. Praesent lacinia erat ac diam sagittis, quis faucibus nunc blandit.
Fusce aliquet tincidunt turpis, ut consequat metus consectetur at. Nunc volutpat semper enim, ut finibus orci luctus in. Mauris pharetra consectetur arcu sed pulvinar. Sed cursus fermentum velit, mattis varius ante commodo ac. Fusce erat mauris, sagittis quis eros vitae, consectetur venenatis nibh. Fusce porttitor tortor lectus, at efficitur diam dictum et. Quisque et suscipit sem. Mauris vulputate orci tellus, non efficitur eros blandit ut. Donec eget hendrerit elit.
If you must transition the element's height then you could offset the effects of the dimensions changing by using a container as a buffer.
var lastScrollY = 0;
var ticking = false;
window.addEventListener('scroll', function(e) {
lastScrollY = window.scrollY;
if ( ! ticking ) {
window.requestAnimationFrame(function() {
console.log( lastScrollY );
if ( lastScrollY > 0 ) {
document.body.classList.add('stuck');
} else {
document.body.classList.remove('stuck');
}
ticking = false;
});
ticking = true;
}
} );
body {
margin: 0;
}
.wrapoffset { /* Make this element sticky instead */
height: 80px;
position: sticky;
top: 0;
width: 100%;
}
.wrap {
background: #666;
text-align: center;
width: 100%;
}
.block {
height: 80px;
width: 80px;
background: red;
display: block;
transition: 0.5s;
}
.stuck .block {
height: 40px;
}
<div class="wrapoffset"> <!-- new element -->
<div class="wrap">
<span class="block"></span>
</div>
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ac lorem a metus tincidunt eleifend id in odio. Nam malesuada hendrerit tristique. Pellentesque id ornare elit, ac lobortis metus. Sed iaculis et nisi et consectetur. Proin pellentesque metus mi, quis fringilla mauris pulvinar et. Vivamus pharetra elit ligula, eu consectetur magna consequat nec. Donec sed enim sit amet augue malesuada varius id a libero. Nullam nec ante id justo elementum congue quis in purus. Integer finibus cursus volutpat. Donec non laoreet ipsum.
Maecenas id venenatis velit, eu feugiat dolor. Vestibulum malesuada erat ut turpis mattis vehicula. Vestibulum sem leo, cursus quis lacinia eu, tincidunt eu velit. Nulla odio elit, tristique vel bibendum vitae, placerat nec eros. Proin auctor id leo sed rutrum. Proin convallis erat sit amet neque aliquam vestibulum. Ut sodales vel nisl eu imperdiet.
Donec a porttitor dui, vitae ullamcorper nibh. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam non elit eu elit blandit hendrerit id ut eros. Duis sagittis elementum ligula eu venenatis. Aenean nunc mauris, dignissim ut venenatis ac, pharetra eget magna. Curabitur elementum enim sed pharetra rhoncus. Praesent sodales at ex at consectetur. Curabitur sed dictum mi, ut eleifend arcu. Nam feugiat risus quis congue porttitor. Maecenas vehicula lorem ultrices ante sollicitudin, placerat sollicitudin dolor fermentum. Aliquam arcu turpis, faucibus vel placerat a, molestie vel lectus. Sed condimentum euismod tincidunt. Mauris odio tortor, luctus id eleifend vitae, aliquet ut libero. Vestibulum vitae placerat turpis. Duis nec facilisis eros. Morbi ipsum arcu, tempus ac massa nec, mollis aliquet lacus.
Phasellus maximus eros quis massa maximus, et mattis tellus cursus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id lacus interdum, cursus diam ut, posuere purus. Duis non vestibulum nulla, vitae egestas elit. Phasellus venenatis libero in nunc lobortis tempor in vel orci. Praesent varius lacus eleifend, pretium lectus ut, pulvinar arcu. Nunc ornare dolor velit, id pulvinar urna semper eget. Aenean finibus dui vitae dolor ullamcorper finibus. Cras consequat viverra tellus, a accumsan sem viverra sed. Nulla felis tortor, laoreet non tincidunt elementum, tempus ac risus. Sed nibh nisl, ultrices vel iaculis in, fringilla at ipsum. Curabitur metus ligula, tincidunt non arcu eget, ultricies pellentesque ligula. Duis id est posuere, molestie urna non, gravida tortor. Praesent lacinia erat ac diam sagittis, quis faucibus nunc blandit.
Fusce aliquet tincidunt turpis, ut consequat metus consectetur at. Nunc volutpat semper enim, ut finibus orci luctus in. Mauris pharetra consectetur arcu sed pulvinar. Sed cursus fermentum velit, mattis varius ante commodo ac. Fusce erat mauris, sagittis quis eros vitae, consectetur venenatis nibh. Fusce porttitor tortor lectus, at efficitur diam dictum et. Quisque et suscipit sem. Mauris vulputate orci tellus, non efficitur eros blandit ut. Donec eget hendrerit elit.
If you want to optimize the performance even more you can look into using IntersectionObserver with a polyfill instead of listening for events on scroll.

Gradient / Opacity workaround

I have this situation now: JSFIDDLE
I want to achieve this effect but I want the text to be selectable behind the gradient and the text to be scrollable even if I place the mouse over it.
Is there any workaround maybe playing with a javascript that chenges the opacity of the text on scrolling?
.gradient {
background: -moz-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
background: -webkit-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%);
background: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#00000000',GradientType=0 );
...
}
Simply set the pointer-events property of your .gradient element to none, like so:
*{box-sizing:border-box;color:#fff;font-family:sans-serif;font-size:16px;margin:0;padding:0;}
#main{
background:#000;
bottom:0;
left:0;
overflow:auto;
position:fixed;
right:0;
top:0;
}
.text {
line-height:1.25em;
padding:50vh 20px 0;
}
.gradient {
background:linear-gradient(180deg,rgba(0,0,0,1),rgba(0,0,0,0));
bottom:50vh;
left:0;
pointer-events:none;
position:fixed;
right:0;
top:0;
}
.text>p{margin:0 0 20px;}
<div id=main>
<div class=gradient></div>
<div class=text><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla quis bibendum lorem, vel pellentesque nibh. Fusce sollicitudin est nec pharetra lacinia. Fusce ultrices lectus ex, nec pharetra dolor malesuada at. Aenean sagittis, enim non sagittis accumsan, libero nulla ullamcorper nunc, sit amet dapibus orci ligula gravida leo. Suspendisse molestie eros diam, volutpat tincidunt libero faucibus at. Sed condimentum tortor tincidunt tortor accumsan pulvinar. Sed at bibendum lorem, euismod tempor urna. Vivamus quis erat dolor. Maecenas sed nisl luctus, tempor mauris suscipit, porta nisl. Nam ac nulla condimentum, posuere nisl sit amet, tincidunt ante. Sed vestibulum, orci in imperdiet malesuada, ex dolor accumsan tellus, at auctor purus sapien at lacus. Nullam ullamcorper justo ac malesuada blandit. Fusce pretium et massa id eleifend. Cras quis dapibus tellus.</p><p>Curabitur et eros id risus sodales fringilla. Cras iaculis efficitur mi non accumsan. Sed congue ligula ut ligula semper egestas. Duis varius dolor ex, eu tempor nunc auctor ut. In ultricies malesuada eros, sed dictum justo auctor nec. Nunc blandit finibus ligula vel hendrerit. Fusce id blandit ante, sed euismod turpis. Phasellus elit lorem, eleifend ut facilisis non, tincidunt varius arcu. Duis gravida varius quam, vestibulum eleifend nisi volutpat a. In tempus velit justo, a auctor felis congue ac. Praesent dapibus vestibulum ex, a tincidunt justo interdum vel. Integer neque tortor, aliquam vitae quam at, hendrerit ullamcorper tellus. Suspendisse pharetra rutrum nunc vitae tristique. Aenean id ipsum purus. Nunc interdum id odio vel consectetur. Praesent convallis iaculis dolor eu pretium.</p><p>Aenean tincidunt urna vitae euismod vulputate. Integer tincidunt dolor sit amet ligula vehicula aliquet. Aliquam erat volutpat. Vivamus id lorem leo. Fusce faucibus, nisl non malesuada mollis, felis elit aliquam lacus, et ullamcorper lectus felis a eros. Quisque a nulla justo. Phasellus vitae purus viverra, mattis odio vitae, vehicula tellus. Nam eget vehicula velit, sed fermentum arcu. Proin laoreet molestie purus non laoreet. Nunc quis luctus lorem. Sed sit amet sapien quis eros pellentesque vestibulum. Pellentesque semper libero turpis, ac mattis orci tempus quis. Cras nunc nisi, accumsan sed dictum in, condimentum et tortor. Etiam tincidunt eget ex id ultrices. Ut lobortis faucibus porttitor. Mauris nisi est, tincidunt in sagittis eu, fermentum ac purus.</p><p>Phasellus fringilla sodales vehicula. Nam id diam convallis, interdum nisi non, tincidunt felis. Vestibulum efficitur mollis porttitor. Sed vehicula urna eget neque maximus, eget fringilla augue sollicitudin. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur elementum suscipit neque, id lacinia tortor sagittis non. Aenean placerat velit nec tellus mattis, quis lobortis erat vulputate. Donec in ligula fermentum, ornare augue nec, scelerisque leo. Proin nec odio lobortis purus pharetra sodales. Suspendisse finibus ligula in mi venenatis, et lacinia augue euismod. In aliquam velit ac mi laoreet faucibus. Nunc a volutpat ex. Mauris odio velit, efficitur et tortor nec, vulputate hendrerit mauris.</p><p>Morbi vel placerat sapien. Nunc vitae nunc sed magna tincidunt convallis id sit amet dui. Nam diam massa, suscipit et urna eu, egestas accumsan dui. Praesent sagittis dui auctor felis ultrices venenatis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas vitae pharetra leo. Nullam feugiat vestibulum nisi, sit amet tempor purus molestie eget. Aliquam et nisi sit amet purus tempus sollicitudin bibendum ultricies eros. Integer cursus fermentum diam, eget lacinia magna ultrices at. Ut venenatis massa sem.</p></div>
</div>
However, you could achieve the same result with a little less markup by using a pseudo-element to create your gradient:
*{box-sizing:border-box;color:#fff;font-family:sans-serif;font-size:16px;margin:0;padding:0;}
div{
background:#000;
bottom:0;
left:0;
line-height:1.25em;
overflow:auto;
padding:50vh 20px 0;
position:fixed;
right:0;
top:0;
}
div::after{
background:linear-gradient(180deg,rgba(0,0,0,1),rgba(0,0,0,0));
bottom:50vh;
content:"";
left:0;
pointer-events:none;
position:fixed;
right:0;
top:0;
}
.text>p{margin:0 0 20px;}
<div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla quis bibendum lorem, vel pellentesque nibh. Fusce sollicitudin est nec pharetra lacinia. Fusce ultrices lectus ex, nec pharetra dolor malesuada at. Aenean sagittis, enim non sagittis accumsan, libero nulla ullamcorper nunc, sit amet dapibus orci ligula gravida leo. Suspendisse molestie eros diam, volutpat tincidunt libero faucibus at. Sed condimentum tortor tincidunt tortor accumsan pulvinar. Sed at bibendum lorem, euismod tempor urna. Vivamus quis erat dolor. Maecenas sed nisl luctus, tempor mauris suscipit, porta nisl. Nam ac nulla condimentum, posuere nisl sit amet, tincidunt ante. Sed vestibulum, orci in imperdiet malesuada, ex dolor accumsan tellus, at auctor purus sapien at lacus. Nullam ullamcorper justo ac malesuada blandit. Fusce pretium et massa id eleifend. Cras quis dapibus tellus.</p><p>Curabitur et eros id risus sodales fringilla. Cras iaculis efficitur mi non accumsan. Sed congue ligula ut ligula semper egestas. Duis varius dolor ex, eu tempor nunc auctor ut. In ultricies malesuada eros, sed dictum justo auctor nec. Nunc blandit finibus ligula vel hendrerit. Fusce id blandit ante, sed euismod turpis. Phasellus elit lorem, eleifend ut facilisis non, tincidunt varius arcu. Duis gravida varius quam, vestibulum eleifend nisi volutpat a. In tempus velit justo, a auctor felis congue ac. Praesent dapibus vestibulum ex, a tincidunt justo interdum vel. Integer neque tortor, aliquam vitae quam at, hendrerit ullamcorper tellus. Suspendisse pharetra rutrum nunc vitae tristique. Aenean id ipsum purus. Nunc interdum id odio vel consectetur. Praesent convallis iaculis dolor eu pretium.</p><p>Aenean tincidunt urna vitae euismod vulputate. Integer tincidunt dolor sit amet ligula vehicula aliquet. Aliquam erat volutpat. Vivamus id lorem leo. Fusce faucibus, nisl non malesuada mollis, felis elit aliquam lacus, et ullamcorper lectus felis a eros. Quisque a nulla justo. Phasellus vitae purus viverra, mattis odio vitae, vehicula tellus. Nam eget vehicula velit, sed fermentum arcu. Proin laoreet molestie purus non laoreet. Nunc quis luctus lorem. Sed sit amet sapien quis eros pellentesque vestibulum. Pellentesque semper libero turpis, ac mattis orci tempus quis. Cras nunc nisi, accumsan sed dictum in, condimentum et tortor. Etiam tincidunt eget ex id ultrices. Ut lobortis faucibus porttitor. Mauris nisi est, tincidunt in sagittis eu, fermentum ac purus.</p><p>Phasellus fringilla sodales vehicula. Nam id diam convallis, interdum nisi non, tincidunt felis. Vestibulum efficitur mollis porttitor. Sed vehicula urna eget neque maximus, eget fringilla augue sollicitudin. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur elementum suscipit neque, id lacinia tortor sagittis non. Aenean placerat velit nec tellus mattis, quis lobortis erat vulputate. Donec in ligula fermentum, ornare augue nec, scelerisque leo. Proin nec odio lobortis purus pharetra sodales. Suspendisse finibus ligula in mi venenatis, et lacinia augue euismod. In aliquam velit ac mi laoreet faucibus. Nunc a volutpat ex. Mauris odio velit, efficitur et tortor nec, vulputate hendrerit mauris.</p><p>Morbi vel placerat sapien. Nunc vitae nunc sed magna tincidunt convallis id sit amet dui. Nam diam massa, suscipit et urna eu, egestas accumsan dui. Praesent sagittis dui auctor felis ultrices venenatis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas vitae pharetra leo. Nullam feugiat vestibulum nisi, sit amet tempor purus molestie eget. Aliquam et nisi sit amet purus tempus sollicitudin bibendum ultricies eros. Integer cursus fermentum diam, eget lacinia magna ultrices at. Ut venenatis massa sem.</p></div>
You may try using:
html {
overflow: overlay;
}
at the end of your .CSS file

Can javascript open a secondary window before the full document is loaded?

I am writing a CGI application which sometimes takes up to one minute to run, but not always. In the cases I am able to predict the delay, I would like to open another window warning the user of the expected delay. My first attempt was to have my CGI script add the line
window.onload = function(){window.open('<URL FOR WINDOW WARNING OF DELAY>')}
to the javascript code embedded into the html document. However the warning window is only opened when the html document is fully loaded, which unfortunately only happens after my slow process has finished running. In other words, too late!
Is it possible to force Javascript to open a secondary window immediately, namely before the current html document is read in full?
Yes you can, it's waiting because you're putting it in the window.onload handler, which, well... waits for the entire window (and its resources) to finish loading.
However, even if you do wait for the onload handler, the popup will be blocked by popup blockers. The only safe way to open a window is within a click event handler.
The better way would be to put some HTML immediately following the open <body> tag and remove it from window.onload
window.onload = function() {
document.body.removeChild(document.getElementById('loader'));
}
#loader {
text-align: center;
position: absolute;
top: 20px;
left: 50px;
width: 500px;
height: 200px;
padding-top: 120px;
border: 2px solid firebrick;
background-color: white;
box-shadow: 0 0 5px 5px #eee;
}
<div id="loader">
Please wait while page loads
</div>
<img src="http://deelay.me/5000/http://i.forbesimg.com/media/lists/companies/google_416x416.jpg" />
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eu convallis leo, a condimentum erat. Integer non blandit ligula, sed pretium ante. Cras convallis consequat lorem, tincidunt vehicula sapien dignissim ut. Fusce lacinia neque eu tortor gravida, a ornare eros mollis. Donec fringilla enim ut auctor iaculis. Fusce sed ipsum iaculis, pretium nunc aliquet, tempor ipsum. Ut ac purus sed massa finibus sollicitudin. Ut finibus sem vitae nibh interdum, et maximus mauris pretium. Sed imperdiet nulla non consequat ultrices. Praesent feugiat velit id lacinia faucibus. Aenean iaculis mi ac cursus tempus. Fusce interdum enim et leo hendrerit sollicitudin. Ut feugiat a tellus ac tincidunt. Integer eget convallis sem. Nullam eget dolor id augue volutpat efficitur. Nam at tortor nec purus cursus ullamcorper at sit amet mauris. Sed tristique, turpis ut commodo dictum, leo est bibendum enim, et convallis nunc nibh nec massa. Ut tempor ipsum sapien, ut aliquam libero volutpat et. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc libero diam, porta a mattis eget, aliquet non urna. Nullam ex nisi, elementum tristique luctus eu, pharetra at leo. Nulla ac vestibulum nisl. Duis facilisis placerat augue non ornare. Proin tempor ultricies semper. Praesent odio dui, maximus nec erat sit amet, efficitur vestibulum metus. Phasellus in diam consequat, rhoncus quam nec, faucibus purus. Nulla nec scelerisque neque. Pellentesque pretium, dolor vel porta egestas, metus ex ullamcorper turpis, ac maximus est ipsum luctus nulla. Integer lobortis sapien id eros gravida maximus. Suspendisse potenti. Morbi ac volutpat elit, in pulvinar mauris. Aliquam enim est, lacinia id lacus vitae, interdum varius ex. Cras urna tortor, tristique sed nibh ac, vehicula ornare magna. Donec vel semper nisi, imperdiet aliquet diam. Nullam eget pretium ipsum. Morbi semper at eros ac ornare. Quisque id enim sit amet magna imperdiet tristique ut eget quam. In egestas condimentum nisi vel consectetur. Nunc auctor tellus sed mi malesuada, sed iaculis nisi feugiat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus dictum scelerisque elementum. Nam convallis, risus ac dapibus iaculis, arcu neque pulvinar sapien, sit amet auctor nisi felis quis nunc. Proin mattis metus sed mauris imperdiet, et dictum diam vestibulum. Vivamus ac mattis tortor. Phasellus felis lorem, posuere a magna non, tempus dignissim lacus. Nulla vitae euismod turpis. Mauris a nunc quis ligula placerat pulvinar. Donec et quam vitae orci sodales vulputate at ac risus. Quisque eleifend augue in elit dignissim, et aliquet dui ultricies. Duis eget auctor nunc, ac facilisis velit. Mauris lacus nibh, finibus a blandit sed, hendrerit nec turpis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin nulla enim, tempor eu augue a, fringilla feugiat arcu. Proin molestie ex sit amet purus laoreet maximus quis in leo. Ut rhoncus metus nisi. Morbi in ipsum vitae erat sodales bibendum. Praesent vitae rhoncus odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In convallis tristique odio. Ut sit amet lorem sed enim tristique tincidunt. Nunc quis dictum tortor. Vestibulum maximus dui malesuada, bibendum mi sed, finibus nunc. Aliquam erat volutpat. Sed semper risus nisi, non lobortis quam luctus a. Curabitur posuere felis eget erat aliquet imperdiet. Vestibulum mollis feugiat sapien quis ultrices. Vivamus quis ipsum eget nibh vehicula interdum sed nec justo. Pellentesque sagittis, lacus ac malesuada elementum, neque risus eleifend quam, at sollicitudin erat libero ac turpis. Vivamus eu lorem ut sapien fringilla facilisis. Mauris facilisis venenatis ex, nec dapibus ligula fringilla quis. Quisque tempus vehicula ante. Sed vel finibus arcu. Proin in leo at neque pulvinar tincidunt. Morbi efficitur diam nec vulputate interdum. Nunc dapibus felis sollicitudin quam imperdiet sollicitudin. Maecenas eu lacus in sem tempus iaculis. Duis placerat semper nibh, nec malesuada nunc ullamcorper ac. Vestibulum consectetur elit felis, non hendrerit dolor ornare aliquam. Praesent at pretium erat. Duis id velit et velit rutrum efficitur eu ut enim. Phasellus eget molestie nisl, sit amet vulputate turpis. Maecenas id ullamcorper sem. Aliquam ac quam quis purus pellentesque faucibus ac at tellus. Cras sollicitudin vulputate metus, nec tempus tortor. Donec in venenatis nibh. Vivamus maximus sem leo, nec aliquet quam bibendum in. Curabitur luctus, lectus in tempus pretium, nunc lorem lobortis metus, a mattis lectus odio id ante. Proin viverra sapien id felis vehicula, non condimentum ipsum pulvinar. Fusce vitae nisl dui. Nunc at aliquet ante.In non tellus in turpis malesuada tempor scelerisque eu dui. Vivamus sagittis porttitor dui, at lobortis massa commodo ut. Vestibulum ac elementum diam. Ut in egestas dolor. Aenean in ante elit. Etiam dictum nulla odio, sagittis pretium eros aliquam sit amet. Fusce venenatis hendrerit lacus, vitae semper quam molestie non. Aenean lacinia massa vitae felis ullamcorper auctor. Nulla sapien velit, sagittis ac sapien nec, varius pharetra erat. In ornare, arcu a vestibulum lacinia, lorem est molestie mi, eget dapibus dolor odio a mauris. Sed non nibh risus. Fusce facilisis mauris tristique, imperdiet sem quis, maximus turpis. In sit amet nibh venenatis, egestas dolor quis, sagittis mauris. Sed gravida, ex in gravida aliquet, sem nunc sollicitudin mi, sed vehicula turpis magna nec odio. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed feugiat massa et tempus lacinia. Duis consectetur ac libero nec hendrerit. Vivamus eu fringilla libero, euismod maximus felis. Nulla laoreet viverra magna nec auctor. Etiam dignissim sollicitudin tellus, non semper dui imperdiet vel. Pellentesque enim mi, imperdiet vitae suscipit vel, euismod ut lacus. Aliquam congue faucibus sapien, eu tempus erat aliquet at.
</p>
Try this:
var flag = true;
var DELAY = 10000;
setTimeout(function () {
if (flag == true) window.open('<URL FOR WINDOW WARNING OF DELAY>')
}, DELAY);
window.onload = function(){ flag = false; }
The idea is that if your page is not loaded in 10 000 ms, open a new window. But if the page will be loaded faster, it sets flag = false and the condition in timeout is not executed.

Categories

Resources