Develop Reference

Clicking on the label should close a tab which doesn't work

I am trying to close tabs by clicking on the tab label.
I added a click event listener to the label but this doesn't work.
What di I need to do to get this working?
const labels = document.querySelectorAll('label');
const tabs = document.querySelectorAll('[role="tab"]');
labels.forEach(label => label.addEventListener('click', handleLabelClick ))
function handleLabelClick(event) {
tab = event.currentTarget.previousElementSibling;
if (tab.checked = "checked") {
closeAllTabs();
}
}
function closeAllTabs() {
tabs.forEach(tab => {
tab.checked = false;
});
}
/**
* Tabs
*/
.dc-tabs {
display: flex;
flex-wrap: wrap;
}
.dc-tabs label {
order: 1;
display: block;
padding: 1rem 2rem;
margin-right: 0.2rem;
cursor: pointer;
background: #90CAF9;
font-weight: bold;
transition: background ease 0.2s;
}
.dc-tabs .dc-tab {
order: 99;
flex-grow: 1;
width: 100%;
display: none;
padding: 1rem;
background: #fff;
}
.dc-tabs input[type="radio"] {
display: none;
}
.dc-tabs input[type="radio"]:checked + label {
background: #fff;
}
.dc-tabs input[type="radio"]:checked + label + .dc-tab {
display: block;
}
#media (max-width: 20em) {
.dc-tabs .dc-tab,
.dc-tabs label {
order: initial;
}
.dc-tabs label {
width: 100%;
margin-right: 0;
margin-top: 0.2rem;
}
}
/**
* Generic Styling
*/
body {
background: #eee;
min-height: 100vh;
box-sizing: border-box;
padding-top: 10vh;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
line-height: 1.5;
max-width: 60rem;
margin: 0 auto;
font-size: 112%;
}
<div class="dc-tabs">
<input type="radio" role="tab" name="tabs" id="tabone" checked="checked">
<label for="tabone">Tab One</label>
<div class="dc-tab">
<h1>Tab One Content</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
</div>
<input type="radio" role="tab" name="tabs" id="tabtwo">
<label for="tabtwo">Tab Two</label>
<div class="dc-tab">
<h1>Tab Two Content</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<input type="radio" role="tab" name="tabs" id="tabthree">
<label for="tabthree">Tab Three</label>
<div class="dc-tab">
<h1>Tab Three Content</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
<script src='./accordion.js'></script>

You need to prevent the default behaviour of the event in handleLabelClick when tabs have to be closed. Otherwise it just closes them and then the click event continues on its way triggers the default behaviour, which is to open the tab for the clicked label.
function handleLabelClick(event) {
const tab = event.currentTarget.previousElementSibling;
if (tab.checked) {
event.preventDefault();
closeAllTabs();
}
}
Notice also that if you want to compare values, you need to use == or ===, the docs will give you more insight.
Additionally, tab.checked returns a boolean, so it is by itself enough for the conditional check.
Finally, I also made tab a constant, in order to avoid it being set as global variable.

Grid items disappearing on smaller screen sizes [duplicate]

