Develop Reference

How to fade out a div slide using CSS animations?

I made a simple slide show with divs stacked one on top of the other.
I switch the div on display with display:none or display:block.
But when I add animations, I encounter a problem. The fade in works, but I have no idea how to fade out a vanishing slide. The slide just disappears and I can't get any fade out method that I have found to work. Where is the error please?
let pages = document.getElementsByClassName("page");
let buttons = document.getElementsByClassName("page-button");
let currentPage = 0;
pages[currentPage].style.display = "block";
for (let i = 0; i < buttons.length; i++) {
buttons[i].addEventListener("click", () => changePage(i));
}
function changePage(k) {
pages[currentPage].style.display = "none";
pages[k].style.display = "block";
currentPage = k;
}
.content-container {
display: flex;
height: 90vh;
}
.page {
position: absolute;
display: none;
width: 100%;
height: 100%;
animation: fadeIn 3s;
}
#keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#slideshow {
flex-grow: 1;
position: relative;
}
<div class="content-container">
<div id="slideshow">
<div class="page" style="background-color: red;"></div>
<div class="page" style="background-color: green;"></div>
<div class="page" style="background-color: blue;"></div>
</div>
<button class="page-button">1</button>
<button class="page-button">2</button>
<button class="page-button">3</button>
</div>

For animation I use the library called Animate.css. Take a look at the following link:
https://animate.style/
You can install this library with NPM:
npm install animate.css --save
Then you can use this library like this:
<div class="page animate__fadeOutLeft" style="background-color: green;">

The issue is that you are using a display none, which will instantly remove the coloured block and fade in from white.
On click set the background colour of the 'content-container' to the item's colour to be removed, giving the impression of fading in from that colour.
var contentContainer = document.getElementsByClassName("content-container");
var replaceColour = pages[k].styles.getPropertyValue("background-color")
contentContainer.style.backgroundColor = replaceColour;

Click on an element to let the elements after it slide forward

I'm practicing and trying to make an instagram page.
Now the layout is all done but i have some problems with javascript.
How do i make the effect like instagram as the gif below?
I make the css display: none, when the element is clicked.
But i'm not sure how to make the elements after it slide forward.
Please refer to the gif below.
I idea was:
When an element is clicked, wrap the elements after it, and then change the wrap css position.
I used jquery wrap(), but it didn't work as i wanted.
for example, the original code is like this
<div class="box">111</div>
<div class="box">222</div>
<div class="box">333</div>
<div class="box">444</div>
<div class="box">555</div>
I used
$(".box").click(function () {
$(this).nextAll().wrap('<div class="wrap"></div>');
});
if i click 222, the result would be
<div class="box">111</div>
<div class="box">222</div>
<div class="wrap">
<div class="box">333</div>
</div>
<div class="wrap">
<div class="box">444</div>
</div>
<div class="wrap">
<div class="box">555</div>
</div>
but i want it to be like this
<div class="box">111</div>
<div class="box">222</div>
<div class="wrap">
<div class="box">333</div>
<div class="box">444</div>
<div class="box">555</div>
</div>
How do i wrap all these element together, instead of giving a wrap to each?
Or is there any better way to make this effect?

