We Keep Coding

how to make my transitions for max-height work synchronously?

I have 4 dropdown containers. When i am clicking on a header , i want its associated paragraph to appear and other paragraph, that had been appeared ,disappear.
When a header is clicked, i remove active class from all the other paragraphs and add it to the paragraph that its header is clicked. It works fine but the problem is that first the current paragraph appears and then other paragraph disappears but i want them to work synchronously like while one appears another disappears but i do not know how to do that.
HTML:
<div class="dropDown">
<div class="header">
header1
</div>
<p class="active">some things here some things here some things here some things here</p>
</div>
<div class="dropDown">
<div class="header">
header2
</div>
<p>some things here some things here some things here some things here</p>
</div>
<div class="dropDown">
<div class="header">
header3
</div>
<p>some things here some things here some things here some things here</p>
</div>
<div class="dropDown">
<div class="header">
header4
</div>
<p>some things here some things here some things here some things here</p>
</div>
CSS:
.dropDown p{
background: rgb(245, 245, 245);
border-right: 40px solid #e8e8e8;
font-size: 13px;
line-height: 35px;
max-height: 0px;
overflow: hidden;
margin-bottom: 0;
padding: 0px 15px 0px 30px;
transition: max-height .3s ease;
}
.dropDown p.active{
max-height: 500px;
padding-top:8px;
padding-bottom: 20px;
}
jQuery:
Headers.click(function(){
var theP = $(this).parent().children("p"); //current paragraph
dropDownParagrsphs.not(theP).removeClass("active");
theP.toggleClass("active");
});
How can i make the transitions to work together like while one paragraph's height decreases , other paragraph's height increases?

interestingly, you've stumbled on a deceptively difficult problem in pure CSS.
The truth is, your paragraphs are already behaving as you want them to, the problem is that you've specified a large max height relative to the actual content of the p, it gives the impression that they are executed one after the other, but that's just because the time it takes is relatively (compared to actual height of p with overflow: hidden) long to grow/shrink max-height to 500px. It's as if you have an invisible box growing to 500px.
This should be easily solvable by changing your max-height to auto, but unfortunately you cannot animate height auto in pure CSS transitions. your options are:
a) choose a different hardcoded max-height which is closer to the actual content size.
b) use transform scale(Y)
c) use pure JS: for example slideUp and slideDown
var Headers = $('.header')
var dropDownParagraphs = $('.dropDown p')
Headers.click(function(){
var theP = $(this).parent().children("p"); //current paragraph
// theP.addClass("active");
// dropDownParagraphs.not(theP).removeClass("active");
dropDownParagraphs.not(theP).slideUp(200);
theP.slideDown(200);
});
check this codepen for implementation of c)
https://codepen.io/bakuthe3rd/pen/abvzVJz

You can use .slideToogle(duration, easing, callback) method to do so. Also, I've shifted padding-bottom and padding-top properties to p from p.active, so that they don't change dramatically during the transition.
jQuery:
$('p').slideUp(0); // close all
$('.active').slideToggle(300); // open the default
$('.header').click(function() {
var nowP = $(this).parent().children("p"); // current paragraph
var prevP = $('.active'); // opened paragraph
var isSame = $('p').index(prevP) == $('p').index(nowP);
prevP.removeClass("active").slideToggle({ duration: 300, queue: false });
if (!isSame) nowP.addClass("active").slideToggle({ duration: 300, queue: false });
});
$('p').slideUp(0);
$('.active').slideToggle(300);
$('.header').click(function() {
var nowP = $(this).parent().children("p"); // current paragraph
var prevP = $('.active'); // opened paragraph
var isSame = $('p').index(prevP) == $('p').index(nowP);
prevP.removeClass("active").slideToggle({ duration: 300, queue: false });
if (!isSame) nowP.addClass("active").slideToggle({ duration: 300, queue: false });
});
.dropDown p {
background: rgb(245, 245, 245);
border-right: 40px solid #e8e8e8;
font-size: 13px;
line-height: 35px;
overflow: hidden;
margin-bottom: 0;
padding: 0px 15px 0px 30px;
transition: max-height .3s ease;
padding-top: 8px;
padding-bottom: 20px;
}
.dropDown p.active {
max-height: 500px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dropDown">
<div class="header">
header1
</div>
<p class="active">some things here some things here some things here some things here</p>
</div>
<div class="dropDown">
<div class="header">
header2
</div>
<p>some things here some things here some things here some things here</p>
</div>
<div class="dropDown">
<div class="header">
header3
</div>
<p>some things here some things here some things here some things here</p>
</div>
<div class="dropDown">
<div class="header">
header4
</div>
<p>some things here some things here some things here some things here</p>
</div>
Also, you'll notice that on clicking the same link, the dropdown will be closed. I've added this as I expect this is probably the desired effect :)
Further, you can add 'linear' as second argument in .slideToggle method, if you need a linear transition. By default, it is 'swing'.

