How to bring a div back to its original height - javascript

Any idea why this overflowing is happening? The image max-width and max-height are both set to 100% and only the original div extended 2x its height but not width?
The images stacking below each other is another issue
Code here
var gridItems = document.querySelectorAll('.grid-item');
gridItems.forEach(function(item) {
item.addEventListener('click', function() {
item.classList.add('no-hover');
item.classList.add('transform-active');
item.classList.add('gone');
});
});
document.querySelectorAll('.grid-item').forEach(function(element) {
element.addEventListener('click', function() {
var elem = document.createElement("img");
elem.classList.add("revealed")
elem.src = "https://cdn.discordapp.com/attachments/1051253642876952636/1069628656038719608/image-removebg-preview_1.png"
document.querySelector(".gone").appendChild(elem);
});
});
.grid-container {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-gap: 15px;
height: 600px;
width: 600px;
margin: auto;
position: relative;
top: 0;
bottom: 0;
left: 0;
right: 0;
float: left;
}
.grid-item {
border-radius: 12px;
background-color: #3d499b;
box-shadow: 5.5px 5.5px #1e286c;
border: 2px solid black;
transition: all 0.3s ease-in-out;
}
.grid-item:not(.no-hover):hover {
animation: raise 0.2s ease-in-out;
background-color: #5463cd;
}
.grid-item.transform-active {
animation: embiggen 0.2s ease-out 0s 1;
}
#keyframes raise {
0%,100% {
transform: translateY(0px);
}
50% {
transform: translateY(-5px);
}
}
#keyframes embiggen {
100% {
transform: scale(1.1);
}
}
.grid-item.gone {
visibility: hidden;
}
.revealed {
max-width: 100%;
max-height: 100%;
visibility: visible;
}
<div class="grid-container">
<div class="grid-item" id="1"></div>
<div class="grid-item" id="2"></div>
<div class="grid-item" id="3"></div>
<div class="grid-item" id="4"></div>
<div class="grid-item" id="5"></div>
<div class="grid-item" id="6"></div>
<div class="grid-item" id="7"></div>
<div class="grid-item" id="8"></div>
<div class="grid-item" id="9"></div>
<div class="grid-item" id="10"></div>
<div class="grid-item" id="11"></div>
<div class="grid-item" id="12"></div>
<div class="grid-item" id="13"></div>
<div class="grid-item" id="14"></div>
<div class="grid-item" id="15"></div>
<div class="grid-item" id="16"></div>
<div class="grid-item" id="17"></div>
<div class="grid-item" id="18"></div>
<div class="grid-item" id="19"></div>
<div class="grid-item" id="20"></div>
<div class="grid-item" id="21"></div>
<div class="grid-item" id="22"></div>
<div class="grid-item" id="23"></div>
<div class="grid-item" id="24"></div>
<div class="grid-item" id="25"></div>
</div>

Related

why not work multiple Thumbs gallery with swipre on one page