This question already has answers here:
Can't scroll to top of flex item that is overflowing container
(12 answers)
Closed 3 years ago.
I am a very new developer attempting to make a presentable photo-gallery-esque type thing to practice a bit. I have been leaning on CSS grid heavily for my layout...and I am pretty proud of what I have thus far.
I have four cards each containing an image thumbnail, a header, and some text. When the user hovers over any card they have the option to "view" the image which brings up a full screen modal. Everything works as I have intended...however...when I decrease the screen size some cards end up disappearing off screen!
I am very new to CSS grid and I have tried just about everything I know at this point. Please help me cross the finish line!
The code below works perfectly if just copy-pasted into the html portion on codepen.io.
Thank you in advance for any help you may offer!
const buttons = document.querySelectorAll('button');
const modal = document.querySelector('.modal');
const image = modal.querySelector('img');
buttons.forEach(button => {
button.addEventListener('click', handleButtonClick);
});
function handleButtonClick(event) {
const card = event.currentTarget.closest('.card');
const chosenImage = card.querySelector('img').src;
image.src = chosenImage;
modal.classList.add('open');
}
document.addEventListener('click', function(event) {
const target = event.target;
const isModal = target.classList[0] === 'modal';
if (isModal) {
modal.classList.remove('open');
}
});
body {
margin: 0;
height: 100vh;
display: grid;
align-content: center;
background: linear-gradient(0deg, rgba(130, 109, 118, 1) 0%, rgba(172, 52, 52, 1) 100%);
}
.wrapper {
display: grid;
grid-gap: 40px;
justify-content: center;
grid-template-columns: repeat(auto-fit, 300px);
grid-template-rows: 450px;
grid-auto-rows: 450px;
}
.card {
border: solid 5px #ac3434;
border-radius: 0.8rem;
overflow: hidden;
background: #3a363670;
display: grid;
grid-gap: 4px;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(8, 1fr);
}
.img-wrapper {
grid-column: 2 / span 3;
grid-row: 2 / span 3;
display: grid;
}
.img-wrapper img {
height: 100%;
width: 100%;
object-fit: cover;
border: solid 3px #ac3434;
border-radius: 50%;
}
.card-body {
grid-column: 1 / -1;
grid-row: 5 / -1;
padding: 0 10px 0;
font-family: 'Ubuntu', sans-serif;
}
.card-body h2 {
font-family: 'Anton', sans-serif;
}
.card-overlay {
grid-column: 1 / -1;
grid-row: 1 / -1;
background: #ac34347a;
display: grid;
place-items: center center;
transform: translateY(100%);
transition: 0.4s;
}
.card:hover .card-overlay {
transform: translateY(0%);
}
.card-overlay button {
background: none;
color: white;
text-transform: uppercase;
position: relative;
bottom: 78px;
border: solid 3px white;
border-radius: 0.4rem;
font-family: 'Ubuntu', sans-serif;
}
.modal {
height: 100vh;
width: 100vw;
position: fixed;
background: #0000008f;
display: grid;
place-items: center center;
/* Make modal invisible until triggered */
opacity: 0;
/* Makes it so the modal does not log click
events */
pointer-events: none;
}
.open {
/* Displays the modal */
opacity: 1;
pointer-events: all;
}
.modal-inner {
width: 500px;
}
.modal-inner img {
width: 100%;
height: 100%;
object-fit: contain;
}
<div class="wrapper">
<div class="card">
<div class="img-wrapper">
<img src="https://picsum.photos/500">
</div>
<div class="card-body">
<h2>Sunny Walls</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim cupiditate molestias sed ea sit, dolore quos itaque consectetur doloribus at. Dolor accusamus consequuntur perspiciatis! Deserunt?
</p>
</div>
<div class="card-overlay">
<button>View ➜</button>
</div>
</div>
<div class="card">
<div class="img-wrapper">
<img src="https://picsum.photos/500">
</div>
<div class="card-body">
<h2>Kit-the-Kat</h2>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dignissimos quaerat veritatis nobis voluptas minus exercitationem.
</p>
</div>
<div class="card-overlay">
<button>View ➜</button>
</div>
</div>
<div class="card">
<div class="img-wrapper">
<img src="https://picsum.photos/500">
</div>
<div class="card-body">
<h2>Sass in the City</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo accusantium consectetur vel ullam assumenda corrupti id ratione odio, nisi adipisci?
</p>
</div>
<div class="card-overlay">
<button>View ➜</button>
</div>
</div>
<div class="card">
<div class="img-wrapper">
<img src="https://picsum.photos/500">
</div>
<div class="card-body">
<h2>City Things</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint culpa suscipit libero consequatur quod non dolore neque aperiam nihil beatae? Dolores, deserunt.
</p>
</div>
<div class="card-overlay">
<button>View ➜</button>
</div>
</div>
</div>
<div class="modal">
<div class="modal-inner">
<img>
</div>
</div>

You need to use media tags in the css.
Your site is not responsive and when you change screen size it does not resize the components.
https://www.w3schools.com/css/css_rwd_mediaqueries.asp

Image Slider Javascript won't work