How do I prevent scroll back up with JavaScript or jQuery?

I have a webpage where there is a full height intro image. Underneath this image is the main body of the site with a regular site header at the top, I'm trying to create an effect where once the user scrolls down to the site header, they cannot scroll back up to view the intro image.
CSS Classes:
Main Intro Image: .cq-fullscreen-intro
Site Header: .nav-down
I had a poke around on StackOverflow but I can't find anything that addresses this circumstance, can anyone point me in the right direction to achieve this using jQuery?

you can use JQuery scrollTop function like this
$(function() {
$(window).scroll(function() {
var scroll = $(window).scrollTop();
// set the height in pixels
if (scroll >= 200) {
// after the scroll is greater than height then you can remove it or hide it
$(".intro-image").hide();
}
});
});

So instead of scrolling, I personally think it would be better to have it be actionable. Forcing the user to manually do the transition (and all in between states) is a bad idea. If the user scrolls half way, and see's something actionable (menu, button, input field) is it usable? If it is, what happens if they submit... very awkward. If it isn't usable, how do they know when it is? How do they know it's because they haven't scrolled all the way. It's very poor user experience.
In the following example, I've created a pseudo-screenport for you to see what's actually going on. The .body container in your real site would be the body element.
Code Pen Example
$(document).ready(function(){
$('.splash-screen').on('click', function(){
$('.splash-screen').addClass("is-hidden");
});
})
html, body{
background: #eee;
margin: 0;
padding: 0;
}
.flex-root {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
width: 100vw;
}
.web-container {
width: 640px;
height: 480px;
background: #fff;
}
.body {
font-size: 0; // this is only to prevent spacing between img placholders
position: relative;
}
.splash-screen{
position: absolute;
transition: transform 1s ease-in-out;
}
.splash-screen .fa {
position: absolute;
z-index: 1;
font-size: 24px;
color: #fff;
left: 50%;
bottom: 15px;
}
.splash-screen.is-hidden {
transform: translateY(-110%);
transition: transform 1s ease-in-out;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="flex-root">
<div class="web-container">
<div class="body">
<div class="splash-screen">
<img src="https://via.placeholder.com/640x480?text=Splash+Screen"/>
<i class="fa fa-chevron-circle-up"></i>
</div>
<img src="https://via.placeholder.com/640x60/cbcbcb?text=Menu"/>
<img src="https://via.placeholder.com/640x420/dddddd?text=Site Body"/>
<div>
</div>
</div>

While its not direclty preventing you from scrolling up and its not jQuery, I would suggest to remove/hide the element once its out of view.
You could get the current scroll position, relative to the top of the page, and check if its greater than the elements height:
const target = document.getElementById('my-target')
const targetHeight = target.getBoundingClientRect().height
const scrollEventListener = () => {
if (
document.body.scrollTop > targetHeight ||
document.documentElement.scrollTop > targetHeight
) {
target.remove()
window.removeEventListener('scroll', scrollEventListener)
document.documentElement.scrollTop = 0
}
}
window.addEventListener('scroll', scrollEventListener)
Here is a codepen https://codepen.io/bluebrown/full/aboagov

Moving an element smoothly to its new position without manually setting its position

My apologies if the subject is a bit non-descriptive. I'm having a hard time trying to explain what I'm trying to achieve in a one-liner.
But in a few sentences: I'm trying to have an element, a DIV in this case, move smoothly to its new position. But the caveat is that I'm not setting its position manually. It receives a new position because I'm removing other DIVs from the page flow.
<!DOCTYPE html>
<html>
<head>
<style>
.block {
width: 200px;
height: 20px;
border: 1px solid black;
margin: 20px;
}
</style>
<script>
function removeBlock() {
document.getElementById("block2").style.display = "none";
}
</script>
</head>
<body>
<div id="block1" class="block">
This is block 1
</div>
<div id="block2" class="block">
This is block 2
</div>
<div id="block3" class="block">
This is block 3
</div>
<button type="button" onclick="removeBlock();">
Remove block 2
</button>
</body>
</html>
Here's the fiddle: https://jsfiddle.net/nfhycrkL/
If you click the button, Block 2 is hidden and Block 3 moves up. I want this move to be smooth. Is this at all possible? I don't want to use absolute positioning since the page is responsive and the position of the DIVs are depending on the page size.

Try This Solution
function removeBlock()
{
document.getElementById("block2").style.height = "0px";
document.getElementById("block2").style.margin = "0px";
document.getElementById("block2").style.borderWidth = "0px";
document.getElementById("block2").style.fontSize = "0px";
}
.block {
width: 200px;
height: 20px;
border: 1px solid black;
margin: 20px;
}
#block2 {
transition:all 0.5s linear;
}
<div id="block1" class="block">
This is block 1
</div>
<div id="block2" class="block">
This is block 2
</div>
<div id="block3" class="block">
This is block 3
</div>
<button type="button" onclick="removeBlock();">
Remove block 2
</button>