I have a page with three slides (pageSwiper).
The scenario is that when each of these slides is clicked, a modal will open and there will be a "Thumbs gallery" inside each modal (mySwiper2 , mySwiper).
But due to the existence of several "Thumbs gallery", these (swiper-button-next, swiper-button-prev) items do not work.
If you have a suggestion for solving this problem, thank you for letting me know.
Thank you in advance for your cooperation.
var swiperpage = new Swiper(".pageSwiper", {
spaceBetween: 30,
effect: "fade",
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
pagination: {
el: ".swiper-pagination",
clickable: true,
},
});
var swiper = new Swiper(".mySwiper", {
loop: true,
spaceBetween: 10,
slidesPerView: 4,
freeMode: true,
watchSlidesProgress: true,
});
var swiper2 = new Swiper(".mySwiper2", {
loop: true,
spaceBetween: 10,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
thumbs: {
swiper: swiper,
},
});
.page--slider{
padding: 0 56px;
height: 600px;
margin-bottom: 50px;
padding: 2rem;
}
.pageSwiper .swiper {
width: 100%;
height: 100%;
}
.pageSwiper .swiper-slide {
background-position: center;
background-size: cover;
}
.pageSwiper .swiper-slide img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.pageSwiper .swiper-button-next,
.pageSwiper .swiper-button-prev{
color: rgba(0,0,0,.8) !important;
}
.pageSwiper .swiper-button-next:after,
.pageSwiper .swiper-button-prev:after {
font-size: 40px !important;
font-weight: bolder !important;
}
.pageSwiper .swiper-pagination-bullet {
width: 13px !important;
height: 13px !important;
background: rgba(0,0,0,.5) !important;
}
.pageSwiper .swiper-pagination-bullet:hover{
background: rgba(0,0,0,.7) !important;
}
.pageSwiper .swiper-pagination-bullet-active{
background: rgba(0,0,0,.9) !important;
}
/* The Modal */
.modal {
display: none;
position: fixed;
z-index: 1100;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0,0,0,0.8);
border: 2px solid red;
}
.modal-content {
-webkit-animation: slide-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: slide-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
width: 50%;
height: 450px;
max-height: 90%;
padding: 0 40px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
border: 2px solid green;
background-color: var(--cw);
border-radius:8px;
padding: 13px;
display: flex;
flex-direction: column;
}
.modal-content-slider{
width: 100%;
height: 85%;
border: 2px solid black;
}
.modal-content-buttons{
width: 100%;
height: 15%;
border: 2px solid red;
}
.modal-content-close{
width:40px;
height:40px;
background-color: black;
border-radius:50%;
margin-left: auto;
margin-top: 0.5rem;
position: relative;
}
.close {
color: var(--cw);
position: absolute;
text-shadow: 0px 1px 2px rgb(0 0 0 / 90%);
font-size: 40px;
font-weight: 100;
cursor: pointer;
left: 50%;
top: 50%;
margin: auto 0;
transform: translate(-50%, -50%);
}
.close:hover{
opacity: .5;
}
/* swiper Modal */
.modal .swiper {
width: 100%;
height: 100%;
}
.modal .swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
.modal .swiper-slide img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.modal .swiper {
width: 100%;
height: 300px;
margin-left: auto;
margin-right: auto;
}
.modal .swiper-slide {
background-size: cover;
background-position: center;
}
.modal .mySwiper2 {
height: 80%;
width: 100%;
}
.modal .mySwiper {
height: 20%;
box-sizing: border-box;
padding: 10px 0;
}
.modal .mySwiper .swiper-slide {
width: 25%;
height: 100%;
opacity: 0.4;
}
.modal .mySwiper .swiper-slide-thumb-active {
opacity: 1;
}
.modal .swiper-slide img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
<div>
<div class="page--slider">
<div class="swiper pageSwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div>
<img src="https://swiperjs.com/demos/images/nature-8.jpg" class="myBtn_multi"/>
</div>
</div>
<div class="swiper-slide">
<div>
<img src="https://swiperjs.com/demos/images/nature-12.jpg" class="myBtn_multi"/>
</div>
</div>
<div class="swiper-slide">
<div>
<img src="https://swiperjs.com/demos/images/nature-10.jpg" class="myBtn_multi"/>
</div>
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-pagination"></div>
</div>
</div>
</div>
<!-- The Modals -->
<div>
<div class="modal modal_multi">
<div class="modal-content">
<div class="modal-content-slider">
<div style="--swiper-navigation-color: #fff; --swiper-pagination-color: #fff" class="swiper mySwiper2">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="https://swiperjs.com/demos/images/nature-1.jpg" />
</div>
<div class="swiper-slide">
<img src="https://swiperjs.com/demos/images/nature-2.jpg" />
</div>
<div class="swiper-slide">
<img src="https://swiperjs.com/demos/images/nature-3.jpg" />
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
<div thumbsSlider="" class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="https://swiperjs.com/demos/images/nature-1.jpg" />
</div>
<div class="swiper-slide">
<img src="https://swiperjs.com/demos/images/nature-2.jpg" />
</div>
<div class="swiper-slide">
<img src="https://swiperjs.com/demos/images/nature-3.jpg" />
</div>
</div>
</div>
</div>
<div class="modal-content-buttons">
<div class="modal-content-close">
<span class="close close_multi">×</span>
</div>
</div>
</div>
</div>
<div class="modal modal_multi">
<div class="modal-content">
<div class="modal-content-slider">
<div style="--swiper-navigation-color: #fff; --swiper-pagination-color: #fff" class="swiper mySwiper2">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="https://swiperjs.com/demos/images/nature-1.jpg" />
</div>
<div class="swiper-slide">
<img src="https://swiperjs.com/demos/images/nature-2.jpg" />
</div>
<div class="swiper-slide">
<img src="https://swiperjs.com/demos/images/nature-3.jpg" />
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
<div thumbsSlider="" class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="https://swiperjs.com/demos/images/nature-1.jpg" />
</div>
<div class="swiper-slide">
<img src="https://swiperjs.com/demos/images/nature-2.jpg" />
</div>
<div class="swiper-slide">
<img src="https://swiperjs.com/demos/images/nature-3.jpg" />
</div>
</div>
</div>
</div>
<div class="modal-content-buttons">
<div class="modal-content-close">
<span class="close close_multi">×</span>
</div>
</div>
</div>
</div>
<div class="modal modal_multi">
<div class="modal-content">
<div class="modal-content-slider">
<div style="--swiper-navigation-color: #fff; --swiper-pagination-color: #fff" class="swiper mySwiper2">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="https://swiperjs.com/demos/images/nature-1.jpg" />
</div>
<div class="swiper-slide">
<img src="https://swiperjs.com/demos/images/nature-2.jpg" />
</div>
<div class="swiper-slide">
<img src="https://swiperjs.com/demos/images/nature-3.jpg" />
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
<div thumbsSlider="" class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="https://swiperjs.com/demos/images/nature-1.jpg" />
</div>
<div class="swiper-slide">
<img src="https://swiperjs.com/demos/images/nature-2.jpg" />
</div>
<div class="swiper-slide">
<img src="https://swiperjs.com/demos/images/nature-3.jpg" />
</div>
</div>
</div>
</div>
<div class="modal-content-buttons">
<div class="modal-content-close">
<span class="close close_multi">×</span>
</div>
</div>
</div>
</div>
</div>