I'm currently working on an image slider for my company's new homepage and just can't figure out the error that seems to lie in the javascript part ..
The slider contains 4 images and should, as soon as the last image is reached, begin at the first image again. The problem is that the images are displayed in that order "1-2-1-2-3-4-1-2-3-4..."
Here the code:
$('.slide').first().addClass('active');
$('.slide').hide();
$('.active').show();
$('#next').on('click', nextSlide);
$('#prev').on('click', prevSlide);
// Auto slider
if (options.autoswitch === true) {
setInterval(nextSlide, options.autoswitch_speed);
}
function nextSlide() {
$('.active').removeClass('active').addClass('prevActive');
if ($('.prevActive').is(':last-child')) {
$('.slide').first().addClass('active');
} else {
$('.prevActive').next().addClass('active');
}
$('.prevActive').removeClass('prevActive');
$('.slide').fadeOut(options.speed);
$('.active').fadeIn(options.speed);
}
function prevSlide() {
$('.active').removeClass('active').addClass('prevActive');
if ($('.prevActive').is(':first-child')) {
$('.slide').last().addClass('active');
} else {
$('.prevActive').prev().addClass('active');
}
$('.prevActive').removeClass('prevActive');
$('.slide').fadeOut(options.speed);
$('.active').fadeIn(options.speed);
}
});
and the corresponding CSS:
#slider-container {
height: 600px;
margin: 0 auto;
max-width: 100%;
overflow: hidden;
position: relative;
width: 800px;
}
#sldier {
height: 100%;
width: 100%;
}
#slider .slide img {
height: 100%;
width: auto;
}
#prev, #next {
cursor: pointer;
max-width: 30px;
opacity: 1;
position: absolute;
top: 8%;
-webkit-transition: opacity 0.2s linear;
-moz-transition: opacity 0.2s linear;
-o-transition: opacity 0.2s linear;
transition: opacity 0.2s linear;
z-index: 999;
}
#prev { left: 12px; }
#next { right: 3px; }
#slider-container:hover #prev, #slider-container:hover #next { opacity: .7; }
.slide {
position: absolute;
width: 100%;
}
.slide-copy {
background: #777;
background: rgba(0, 0, 0, .5);
bottom: 0;
color: #fff;
left: 0;
padding: 20px;
position: absolute;
}
#media (min-width: 600px) {
#prev, #next {
top: 45%;
}
}
and the HTML
<div id="slider-container">
<img src="img/arrowprev" id="prev" alt="prev">
<ul id="slider">
<li class="slide">
<div class="slide-copy">
<h2>Placeholder</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</p>
</div>
<img src="img/placeholder" alt="placeholder">
</li>
<li class="slide">
<div class="slide-copy">
<h2>Placeholder2</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</p>
</div>
<img src="img/placeholder" alt="placeholder">
</li>
<li class="slide">
<div class="slide-copy">
<h2>Placeholder3</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</p>
</div>
<img src="img/placeholder" alt="placeholder">
</li>
<li class="slide">
<div class="slide-copy">
<h2>Placeholder4</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</p>
</div>
<img src="img/placeholder" alt="placeholder">
</li>
</ul>
<img src="img/arrownext" id="next" alt="next">
</div>
Maybe it has something to do with
if ($('.prevActive').is(':first-child')) {
$('.slide').last().addClass('active');
I just can't figure out the problem and would appreciate any help.
Thank you in advance :)
This is the page I took as source:
https://www.jqueryscript.net/slider/Tiny-jQuery-Image-Slider-Slideshow-With-Caption-Support.html