I know that a part of your question has already been answered by #charlietfl, so this here is just about the animation. This here is just one way to do it and there are a lot of others to do so.
An example code is available below.
So how does it work?
Apply a wrapper to the box to get a simple element to animate (yes you could also just animate the box with margin and without the wrapper. The wrapper is just for making an easy padding animation.)
If the .close span is clicked, the wrapper is set to the following CSS:
width: 0;
opacity: 0;
padding-left: 0;
padding-right: 0;
Because the wrapper has
transition: 0.5s;
it will slide nicely to the left. (transition applies to width, opacity and padding in this case)
And maybe think about doing something with the z-index (opacity animation is a bit ugly in the front of other elements).
I hope i could help anyone - Have a nice day!
$(".close").click(function(){
var el = $(this).closest(".box_wrapper");
el.css("width", 0);
el.css("opacity", 0);
el.css("padding-left", 0);
el.css("padding-right", 0);
setTimeout(function() {
el.remove();
}, 500);
});
.box_wrapper {
float: left;
transition: 0.5s;
width: 100px;
height: 200px;
padding: 15px;
}
.box {
background-color: lightgrey;
width: 100px;
height: 100%;
padding: 10px;
}
.close {
float: right;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box_wrapper">
<div class="box"><span class="close">X</span>1</div>
</div>
<div class="box_wrapper">
<div class="box"><span class="close">X</span>2</div>
</div>
<div class="box_wrapper">
<div class="box"><span class="close">X</span>3</div>
</div>
<div class="box_wrapper">
<div class="box"><span class="close">X</span>4</div>
</div>
And yes, this code is not perfect. There are some things to improve like the padding on .box_wrapper & .box, the opacity animation and the js. (can be simplified by a lot)

Color will not change when scrolling

i am trying to implement a feature on a menu that i am working on.When i scroll more than 50 pixels, let's say, i want to make the background color black, for example. Here is my code:
function myFunction() {
var x = document.getElementById("test");
if ( document.body.scrollTop > 50 || document.documentElement.scrollTop > 50 ) {
x.classList.toggle("change");
}
}
#test {
background-color: #d2d2d2;
height: 90px;
position: fixed;
top: 0px;
left: 0px;
}
.change {
background-color: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body onscroll="myFunction()">
<div id="test">
<p>
Wow, this is some really nice text, now isn't it?
</p>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div id="demo">
Kachow, another text.
</div>
</body>
As you can see, the background colour won't change. If you look at the CSS rules, you can see that the extra colour is added, but crossed off (in FireFox). Would you know why?
JSFiddle Demo: https://jsfiddle.net/TakeDown/7djmqkzL/12/.
Thank you for your time!

The id selector has a higher specificity than a plain class selector. Meaning your class css won't override the id one. So you need to create a selector that has a higher specificity, and in your case just tag on the id selector:
#test.change {
background-color:black;
}
If you don't want to tie it to a particular id, you can tag on the element name instead to make the specificity higher
div.change {
background-color:black
}
Can read more about css selector specificity on MDN or in the spec at here
Demo
function myFunction() {
var x = document.getElementById("test");
if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
x.classList.add("change");
} else {
x.classList.remove("change");
}
}
#test {
background-color: #d2d2d2;
height: 90px;
position: fixed;
top: 0px;
left: 0px;
}
#test.change {
background-color: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body onscroll="myFunction()">
<div id="test">
<p>
Wow, this is some really nice text, now isn't it?
</p>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div id="demo">
Kachow, another text.
</div>
</body>

If you want to get rid of graphical glitches don't use toggle
x.classList.toggle("change");
Instead, just set it to black when the scroll is 50
x.style.background = "black";

JS/jQuery - set scroll bar of side nav bar to certain position

I have a side nav bar which looks like this:
.scroll-box {
overflow: hidden;
width: 128px;
}
.filler {
height: 256px;
overflow-y: auto;
}
.selector {
background-color: #369;
padding: 8px 4px;
text-align: center;
flex-grow: 1;
display: inline-block;
cursor: pointer;
box-sizing: border-box;
transition: .1s !important;
}
.bar {
height: 8px;
width: 100%;
background-color: #808080;
}
.label {
padding: 4px 8px;
background-color: #707070;
}
.active {
background-color: lightgrey;
color: #369;
}
<div class="scroll-box">
<div class="label">Dates</div>
<div class="filler">
<div class="selector">4-Aug-16</div>
<div class="selector">4-Aug-16</div>
<div class="selector">4-Aug-16</div>
<div class="selector">4-Aug-16</div>
<div class="selector">4-Aug-16</div>
<div class="selector">4-Aug-16</div>
<div class="selector">4-Aug-16</div>
<div class="selector">4-Aug-16</div>
<div class="selector active" id="today">15-Aug-16</div>
<div class="selector">4-Aug-16</div>
<div class="selector">4-Aug-16</div>
<div class="selector">4-Aug-16</div>
<div class="selector">4-Aug-16</div>
<div class="selector">4-Aug-16</div>
<div class="selector">4-Aug-16</div>
<div class="selector">4-Aug-16</div>
<div class="selector">4-Aug-16</div>
</div>
<div class="bar"></div>
</div>
I want to get it so that when the page loads, it automatically centers the view of the side nav bar to the today id element. I've tried putting myUrl#today but that changes the entire page scroll, which I do not want. I
I only want the scroll in the side nav bar to change it's position and center on the #today bit. Does anyone know of a way to do this?
I am willing to use jQuery and JS as well.
Thank you.

I think you can use jQuery code such as
$(document).ready(function(){
// when document is ready
// first check if #today is defined in HTML
// the $('') is the jQuery selector of to select an element
// $('#today') means select an element with the ID "today"
// the .length attribute is default javascript attribute to check
// how many of elements selected has existed
if($('#today').length > 0){
// the offset() function is a jQuery function that is used for check the
// relative distance from the border of current element to its parent
var distance_to_top = $('#today').offset().top;
var top_label_height = $('.label').height();
var distance_to_scroll = distance_to_top - top_label_height - 8;
// 8 px is body margin on jsfiddle
// scrollTop() function is another jQuery function to scroll an
// overflow element
$('.filler').scrollTop(distance_to_scroll);
}
});
find the offset of the today element relative to its parent, then minus the label height because the label will cover on top of the #today. the scroll to top
The demo can be found at here