Here is the answer to this question:
https://raddy.co.uk/blog/multiple-instances-of-swiperjs-on-the-same-page-with-the-same-settings/
Create a few sliders with the same class name of “swiper-container” ( you can add as many as you want). Your code should look similar to mine:
HTML:
<div class="swiper-container">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
<div class="swiper-container">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
<div class="swiper-container">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
Now we need to select the class name "swiper-container", loop through each available element (example: div, section) on the page and then add a new unique class name to each to initialize unique Swipers.
const myCustomSlider = document.querySelectorAll('.swiper-container');
for( i=0; i< myCustomSlider.length; i++ ) {
myCustomSlider[i].classList.add('swiper-container-' + i);
var slider = new Swiper('.swiper-container-' + i, {
/* Options */
});
}

How to get div height based on image height?

I have some flip boxes that need a specific height. Otherwise, it does not work.
I gave them height: 220px; for testing. But this value shouldn't be 220px, it always should be the actual proportional image height.
How is it possible to code that? Maybe with a jQuery function? Like: Get the height of the image, and add it as CSS for the container?
This is my code:
body {
font-family: Arial, Helvetica, sans-serif;
}
img {
width: 100%;
display: block;
}
#container {
display: flex;
flex-wrap: wrap;
}
.flip_box {
background-color: transparent;
width: 50%;
height: 220px;
perspective: 1000px;
}
.flip_box_inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}
.flip_box:hover .flip_box_inner {
transform: rotateY(180deg);
}
.flip_box_front,
.flip_box_back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.flip_box_front {
background-color: #bbb;
color: black;
}
.flip_box_back {
background-color: dodgerblue;
color: white;
transform: rotateY(180deg);
}
<div id="container">
<div class="flip_box">
<div class="flip_box_inner">
<div class="flip_box_front">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
</div>
<div class="flip_box_back">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
</div>
</div>
</div>
<div class="flip_box">
<div class="flip_box_inner">
<div class="flip_box_front">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
</div>
<div class="flip_box_back">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
</div>
</div>
</div>
<div class="flip_box">
<div class="flip_box_inner">
<div class="flip_box_front">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
</div>
<div class="flip_box_back">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
</div>
</div>
</div>
<div class="flip_box">
<div class="flip_box_inner">
<div class="flip_box_front">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
</div>
<div class="flip_box_back">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
</div>
</div>
</div>
</div>

