Prevent the last child from having styled be applied - javascript

I need to prevent the last child from having backgroundColor added. The reset box needs to stay white. I don't want to give the reset box a different class just to prevent it from changing color. I need to have the styles not be added. Any help or push in the right direction would be much appreciated. I tried using :not(:last-child) but that didn't seem to work.
$(".btn").click(function () {
boxColor = $(this).val();
$(".box:not(:last-child)").css('background-color', boxColor);
});
Heres my code:
$(".btn").click(function () {
boxColor = $(this).val();
$(".box").css('background-color', boxColor);
});
$(".reset").click(function () {
$(".box").removeAttr('style');
});
body {
background: lightgrey;
}
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
flex-direction: row;
max-width: 980px;
margin: 0 auto;
}
.col-3 {
flex: 0 0 24.999%;
}
.box {
height: 200px;
max-width: 230px;
margin: 1em;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.box.red {
background: #E53A40;
}
.box.green {
background: #285943;
}
.box.blue {
background: #6AAFE6;
}
.box.white {
background: white;
}
#media (max-width: 768px) {
.col-3 {
flex: 0 0 100%;
}
.box {
max-width: 100%;
margin-bottom: 1em;
}
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Test</title>
</head>
<body>
<div class="container">
<div class="col-3">
<div class="box red">
<button class="btn" value="#E53A40">Red</button>
</div>
</div>
<div class="col-3">
<div class="box green">
<button class="btn" value="#285943">Green</button>
</div>
</div>
<div class="col-3">
<div class="box blue">
<button class="btn" value="#6AAFE6">Blue</button>
</div>
</div>
<div class="col-3">
<div class="box white">
<button class="reset" id="reset">Reset</button>
</div>
</div>
</div>
</body>
</html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


You should just use the :last element selector on your query.
I think you also might want to just set background color to none instead of removing the whole style attribute, just in case you want to add more css styles to the elements in the future that shouldn't be reset.
$(".btn").click(function () {
boxColor = $(this).val();
$(".box:not(:last)").css('background-color', boxColor);
});
$(".reset").click(function () {
$(".box").css('background-color', 'none');
});


You should use :last instead. The :last-child CSS selector consider elements inside the same container:
The :last-child CSS pseudo-class represents the last element among a
group of sibling elements.ref
$(".btn").click(function () {
boxColor = $(this).val();
$(".box:not(:last)").css('background-color', boxColor);
});
$(".reset").click(function () {
$(".box").removeAttr('style');
});
body {
background: lightgrey;
}
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
flex-direction: row;
max-width: 980px;
margin: 0 auto;
}
.col-3 {
flex: 0 0 24.999%;
}
.box {
height: 200px;
max-width: 230px;
margin: 1em;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.box.red {
background: #E53A40;
}
.box.green {
background: #285943;
}
.box.blue {
background: #6AAFE6;
}
.box.white {
background: white;
}
#media (max-width: 768px) {
.col-3 {
flex: 0 0 100%;
}
.box {
max-width: 100%;
margin-bottom: 1em;
}
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Test</title>
</head>
<body>
<div class="container">
<div class="col-3">
<div class="box red">
<button class="btn" value="#E53A40">Red</button>
</div>
</div>
<div class="col-3">
<div class="box green">
<button class="btn" value="#285943">Green</button>
</div>
</div>
<div class="col-3">
<div class="box blue">
<button class="btn" value="#6AAFE6">Blue</button>
</div>
</div>
<div class="col-3">
<div class="box white">
<button class="reset" id="reset">Reset</button>
</div>
</div>
</div>
</body>
</html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Related

How to make cool scroll transition

im making my profile websites want make scroll transition like here https://olaolu.dev,how can I do that?There will be 5 pages, and transition between them should be like in link above, also it should relater to buttons as well, when I press button it should have this scroll effect too
my html
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="/b/cs.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.9.1/font/bootstrap-icons.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>
<section class="section-top active">
<div class="details">
<div class="top">
<h2>Faxraddin</h2>
<div class="lists">
<button><i class="bi bi-list-check"></i></button>
</div>
</div>
<div class="first-info">
<div class="first-sec">
<h1>Frontend</br> Developer.</h1>
<h3 class="profession-info">I like to craft solid and scalable frontend products with great user experiences.</h3>
</div>
<img class="my-img" src="/b/images/Screenshot 2022-11-04 at 19.35.20.png">
</div>
<div class="some-info">
<div class="a1">
<span>Highly skilled at progressive
enhancement, design systems &
UI Engineering.
</span>
<span>Over a decade of experience
building products for clients
across several countries.
</span>
</div>
<div class="btn-container">
<ul>
<button class="btn active"><i class="bi bi-app"></i></button>
<button class="btn"><i class="bi bi-diamond-fill"></i></button>
<button class="btn"><i class="bi bi-diamond-fill"></i></button>
<button class="btn"><i class="bi bi-diamond-fill"></i></button>
<button class="btn"><i class="bi bi-diamond-fill"></i></button>
</ul>
</div>
</div>
</div>
</section>
<section class="what-do" id="s2">
</section>
<script src="/b/js.js"></script>
</body>
</html>

HTML + CSS can be achieved, but the scrolling effect is slow
body {
margin: 0;
height: 100vh;
overflow-x: hidden;
}
.wrap {
scroll-behavior: smooth;
overflow-x: hidden;
height: 100%;
scroll-snap-type: y mandatory;
}
.section {
color: #fff;
font-size: 30px;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
scroll-snap-align: start;
}
.section1 {
background-color: #111;
}
.section2 {
background-color: #333;
}
.section3 {
background-color: #555;
}
.section4 {
background-color: #777;
}
.section5 {
background-color: #999;
}
.point {
position: absolute;
bottom: 30px;
right: 30px;
display: flex;
flex-direction: column;
}
.point a {
display: block;
width: 8px;
height: 8px;
margin: 8px 0;
background-color: #fff;
}
<div class="wrap">
<section id="s1" class="section section1">page 1</section>
<section id="s2" class="section section2">page 2</section>
<section id="s3" class="section section3">page 3</section>
<section id="s4" class="section section4">page 4</section>
<section id="s5" class="section section5">page 5</section>
<div class="point">
</div>
</div>

Height of one div affecting another [duplicate]

This question already has answers here:
How to disable equal height columns in Flexbox?
(4 answers)
Closed 1 year ago.
I have 2 divs both with the same class and when I add content to one the height of the other also changes.
function addContent() {
document.getElementsByClassName('list')[1].innerHTML += "<h1>test</h1>"
}
.container {
width: 79%;
margin: 0 auto;
}
.bansContainer {
display: flex;
margin: 25px 0;
overflow: auto;
justify-content: space-between;
}
.list {
background-color: #436935;
}
<div class="container">
<div class="bansContainer">
<div class="list">
<h1>
left
</h1>
</div>
<div>
<h1 class="list">
right
</h1>
<button onclick=addContent()>Click</button>
</div>
</div>
</div>
How can I change/update it in a way that only the height of the div with content being added changes?

function addContent() {
document.getElementsByClassName('list')[1].innerHTML += "<h1>test</h1>"
}
.container {
width: 79%;
margin: 0 auto;
}
.bansContainer {
display: flex;
margin: 25px 0;
overflow: auto;
justify-content: space-between;
}
.list {
background-color: #436935;
align-self: flex-start;
}
<div class="container">
<div class="bansContainer">
<div class="list">
<h1>
left
</h1>
</div>
<div>
<h1 class="list">
right
</h1>
<button onclick=addContent()>Click</button>
</div>
</div>
</div>

It is because you haven't specified height on the first column and it's continuing to adapt the height of its parent div aka bansContainer. So here are two approaches. One is you add align-self: flex-start; or you specify a height on the column.
function addContent() {
document.getElementsByClassName('list')[1].innerHTML += "<h1>test</h1>"
}
.container {
width: 79%;
margin: 0 auto;
}
.bansContainer {
display: flex;
margin: 25px 0;
overflow: auto;
justify-content: space-between;
}
.list {
background-color: #436935;
/*align-self: flex-start;*/
}
.n-h {
height: fit-content;
}
<div class="container">
<div class="bansContainer">
<div class="list n-h">
<h1>
left
</h1>
</div>
<div>
<h1 class="list">
right
</h1>
<button onclick=addContent()>Click</button>
</div>
</div>
</div>

How can I flip DIVs on click, with interaction between each other (one flips open, the other closes)?

I'm new to web development and I challenged myself with this task to master JavaScript. My task is to make different divs on the page flippable on click and interact with each other based on the current status.
I would like to learn two more things:
shorten/simplify the current JS code (if possible)
Have the divs interact with each other: when 'on click' the current one opens, but if any other of them was already open, it'll close. So only one div stay open at a time.
My current code (codepen: https://codepen.io/Loomeus/pen/RwKELbx):
HTML
var card = document.querySelector('.card');
card.addEventListener( 'click', function() {
card.classList.toggle('is-flipped');
});
var card2 = document.querySelector('.card2');
card2.addEventListener( 'click', function() {
card2.classList.toggle('is-flipped');
});
var card3 = document.querySelector('.card3');
card3.addEventListener( 'click', function() {
card3.classList.toggle('is-flipped');
});
#media screen and (min-width:650px){
.flipping {display: flex;
justify-content:space-between;
}
}
.scene, .scene2, .scene3 {
width: 200px;
height: 200px;
perspective: 1200px;
margin-left: auto;
margin-right: auto;
}
.card, .card2, .card3 {
width: 200px;
height: 200px;
position: relative;
transition: transform 1.5s;
transform-style: preserve-3d;
}
.card__face, .card__face2, .card__face3 {
position: absolute;
width: 200px;
height: 200px;
backface-visibility: hidden;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
}
.card__face--front, .card__face--front2, .card__face--front3 {
background: red;
}
.card__face--back, .card__face--back2, .card__face--back3 {
background: blue;
transform: rotateY( 180deg );
}
.card.is-flipped, .card2.is-flipped, .card3.is-flipped {
transform: rotateY(180deg);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script defer src="/script.js"></script>
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<section class="flipping">
<div class="scene">
<div class="card">
<div class="card__face card__face--front">Front of first div</div>
<div class="card__face card__face--back">Back of first div</div>
</div>
</div>
<br>
<div class="scene2">
<div class="card2">
<div class="card__face2 card__face--front2">Front of second div</div>
<div class="card__face2 card__face--back2">Back of second div</div>
</div>
</div>
<br>
<div class="scene3">
<div class="card3">
<div class="card__face3 card__face--front3">Front of last div</div>
<div class="card__face3 card__face--back3">Back of last div</div>
</div>
</div>
</section
</body>
</html>
Would you be able to help me out?
Thanks!

You could simplify your code by using a common card class on all your cards. Then, you would need to remove the is-flipped class from all cards before flipping the clicked one:
var cards = document.querySelectorAll('.card');
cards.forEach(function (card) {
card.addEventListener('click', function () {
// Remove the class on all, toggle the clicked one
cards.forEach(function (c) {
if (c !== card) c.classList.remove('is-flipped');
else c.classList.toggle('is-flipped');
});
});
});
Fixed CodePen
Stack Snippet:
var cards = document.querySelectorAll('.card');
cards.forEach(function (card) {
card.addEventListener('click', function () {
// Remove the class on all, except the clicked one
cards.forEach(function (c) {
if (c !== card) c.classList.remove('is-flipped');
else c.classList.toggle('is-flipped');
});
});
});
#media screen and (min-width:400px){
.flipping {display: flex;
justify-content:space-between;
}
}
.scene, .scene2, .scene3 {
width: 100px;
height: 100px;
perspective: 1200px;
margin-left: auto;
margin-right: auto;
}
.card {
width: 100px;
height: 100px;
position: relative;
transition: transform 1.5s;
transform-style: preserve-3d;
}
.card__face, .card__face2, .card__face3 {
position: absolute;
width: 100px;
height: 100px;
backface-visibility: hidden;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
}
.card__face--front, .card__face--front2, .card__face--front3 {
background: red;
}
.card__face--back, .card__face--back2, .card__face--back3 {
background: blue;
transform: rotateY( 180deg );
}
.card.is-flipped, .card2.is-flipped, .card3.is-flipped {
transform: rotateY(180deg);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script defer src="/script.js"></script>
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<section class="flipping">
<div class="scene">
<div class="card">
<div class="card__face card__face--front">Front of first div</div>
<div class="card__face card__face--back">Back of first div</div>
</div>
</div>
<br>
<div class="scene2">
<div class="card">
<div class="card__face2 card__face--front2">Front of second div</div>
<div class="card__face2 card__face--back2">Back of second div</div>
</div>
</div>
<br>
<div class="scene3">
<div class="card">
<div class="card__face3 card__face--front3">Front of last div</div>
<div class="card__face3 card__face--back3">Back of last div</div>
</div>
</div>
</section
</body>
</html>

Slide down and up function problem with flex: 1

$(".div3Btn").click(function() {
$(".div2").show("slide", {
direction: "up"
}, 5000);
});
.div1 {
display: flex;
height: 100%;
flex-direction: column;
background-color: #919191;
}
.div2 {
display: flex;
overflow-y: auto;
flex: 1;
height: 500px;
background-color: #a8d810;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="div1">
<div class="div2" style="display: none;">hjghjgjghj</div>
<div class="div3">
<button class="div3Btn">Click me!</button>
</div>
</div>
I have a question about using the show()/hide() function with time and direction. As the above snippet shows, if the button was clicked, it will immediately jump to the bottom, but not following the div1 to slide down. Then how can I fix it if I want to use that function?
$(".div3Btn").click(function() {
$(".div2").slideToggle(5000);
});
.div1 {
display: flex;
height: 100%;
flex-direction: column;
background-color: #919191;
}
.div2 {
display: flex;
overflow-y: auto;
flex: 1;
height: 500px;
background-color: #a8d810;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="div1">
<div class="div2" style="display: none;">hjghjgjghj</div>
<div class="div3">
<button class="div3Btn">Click me!</button>
</div>
</div>
(The problem is quite similar to using Firefox to run the link function)
Another question about slide down and up is when I use flex: 1 for some divs, and then use the slideToggle() function, it does not have any slide down or up animation of the div. How to fix it if I must use flex: 1 for divs?

I think you've formatted the .show() function wrong. Try .show( duration [, easing ] [, complete ] )
$(".div3Btn").click(function() {
$(".div2").show(5000, "swing", function() {
// Animation complete.
});
});
.div1 {
display: flex;
height: 100%;
flex-direction: column;
background-color: #919191;
}
.div2 {
display: flex;
overflow-y: auto;
flex: 1;
height: 500px;
background-color: #a8d810;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="div1">
<div id="div2" class="div2" style="display: none;">hjghjgjghj</div>
<div class="div3">
<button id="div3Btn" class="div3Btn">Click me!</button>
</div>
</div>

Responsive jQuery photo gallery with some features

I need your help with creating jquery photo gallery. I need to make this page responsive. I need to add next and previous buttons. I also need to add stop and resume buttons. But most important, I need to make it responsive.
Thanks for any feedback.
Thank you very much.
My code by far is below.
$(".thumb").click(function () {
$("#large img").attr("src", $(this).children("img").attr("src"));
$(".active").removeClass("active");
$(this).addClass("active");
});
setInterval(function () {
var $dalsi = $(".active").next();
if($dalsi.length == 1) {
$dalsi.click();
}
else {
$("#thumbnails .thumb:first-child").click();
}
}, 1000);
main {
max-width: 1024px;
margin: 0 auto;
}
#large {
width: 100%;
height: 400px;
overflow: hidden;
}
#thumbnails {
width: 100%;
}
#large img {
height: 100%;
display: block;
margin: 0 auto;
}
.thumb {
height: 200px;
width: 24%;
box-sizing: border-box;
display: inline-block;
overflow: hidden;
}
.thumb img {
height: 100%;
width: auto;
margin: 0 auto;
}
.thumb.active {
border: solid 1px red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<main>
<div id="large">
<img src="http://w03000.mycloudware.net/wp-content/uploads/2014/08/Brambora.jpg">
</div>
<div id="thumbnails">
<div class="thumb active">
<img src="http://w03000.mycloudware.net/wp-content/uploads/2014/08/Brambora.jpg">
</div>
<div class="thumb">
<img src="http://wiki.rvp.cz/#api/deki/files/12941/=brambora_hliza.jpg">
</div>
<div class="thumb">
<img src="http://instory.cz/content/images/59/9d/599d2fbda3daf-985.jpg">
</div>
<div class="thumb">
<img src="http://www.bonella.cz/public/userfiles/obrazky-clanky/hubnuti/diety/brambora.jpg">
</div>
</div>
</main>
<script src="jquery-3.3.1.js"></script>
<script src="script.js"></script>
</body>
</html>
Thanks for help.

Categories

Resources