I found the fail, the unique thing it wasn't working, is the apply of visibility on each prevActive and active elements on each next/prev actions, so I've added this lines to both functions:
$('.prevActive').hide();
$('.active').show();
(Also I've commented the lines referencing to options variable, as is not defined in the description).
You can see the fiddle working here:
https://jsfiddle.net/a4bssrf5/8/

Make side content float always in the center?

How can i make a slide content always floating on the right side vertically centered? So that when the content is too long the slide will always be at the center?
Here's a screenshots.
Im using this jscrpt
<script>
function toggleDiv(divNum) {
$("#close").hide();
$("#center-content").removeClass("width-400px");
$("#right-content").animate({
right: '-400'
}, 350,
function() {
$("#center-content").addClass("width-400px");
$(".slide").hide();
if ($("#div" + divNum)) {
$("#div" + divNum).show();
}
$("#right-content").animate({
right: '0'
}, 350,
function() {
$("#close").show();
});
});
}
$(document).ready(function() {
$("#close").on("click", function(e) {
$("#right-content").animate({
right: '-400'
}, 350);
$("#center-content").removeClass("width-400px");
$(this).hide()
})
})
</script>
And here's my CSS
.slide {
width: 400px;
height: 100%;
position: absolute;
#right: -400px;
background: #6b4788;
}
#close {
position: absolute;
left: 0;
bottom: 0;
color: white;
font-size: 28px;
font-family: ovo;
z-index: 10;
letter-spacing: 5px;
font-weight: 100;
padding: 43px 104px 34px 116px;
background: #4d3065;
}
body {
overflow: hidden;
}
#main-content {
position: absolute;
width: 100%;
}
#right-content {
position: absolute;
right: -400px;
top: 0;
overflow: hidden;
width: 400px;
height: 100%;
}
Html here to call:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main-content">
<div id="">
<center>
<div id="furugganan">
<center><img src="furugganan-logo.png">
</center>
<div id="container">
<div id="firstrow">
<a onClick="toggleDiv(1)"><img src="alfonsoponce-a.png" id="alfonso">
</a>
<a onClick="toggleDiv(2)"><img src="female-a.png" id="female" style="margin-left: 30px;">
</a>
</div>
</div>
And the right content:
<div id="right-content">
<div id="close">CLOSE (X)</div>
<div class="slide" id="div1">
<center>
<img src="crest.png" style="
/* z-index: -1; */
opacity: 0.1;
position: absolute;
left: 39px;
top: 371px;
height: 354px;
">
<img src="sample-pic.png" style="height: 262px; margin-top: 12%;">
<h3>ALFONSO PONCE ENRILE</h3>
<hr style="width: 90px;margin-top: -7px;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dui quam, feugiat ac metus vitae, egestas iaculis dolor. Aenean nec tempor tellus. Sed vehicula lorem et rhoncus dictum. Suspendisse potenti. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dui quam, feugiat ac metus vitae, egestas iaculis dolor. Aenean nec tempor tellus. Sed vehicula lorem et rhoncus dictum. Suspendisse potenti.</p>
<hr style="width: 90px;margin-top: 22px;">
<h1 style="margin-top: 30px;">LOREM: 1</h1>
<h1>LOREM: 2</h1>
<h1>LOREM: 3</h1>
<h1>LOREM: 4</h1>
<h1>LOREM: 5</h1>
</div>
</div>

Try this:
/*This is the element which holding the side content
by giving the property of overflow, it lets you
float the side element without affecting the content
flow*/
.container-of-side{
margin: 0 auto;
width: 950px;
overflow: auto;
}
.side{
float: left; /*then float the element*/
}