This can be possible without JavaScript. It's enough to not specify height for <div> and it will stretch to the height of the image.
body {
font-family: Arial, Helvetica, sans-serif;
}
img {
width: 100%;
display: block;
}
#container {
display: flex;
flex-wrap: wrap;
}
.flip_box {
background-color: transparent;
width: 50%;
perspective: 1000px;
}
.flip_box_inner {
position: relative;
width: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}
.flip_box:hover .flip_box_inner {
transform: rotateY(180deg);
}
.flip_box_front,
.flip_box_back {
width: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.flip_box_front {
position: relative;
background-color: #bbb;
color: black;
}
.flip_box_back {
position: absolute;
background-color: dodgerblue;
color: white;
transform: translate(0, -100%) rotateY(180deg);
}
<div id="container">
<div class="flip_box">
<div class="flip_box_inner">
<div class="flip_box_front">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
</div>
<div class="flip_box_back">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
</div>
</div>
</div>
<div class="flip_box">
<div class="flip_box_inner">
<div class="flip_box_front">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
</div>
<div class="flip_box_back">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
</div>
</div>
</div>
<div class="flip_box">
<div class="flip_box_inner">
<div class="flip_box_front">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
</div>
<div class="flip_box_back">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
</div>
</div>
</div>
<div class="flip_box">
<div class="flip_box_inner">
<div class="flip_box_front">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
</div>
<div class="flip_box_back">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
</div>
</div>
</div>
</div>

You can loop through the containers, search for the image and retrieve the height, then assign it back to the container.
jQuery( window ).on( "load", function($) {
$( ".flip_box" ).each(function( index ) {
let imgHeight = $(this).find('img').height();
$(this).css('height', imgHeight + 'px')
});
});
But note that if images have different heights, it might cause a problem because you are only using the height of a single image from the container

After a slight delay of waiting for the photos to load, you can iterate over the flip boxes, locate their images, and set their heights to match the image height.
const resizeFlipBoxes = () => {
document.querySelectorAll('.flip_box').forEach(flipBox => {
flipBox.style.height = `${flipBox.querySelector('img').offsetHeight}px`;
});
};
setTimeout(resizeFlipBoxes, 1);
window.addEventListener('resize', resizeFlipBoxes);
body {
font-family: Arial, Helvetica, sans-serif;
}
img {
width: 100%;
display: block;
}
#container {
display: flex;
flex-wrap: wrap;
}
.flip_box {
background-color: transparent;
width: 50%;
perspective: 1000px;
}
.flip_box_inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}
.flip_box:hover .flip_box_inner {
transform: rotateY(180deg);
}
.flip_box_front,
.flip_box_back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.flip_box_front {
background-color: #bbb;
color: black;
}
.flip_box_back {
background-color: dodgerblue;
color: white;
transform: rotateY(180deg);
}
<div id="container">
<div class="flip_box">
<div class="flip_box_inner">
<div class="flip_box_front">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
</div>
<div class="flip_box_back">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
</div>
</div>
</div>
<div class="flip_box">
<div class="flip_box_inner">
<div class="flip_box_front">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
</div>
<div class="flip_box_back">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
</div>
</div>
</div>
<div class="flip_box">
<div class="flip_box_inner">
<div class="flip_box_front">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
</div>
<div class="flip_box_back">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
</div>
</div>
</div>
<div class="flip_box">
<div class="flip_box_inner">
<div class="flip_box_front">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
</div>
<div class="flip_box_back">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
</div>
</div>
</div>
</div>