Maybe this can do. (I can't test it right now...).
Basically, we get every element of the div that doesn't have the id "today" and we add the height of those elements. When we finally reach "today", we set the scrollbar to the height of every past elements added together and go out of the loop.
$(document).ready(function(){
var height = 0;
$(".filler *").each(function () {
if($(this).is("#today"))
{
return false; //to get out of the .each
}
else
{
height += $(this).height();
}
})
$( "div.demo" ).scrollTop(height); //set the scrollbar
});

Hover over an element covered by another element's padding

So I have a map composed by tiles that are svg elements.
In the image, the tile itself is the blue area, but it has a buffer area to allow geometries that span outside the tile to render whole. The problem is that this buffer area (in green), is covering the geometries from other tiles that are below it. This buffer zone is set in CSS as the following:
padding: 128px;
margin: -128px;
Is there a way to hover/click "through" the buffer area, or is there a better approach in CSS to achieve this?

Padding is part of a element, therefore will react like it was content of your tag.
See here. If you absolutely need to have that spacing to be padding, you can't click anything behind neither content nor padding.
You might consider changing your layering, using z-index, but for further advise on this, you'll have to provide further code, your HTML Markup and CSS code.

If that blue thingy is the only element that needs this treatment, then I suggest creating a key bind to move that element to the back with z-index, and be done with it.
If you require this functionality on all of these red balls, the thing to do would probably be to move, the one you click on, to the back with z-index ( again ).
Both of these require you to use JavaScript most likely, unless you want to move that big blue element to the back on hover.
To always move the clicked element to the back you could just keep track of what was the last assigned z-index, and decrease it by one every time you assign it to a new object.
Something like this would probably do:
#box1 { position: absolute; background-color: #123; width: 100px; height: 100px; top: 200px; left: 300px; opacity: 0.9; }
#box2 { position: absolute; background-color: #ABC; width: 100px; height: 100px; top: 250px; left: 350px; opacity: 0.8; }
<div class="box" id="box1"></div>
<div class="box" id="box2"></div>
<script type="text/javascript">
var boxes = document.getElementsByClassName("box");
var length = boxes.length;
var index = 0;
function moveToBack(event)
{
var element = this;
this.style.zIndex = index;
index--;
return false;
}
for(var i = 0; i < length; i++)
{
var box = boxes[i];
box.addEventListener("click", moveToBack, false);
}
</scirpt>
Does that do the job ? or did you mean something else entirely ?

Only way I can seem to get it to work is to add a child inner element and give pointer-events:none to the wrapper and pointer-events:auto to the inner child element. It's not ideal as support for pointer-events is limited and there's no telling if all browsers will respect a child of pointer-events:none element having a different value than its parent. It will need tested. Well, in any case, here is the code:
$('.tile').on('mouseenter', function(){
$('.info', this).find('.tile-info').remove();
var ts = new Date().getTime();
$('.info', this).append('<div class="tile-info">mouseenter tile '+ts+'</div>');
});
$('.tile').on('mouseleave', function(){
$('.info', this).find('.tile-info').remove();
var ts = new Date().getTime();
$('.info', this).append('<div class="tile-info">mouseleave tile '+ts+'</div>');
});
$('.inner').on('mouseenter', function(){
$('.info', this).find('.inner-info').remove();
var ts = new Date().getTime();
$('.info', this).append('<div class="inner-info">mouseenter inner '+ts+'</div>');
});
$('.inner').on('mouseleave', function(){
$('.info', this).find('.inner-info').remove();
var ts = new Date().getTime();
$('.info', this).append('<div class="inner-info">mouseleave inner '+ts+'</div>');
});
.tile {
width: 200px;
height: 200px;
background: rgba(100,100,200,0.2);
padding: 50px;
margin: -50px;
position: absolute;
pointer-events:none;
}
.tile:nth-of-type(1) {left: 300px;top: 20px;}
.tile:nth-of-type(2) {left: 90px;top: 210px;}
.tile:nth-of-type(3) {left: 0px;top: 0px;}
.tile:nth-of-type(4) {left: 360px;top: 240px;}
.tile .inner {
width: 100%;
height: 100%;
background: rgba(200,100,100,0.2);
pointer-events:auto;
overflow: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tile">
<div class="inner">
<div class="info"></div>
</div>
</div>
<div class="tile">
<div class="inner">
<div class="info"></div>
</div>
</div>
<div class="tile">
<div class="inner">
<div class="info"></div>
</div>
</div>
<div class="tile">
<div class="inner">
<div class="info"></div>
</div>
</div>