I think setting the #right-content css position to position:fixed; and set
body css { overflow-x : hidden;} fix the probeleme
please see bellow snippet :
function toggleDiv(divNum) {
//removing px word from width size
if(slideWidth)
slideWidth = slideWidth.replace("px","");
else slideWidth=200;
$("#close").hide();
$("#center-content").removeClass("width-slide");
$("#right-content").animate({right:-slideWidth},350,
function(){
$("#center-content").addClass("width-slide");
$(".slide").hide();
if($("#div"+divNum)) {
$("#div"+divNum).show();
}
$("#right-content").animate({right:'0'},350,
function(){
$("#close").show();
});
});
}
var slideWidth = 200;
$(document).ready(function(){
slideWidth = $("#right-content").css("width");
$("#close").on("click",function(e){
$("#right-content").animate({right:-slideWidth},350);
$("#center-content").removeClass("width-slide");
$(this).hide()
})
})
.slide {
width:100%;
height:100%;
position:absolute;
top:0;
background:#d2d2d2;
}
#close {
position:absolute;
right:10px;
top:10px;
z-index:10;
display:none;
}
body {
overflow-x:hidden;
}
#main-content {
position:absolute;
width:100%;
}
#right-content {
position:fixed;
right:-400px;
top:0;
#overflow:hidden;
width:400px;
height:100%;
}
#center-content {
border:1px solid black;
margin:auto;
text-align:center;
z-index:1000;
width:100%;
float:left;
transition:width .35s ease; /* here set the transition */
}
/*class to set width -200px*/
.width-slide {
width: calc(100% - 400px) !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main-content">
<div id="center-content">
<button onClick="toggleDiv(1)">Try it 1</button><div style="height:300px"></div>
<button onClick="toggleDiv(2)">Try it 2</button><div style="height:300px"></div>
<button onClick="toggleDiv(3)">Try it 3</button><div style="height:300px"></div>
</div>
<div id="right-content">
<div id="close">X</div>
<div class="slide" id="div1">content 1</div>
<div class="slide" id="div2">hey I'm content 2</div>
<div class="slide" id="div3">Now it's content 3</div>
<div>
</div>

(Circular) (PowerPoint like) transitions between two div's

I have been searching for hours now. Animate.css seems to be pretty good but it only contains some basic animations like moves and scales. But i need something more difficult.
I would like to create a transition between two div elements. The first div is in the foreground and the second behind it. I would like to achieve some PowerPoint-Like transitions between them. I've posted an example Transition I would like to achieve.

I don't see a way to split or transform a div with text inside in the way shown. But I come up with a similar transition that could give some hints or might be even satisfactory.
How it works
I use an overlay composed of eight triangles. These triangles can be designed in CSS like this:
.triangle-down-left {
width: 0;
height: 0;
border-bottom: 150px solid darkgreen;
border-right: 150px solid transparent;
}
And then arranged like this:
The triangles will appear one after the other to hide the first slide. Then they will disappear in a second turn one after the other to reveal the second slide (two turns is what's different from the OP's transition!). You can use this overlay then again when changing to the third slide or use another one, maybe with other colors for the triangles.
Result
You can check it out and play around in the JSFiddle.
$('#next-slide').click(function() {
var triangles = $('#overlay1 div');
showTriangles(triangles).done(function() {
setTimeout(function() {
$('#slide1').hide();
hideTriangles(triangles);
}, 200);
});
});
function showTriangles(triangles) {
var promises = [];
$(triangles).each(function(i) {
var def = new $.Deferred();
setTimeout(function() {
$(triangles[i]).css('opacity', '1');
def.resolve();
}, 200 * i);
promises.push(def);
})
return $.when.apply(undefined, promises).promise();
}
function hideTriangles(triangles) {
$(triangles).each(function(i) {
setTimeout(function() {
$(triangles[i]).css('opacity', '0');
}, 200 * i);
});
}
#next-slide {
margin-left: 350px;
}
.slide {
position: relative;
background: white;
padding: 20px;
box-sizing: border-box;
overflow: hidden;
}
.slide,
.overlay {
position: absolute;
width: 300px;
height: 300px;
}
#slide1 {
z-index: 2;
}
#slide2 {
z-index: 1;
}
#overlay1 {
z-index: 100;
}
.triangle {
position: absolute;
opacity: 0;
}
.triangle1 {
left: 150px;
}
.triangle2 {
left: 150px;
}
.triangle3 {
left: 150px;
top: 150px;
}
.triangle4 {
top: 150px;
left: 150px;
}
.triangle5 {
top: 150px;
}
.triangle6 {
top: 150px;
}
.triangle-up-right {
width: 0;
height: 0;
border-top: 150px solid white;
border-left: 150px solid transparent;
}
.triangle-up-left {
width: 0;
height: 0;
border-top: 150px solid white;
border-right: 150px solid transparent;
}
.triangle-down-right {
width: 0;
height: 0;
border-bottom: 150px solid white;
border-left: 150px solid transparent;
}
.triangle-down-left {
width: 0;
height: 0;
border-bottom: 150px solid white;
border-right: 150px solid transparent;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slide1" class="slide">
Slide 1.
<br>Now that we know who you are, I know who I am. I'm not a mistake! It all makes sense! I wanna help you. But I can't give you this case, it don't belong to me. Besides, I've already been through too much shit this morning over this case to hand it over
to your dumb ass.
</div>
<div id="overlay1" class="overlay">
<div class="triangle triangle1 triangle-up-left"></div>
<div class="triangle triangle2 triangle-down-right"></div>
<div class="triangle triangle3 triangle-up-right"></div>
<div class="triangle triangle4 triangle-down-left"></div>
<div class="triangle triangle5 triangle-down-right"></div>
<div class="triangle triangle6 triangle-up-left"></div>
<div class="triangle triangle7 triangle-down-left"></div>
<div class="triangle triangle8 triangle-up-right"></div>
</div>
<div id="slide2" class="slide">
Slide 2.
<br>Some wonderful lorem ipsum text. Did you know dolor sit amet? At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing
elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
</div>
<button id="next-slide">Next slide</button>

Try Magic Animations, https://www.minimamente.com/example/magic_animations/. They offer quite a few different animations and transitions.