Flip Menu stayed always in center horizontally (when i open or close)

My code :
var currentPage = 0;
$('.book')
.on('click', '.active', nextPage)
.on('click', '.flipped', prevPage);
$('.book').hammer().on("swipeleft", nextPage);
$('.book').hammer().on("swiperight", prevPage);
function prevPage() {
$('.flipped')
.last()
.removeClass('flipped')
.addClass('active')
.siblings('.page')
.removeClass('active')
$('.scene')
.addClass('right-set').css("left", "0px");
}
function nextPage() {
$('.active')
.removeClass('active')
.addClass('flipped')
.next('.page')
.addClass('active')
.siblings()
$('.scene')
.addClass('left-set').css("left", "490px");
}
.scene {
width: 500px;
height: 500px;
margin: auto;
-webkit-perspective: 2000px;
perspective: 2000px;
left:0;
right:0;
top:0;
bottom:0;
}
.book {
position: relative;
width: 100%;
height: 100%;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.page {
cursor: pointer;
position: absolute;
color: black;
width: 100%;
height: 100%;
-webkit-transition: 1.5s -webkit-transform;
transition: 1.5s transform;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-origin: left center;
-ms-transform-origin: left center;
transform-origin: left center;
}
.front,
.back {
position: absolute;
width: 100%;
height: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.back {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.page.active {
z-index: 1;
}
.page.flipped {
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}
.page.flipped:last-of-type {
z-index: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class-col-md-12>
<div class="scene" id="scene">
<article class="book">
<section class="page active">
<div class="front">
<img src="http://placehold.it/500x500.png">
</div>
<div class="back">
<img src="http://placehold.it/500x500.png">
</div>
</section>
<section class="page">
<div class="front">
<img src="http://placehold.it/500x500.png">
</div>
<div class="back">
<img src="http://placehold.it/500x500.png">
</div>
</section>
<section class="page">
<div class="front">
<img src="http://placehold.it/500x500.png">
</div>
<div class="back">
<img src="http://placehold.it/500x500.png">
</div>
</section>
<section class="page">
<div class="front">
<img src="http://placehold.it/500x500.png">
</div>
<div class="back">
<img src="http://placehold.it/500x500.png">
</div>
</section>
<section class="page">
<div class="front">
<img src="http://placehold.it/500x500.png">
</div>
<div class="back">
<img src="http://placehold.it/500x500.png">
</div>
</section>
<section class="page right-set">
<div class="front">
<img src="http://placehold.it/500x500.png">
</div>
<div class="back">
<img src="http://placehold.it/500x500.png">
</div>
</section>
</article>
</div>
</div>
When we clicked on single image it will open and double image will be shown.
When there is double image the whole block should be center and on single image it will also in center horizontally.
This is a flip menu and it is clickable.
Is it possible to center this menu when it is opened and closed ?

Update Your JS Functions Like This
function prevPage() {
$('.flipped')
.last()
.removeClass('flipped')
.addClass('active')
.siblings('.page')
.removeClass('active')
$('.scene')
.addClass('right-set').css("left", "0px");
$('#scene').animate({
'margin-left': '50%'
});
if ($('section.page:nth-child(1)').hasClass('active') == true) {
$('#scene').animate({
'left': '0px',
'margin-left': '35%'
});
}
}
function nextPage() {
$('.active')
.removeClass('active')
.addClass('flipped')
.next('.page')
.addClass('active')
.siblings()
$('.scene')
.addClass('left-set').css("left", "490px");
$('#scene').animate({
'margin-left': '50%'
});
if ($('.right-set').hasClass('flipped') == true) {
$('#scene').animate({
'left': '0px',
'margin-left': '65%'
});
}
}

Content Slider stop and start in accordion

I have code below for a Pure CSS content slider in an accordion I have created. Is it possible to start and stop the Content Slider when the accordion is opened and closed? Currently the Content Slider keeps running even if the accordion is closed. Is this possible with Pure CSS? If not would this be possible with Vanilla JavaScript (no JQuery). Anything helps, cheers.
.wrapper {
max-width: 960px;
margin: 0 auto;
}
/* Acordeon styles */
.tab {
position: relative;
margin-bottom: 1px;
width: 100%;
overflow: hidden;
}
.bold {
font-weight:bold;
color: #005bab;
}
.top {
margin-top:-20px;
text-align: center;
font-size:13px;
}
.input {
position: absolute;
opacity: 0;
z-index: -1;
}
.label {
position: relative;
text-align: center;
display: block;
padding: 0 0 0 1em;
color: #005bab;
background: #e2ecf6;
font-size: 14px;
font-family: Verdana;
font-weight: bold;
line-height: 6;
cursor: pointer;
}
.label:hover {
background-color: #d2e2ef;
}
.tab-content {
max-height: 0;
overflow: hidden;
padding: 0px;
-webkit-transition: max-height .5s;
-o-transition: max-height .5s;
transition: max-height .5s;
padding-left: 35px;
background: #dce7f2;
}
.tab-content .container {
padding: 1em;
margin: 0;
opacity: 0;
transform: scale(0.75);
-webkit-transition: transform 0.75s, opacity .75s;
-o-transition: transform 0.75s, opacity .75s;
transition: transform 0.75s, opacity .75s;
background: #f4f8fc;
}
/* :checked */
.input:checked~.tab-content {
max-height: 35em;
}
.input:checked~.tab-content .container {
transform: scale(1);
opacity: 1;
}
/* Icon */
.label::after {
position: absolute;
left: 0;
top: 0;
display: block;
width: 3em;
height: 3em;
line-height: 3;
text-align: center;
-webkit-transition: all .35s;
-o-transition: all .35s;
transition: all .35s;
}
.input[type=checkbox]+.label::after {
content: "+";
}
.input[type=radio]+.label::after {
content: "";
}
.input[type=checkbox]:checked+.label::after {
transform: rotate(315deg);
}
.input[type=radio]:checked+.label::after {
transform: rotateX(180deg);
}
.bottombar {
content: "";
display: block;
height: 1em;
width: 100%;
background-color: #00688B;
}
/* all position:absolute removed */
#scroller {
overflow:hidden;
}
#scroller .innerScrollArea {
}
#scroller ul {
padding: 0;
position: relative;
display:flex;/* UPDATE */
}
#scroller li {
padding: 0;
list-style-type: none;
}
.circle {
width: 130px;
height: 130px;
position: relative;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
border-radius: 50%;
background-color:transparent;
border-style:solid;
border-width:5px;
border-color:#006850;
}
.circle-text {
color: #1f497d;
font-family:Verdana;
font-size: 12px;
text-align: center;
width: 200px;
top: 45px;
margin-left:-35px;
bottom: 0;
position: absolute;
z-index: 99;
}
.circleinv{
width: 130px;
height: 130px;
position: relative;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
border-radius: 50%;
background-color:transparent;
border-style:solid;
border-width:5px;
border-color:transparent;
}
.arrow {
width:145px;
height:45px;
}
.arrowinv {
visibility:hidden;
width:145px;
height:50px;
}
.flipimage {
width:145px;
height:45px;
-moz-transform: scaleY(-1);
-webkit-transform: scaleY(-1);
-o-transform: scaleY(-1);
transform: scaleY(-1);
-ms-filter: fliph; /*IE*/
filter: fliph; /*IE*/
}
/* UPDATE for animation */
.ul {
animation: slidli 90s infinite linear;
}
.ul:hover {
animation-play-state:paused;
}
#keyframes slidli {
100% {
transform:translatex(-733.5%);/* this is to be update to the content with to see every element slide once untill copies/clone comes back at same spot */
}
}
<div class="top">
<p>
<span style="font-family: verdana;"><strong>Click the "</strong><span class="ms-rteThemeForeColor-5-0"><strong>+</strong></span><strong>" to expand and the "</strong><span class="ms-rteThemeForeColor-5-0"><strong>x</strong></span><strong>" to collapse</strong></span></p>
</div>
<div class="wrapper">
<div class="tab">
<input name="tabs" class="input" id="tab-one" type="checkbox"/>
<label class="label" for="tab-one">Content Slider</label>
<div class="tab-content">
<div class="container">
<div class="everything">
<div id="scroller" style="width: 400px; height: 255px; margin: 0 auto;">
<div class="innerScrollArea">
<ul class="ul">
<li>
<br style="line-height:49px;"/>
<div class="circle">
<div class="circle-text">
HR Connect<br/>Service<br/>Representative
</div>
</div>
<img class="flipimage" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499184462/testarrow_yhblyv.png">
</li>
<li>
<img class="arrow" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499184462/testarrow_yhblyv.png">
<div class="circle">
<div class="circle-text">
Employee<br/>Relations<br/>Specialist
</div>
</div>
</li>
<li>
<br style="line-height:49px;"/>
<div class="circle">
<div class="circle-text">
Employee<br/>Relations<br/>Manager
</div>
</div>
<img class="flipimage" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499184462/testarrow_yhblyv.png">
</li>
<li>
<img class="arrowinv" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499184462/testarrow_yhblyv.png">
<div class="circle">
<div class="circle-text">
Director, Employee<br/>Relations &<br/>Well-Being
</div>
</div>
</li>
<li>
<div class="circleinv">
</div>
</li>
<li>
<div class="circleinv">
</div>
</li>
<!--Dupes-->
<li>
<br style="line-height:49px;"/>
<div class="circle">
<div class="circle-text">
HR Connect<br/>Service<br/>Representative
</div>
</div>
<img class="flipimage" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499184462/testarrow_yhblyv.png">
</li>
<li>
<img class="arrow" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499184462/testarrow_yhblyv.png">
<div class="circle">
<div class="circle-text">
Employee<br/>Relations<br/>Specialist
</div>
</div>
</li>
<li>
<br style="line-height:49px;"/>
<div class="circle">
<div class="circle-text">
Employee<br/>Relations<br/>Manager
</div>
</div>
<img class="flipimage" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499184462/testarrow_yhblyv.png">
</li>
<li>
<img class="arrowinv" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499184462/testarrow_yhblyv.png">
<div class="circle">
<div class="circle-text">
Director, Employee<br/>Relations &<br/>Well-Being
</div>
</div>
</li>
<li>
<div class="circleinv">
</div>
</li>
<li>
<div class="circleinv">
</div>
</li>
<!--Dupe 2-->
<li>
<br style="line-height:49px;"/>
<div class="circle">
<div class="circle-text">
HR Connect<br/>Service<br/>Representative
</div>
</div>
<img class="flipimage" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499184462/testarrow_yhblyv.png">
</li>
<li>
<img class="arrow" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499184462/testarrow_yhblyv.png">
<div class="circle">
<div class="circle-text">
Employee<br/>Relations<br/>Specialist
</div>
</div>
</li>
<li>
<br style="line-height:49px;"/>
<div class="circle">
<div class="circle-text">
Employee<br/>Relations<br/>Manager
</div>
</div>
<img class="flipimage" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499184462/testarrow_yhblyv.png">
</li>
<li>
<img class="arrowinv" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499184462/testarrow_yhblyv.png">
<div class="circle">
<div class="circle-text">
Director, Employee<br/>Relations &<br/>Well-Being
</div>
</div>
</li>
<li>
<div class="circleinv">
</div>
</li>
<li>
<div class="circleinv">
</div>
</li>
<!--Dupe 3-->
<li>
<br style="line-height:49px;"/>
<div class="circle">
<div class="circle-text">
HR Connect<br/>Service<br/>Representative
</div>
</div>
<img class="flipimage" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499184462/testarrow_yhblyv.png">
</li>
<li>
<img class="arrow" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499184462/testarrow_yhblyv.png">
<div class="circle">
<div class="circle-text">
Employee<br/>Relations<br/>Specialist
</div>
</div>
</li>
<li>
<br style="line-height:49px;"/>
<div class="circle">
<div class="circle-text">
Employee<br/>Relations<br/>Manager
</div>
</div>
<img class="flipimage" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499184462/testarrow_yhblyv.png">
</li>
<li>
<img class="arrowinv" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499184462/testarrow_yhblyv.png">
<div class="circle">
<div class="circle-text">
Director, Employee<br/>Relations &<br/>Well-Being
</div>
</div>
</li>
<li>
<div class="circleinv">
</div>
</li>
<li>
<div class="circleinv">
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="bottombar"></div>
</div>