You could add a new class to an element with javascript that you want to hide and do css transition.
Here's a small example with remove and toggle options https://jsfiddle.net/nfhycrkL/9/
html:
<div id="block1" class="block">
This is block 1
</div>
<div id="block2" class="block">
This is block 2
</div>
<div id="block3" class="block">
This is block 3
</div>
<button type="button" onclick="toggleBlock();">
Toggle block 2
</button>
<button type="button" onclick="removeBlock();">
Remove block 2
</button>
js :
function toggleBlock() {
document.getElementById("block2").classList.toggle('block-hidden')
}
function removeBlock() {
document.getElementById("block2").classList.add('block-hidden')
}
css:
.block {
width: 200px;
height: 20px;
border: 1px solid black;
margin: 0 20px 20px;
overflow:hidden;
transition: all .25s;
}
.block-hidden {
height: 0px;
margin: 0px;
border: none;
}

$(document).ready(function(){
$("button").click(function(){
//document.getElementById("block2").style.display = "none";
$("#block2").fadeOut(1000);
});
});
.block {
width: 200px;
height: 20px;
border: 1px solid black;
margin: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/>
<div id="block1" class="block">
This is block 1
</div>
<div id="block2" class="block">
This is block 2
</div>
<div id="block3" class="block">
This is block 3
</div>
<button type="button">
Remove block 2
</button>
use Jquery effects. I hope this helps.

Here's a simple example in vanillaJS with a CSS transition
Jsfiddle demo
Update your style adding a transition for the .block element
CSS
.block {
width: 200px;
height: 20px;
border: 1px solid black;
margin: 20px 20px 0;
max-height: 500px;
transition: opacity 0s 0s, margin .25s 0s, max-height .25s 0s;
}
.removedBlock {
box-sizing: border-box;
opacity: 0;
margin: 0;
max-height: 0;
}
so that the function can trigger a max-height animation by adding the removedBlock class
<div id="block1" class="block">
This is block 1
</div>
<div id="block2" class="block">
This is block 2
</div>
<div id="block3" class="block">
This is block 3
</div>
<button type="button" onclick="removeBlock('block2');">
Remove block 2
</button>
JS
function removeBlock(id) {
var block = document.getElementById(id);
block.classList.add('removedBlock');
}
When you do a removal, the element disappears due the opacity set to 0, then margin and max-height will make the block collapsing.
Note that since a transition can't be triggered to/from an auto value I've set a huge starting max-height for this purpose. If you want to see a smoother transition either change that property with a lower value or simply increase the duration of the transition.
A more refined version could instead get the height of the element before applying the transition e.g.
function removeBlock(id) {
var block = document.getElementById(id);
var blockHeight = block.offsetHeight;
block.style.height = blockHeight + 'px';
block.classList.add('removedBlock');
}
so the style becomes
.block {
width: 200px;
height: 20px;
border: 1px solid black;
margin: 20px 20px 0;
transition: opacity 0s 0s, margin .5s 0s, height .5s 0s;
}
.removedBlock {
box-sizing: border-box;
opacity: 0;
margin: 0;
height: 0 !important;
}
JsFiddle

Thanks everybody for your answers! And although all of them work somewhat, they do not work as soon as the layout becomes more complex, or if you try to hide/show more/other objects.
So I spend the past few hours creating a Javascript solution that I think will work in any situation (and on any browser too).
In short, how it works is that you "mark" as many elements as you like to be hidden/shown with the SetDisplay() function (see the first button). Once that has been done, you call the same SetDisplay function without any parameters and see the magic happen! The Javascript actually quickly removes the elements and let the page reflow (all invisible to the viewer). It then examines the new positions, reinserts the elements to hide and move all other elements to their new position by setting style.transition and by using position:relative and new top and left values. Once it's done with the transition, it hides the elements permanently, resets all changed style values and let the page reflow again.
SetDisplay( "block2", "none" );
SetDisplay( "block3", "none" );
SetDisplay( "block4", "none" );
SetDisplay();
You can reinsert elements the same way (the second button).
SetDisplay( "block2", "" );
SetDisplay();
https://jsfiddle.net/yq7xor5j/3/
(Edit: made a change to the fiddle to correct a small bug)

Chrome issues with CSS transitions and overflow-y:scroll or auto

I shall preface this by apologising for my horrendous code.
I have a "meet the team" page with a list of names on the right and information on the left. There is a div containing a biography on the left with the following CSS rules applied:
#bio
{
width:290px;
height:300px;
margin:15px;
font-size:18px;
color:#003399;
float:left;
transition:opacity 0.8s;
overflow-y:auto;
}
When you click on a new name, this text and other text will fade out. When invisible, the text is replaced with the swapText() function which changes the innerHTML of the divs and the divs fade back in again:
function fadeText(id)
{
var bio = document.getElementById('bio');
var name = document.getElementById('staffname');
var title = document.getElementById('stafftitle');
bio.style.opacity = 0;
name.style.opacity = 0;
title.style.opacity = 0;
setTimeout(function(){swapText(id);}, 1000);
setTimeout(function(){bio.style.opacity = 1;name.style.opacity = 1;title.style.opacity = 1;}, 1200);
}
In Chrome, if the biography is large enough to have a scrollbar with overflow-y:auto, then once the text is faded back in, the entire div disappears suddenly. The div disappears every time with overflow-y:scroll. This does not happen in Firefox.
If I add this code to the fadeText() function, then Chrome plays nice, but the transition ends up looking clumsy because of the scrollbar popping in and out.
bio.style.overflow = "hidden";
setTimeout(function(){bio.style.overflowY = "auto";}, 2000);
I have reproduced the bug here: https://jsfiddle.net/fqca5gsw/
Any advice would be greatly appreciated!

Just use flex , instead of float they are causing the problem the width of li element is taking the whole screen which is increasing the onClick()event area to happen
<div class="flex">
<div id="left">Short text</div>
<div id="right">
<li onclick="select(0);">Short text</li>
<li onclick="select(1);">Long text</li>
</div>
</div>
css
.flex {
display: flex;
}
#left {
display: block;
background-color: #F5F5F5;
width: 300px;
height: 300px;
transition: opacity 0.8s;
/* float: left; */
overflow-y: auto;
}