I would normally advise that you do this kind of stuff with JS but if you want to avoid it here's a working (albeit verbose) solution:
replace
.ul:hover {
animation-play-state:paused;
}
with
.input:checked~.tab-content .container .ul:hover {
animation-play-state:paused;
}
.tab-content .container .ul{
animation-play-state:paused;
}
.input:checked~.tab-content .container .ul {
animation-play-state:running;
}
Here's a pen showing the solution.
https://codepen.io/anon/pen/zzaKow

How to expand a 3D rectangle to show more rectangles when clicked on it?

I am new to 3D shapes in HTML and CSS. How can I create a 3D rectangle and when clicked on it the rectangle should show 3 more 3D rectangles below it and these rectangles should be clickable.
Any pointers is appreciated.

var vis = false;
var container = document.getElementById("c");
container.onclick = toggleVisibility;
function toggleVisibility() {
container.className = vis ?
"container" : "container vis";
vis = !vis;
}
img {
width: 100%;
}
.container {
position: absolute;
top: 100px;
left: 100px;
perspective: 2000px;
transform-style: preserve-3d;
transform: rotateX(40deg) rotateZ(25deg);
}
.box {
cursor: pointer;
position: absolute;
width: 160px;
height: 160px;
transform-style: preserve-3d;
}
.side {
position: absolute;
width: 160px;
height: 160px;
border: 1px solid rgba(0,0,0,.2);
}
.side-vert {
position: absolute;
width: 30px;
height: 160px;
border: 1px solid rgba(0,0,0,.2);
}
.side-hor {
position: absolute;
width: 160px;
height: 30px;
border: 1px solid rgba(0,0,0,.2);
}
.back {
transform: translateZ(-15px);
}
.left {
transform: translateX(-15px) rotateY(90deg);
}
.right {
transform: translateX(145px) rotateY(90deg);
}
.top {
transform: translateY(-15px) rotateX(90deg);
}
.bottom {
transform: translateY(145px) rotateX(90deg);
}
.front {
transform: translateZ(15px);
}
.r {
transform: translateZ(45px);
}
.g {
visibility: hidden;
transform: translateZ(0);
}
.b {
visibility: hidden;
transform: translateZ(-45px);
}
.r > * {
background-color: rgba(255, 0, 0, 0.2);
}
.g > * {
background-color: rgba(0, 255, 0, 0.2);
}
.b > * {
background-color: rgba(0, 0, 255, 0.2);
}
.vis > * {
visibility: visible;
}
<div id="c" class="container">
<div class="box r">
<div class="side back"></div>
<div class="side-vert left"></div>
<div class="side-vert right"></div>
<div class="side-hor top"></div>
<div class="side-hor bottom"></div>
<div class="side front">
<img src="https://bmdinteractive.com/wp-content/uploads/2017/01/stack-overflow-logo.png">
</div>
</div>
<div class="box g">
<div class="side back"></div>
<div class="side-vert left"></div>
<div class="side-vert right"></div>
<div class="side-hor top"></div>
<div class="side-hor bottom"></div>
<div class="side front">
<img src="https://bmdinteractive.com/wp-content/uploads/2017/01/stack-overflow-logo.png">
</div>
</div>
<div class="box b">
<div class="side back"></div>
<div class="side-vert left"></div>
<div class="side-vert right"></div>
<div class="side-hor top"></div>
<div class="side-hor bottom"></div>
<div class="side front">
<img src="https://bmdinteractive.com/wp-content/uploads/2017/01/stack-overflow-logo.png">
</div>
</div>
</div>
I hope this helps!
PS: mainly inspired by this article , also, here's a jsfiddle I made with SCSS stylesheet to see the correlations between $dim and $depth and the different transforms

Categories

Resources