How do I make the rest of the page fade to black once my div loads and fade out once the div is closed?

I've been piecing together code and tweeking it to eventually come together with this. The code itself is fairly simple and basically just saying that once someone visits the page for the first time then drop a cookie and no longer display it for the visitor when he visits the page, well for 365 days. My only issue is that once the div loads and loads out, I can't figure out how to fade in and fade out the background, I can only fade the div itself. I've tried wrapping it in a overlay div but I think I'm approaching it all wrong.
The code looks a bit much on here so I've attached a jsfiddle for a working example: http://jsfiddle.net/newbieturd/F29uv/
** Note: Once you run the fiddle once, you will have to clear your cookie. The DIV only appears once
CSS:
#welcome {
box-sizing:border-box;
padding:34px 18px 18px 18px;
height:120px;
width:300px;
background:Salmon;
color:#f9f9f9;
border-radius:6px;
position:absolute;
top:50%;
left:50%;
margin:-60px 0 0 -150px;
font:300 normal 1.4em/1.2 'Signika', sans-serif;
display:none;
}
#close {
height:30px;
width:30px;
background:url('http://www.omagdigital.com/images/articles/WebArticle-CloseButton.png') no-repeat;
position:absolute;
top:2px;
right:2px;
cursor:pointer;
}
JS:
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
(function(factory){if(typeof define==='function'&&define.amd){define(['jquery'],factory);}else{factory(jQuery);}}(function($){var pluses=/\+/g;function raw(s){return s;}function decoded(s){return decodeURIComponent(s.replace(pluses,' '));}function converted(s){if(s.indexOf('"')===0){s=s.slice(1,-1).replace(/\\"/g,'"').replace(/\\\\/g,'\\');}try{return config.json?JSON.parse(s):s;}catch(er){}}var config=$.cookie=function(key,value,options){if(value!==undefined){options=$.extend({},config.defaults,options);if(typeof options.expires==='number'){var days=options.expires,t=options.expires=new Date();t.setDate(t.getDate()+days);}value=config.json?JSON.stringify(value):String(value);return(document.cookie=[config.raw?key:encodeURIComponent(key),'=',config.raw?value:encodeURIComponent(value),options.expires?'; expires='+options.expires.toUTCString():'',options.path?'; path='+options.path:'',options.domain?'; domain='+options.domain:'',options.secure?'; secure':''].join(''));}var decode=config.raw?raw:decoded;var cookies=document.cookie.split('; ');var result=key?undefined:{};for(var i=0,l=cookies.length;i<l;i++){var parts=cookies[i].split('=');var name=decode(parts.shift());var cookie=decode(parts.join('='));if(key&&key===name){result=converted(cookie);break;}if(!key){result[name]=converted(cookie);}}return result;};config.defaults={};$.removeCookie=function(key,options){if($.cookie(key)!==undefined){$.cookie(key,'',$.extend({},options,{expires:-1}));return true;}return false;};}));
function setCookie() {
$.cookie("visited", "true", { expires: 365 });
}
if ($.cookie('visited') != 'true') {
$('#welcome').show(1800);
setCookie();
} else {
$('#welcome').remove();
}
$('#close').click(function() {
$('#welcome').hide(1800);
});
// $.cookie("visited", null);
});//]]>
</script>
HTML:
<div id="welcome">
<span id="close"></span>
Interstitial Message. You will only see this message once every 365 days.
</div>
<p> Hello World. </p>

Is this what you are looking for? I gave the popup a parent container that will serve as the overlay.
HTML:
<div class="overlay">
<div id="welcome">
<span id="close"></span>
This is the only time you will see this message :)
</div>
</div>
CSS:
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.4);
z-index: 99;
}
jQuery:
if ($.cookie('visited') != 'true') {
$('#welcome, .overlay').show(100); // If the condiditon is true then show overlay
setCookie();
} else {
$('#welcome').remove();
}
$('#close').click(function() {
$('#welcome').hide(100); // Can also be added to this jQuery selector but the animation was odd
$('.overlay').fadeOut(100); // Fades out on click
});
Finally the fiddle: DEMO

Give your #welcome div a z-index (11 for example) and add css to give your document body full height and width:
html, body {
height: 100%;
width: 100%;
}
You're going to add a glass pane div to the body and it needs a height and width to fill the body of the page which, in your current example, has no height or width set
And then add a background div with a color of your choosing and a z-index less than your #welcome div such as:
<div id="glass_pane" style="width: 100%; height: 100%; z-index: 10; position: absolute: top: 0px; left: 0px; background-color: #000;"></div>
Ans then fade it in or out, remove it when you like, change the transparency