Carousel only displaying 1 div bootstrap 3 javascript

Carousel only displaying 1 div bootstrap 3 javascript - javascript

I have created a carousel using bootstrap 3 and javascript. The carousel works perfectly, the only problem is that I have the intention of displaying a triptych display (3 divs at once) but only one of my divs displays. The buttons work backwards and forwards fine.. Why is only one div displaying and how do i change my code so the carousel works similar to this example?: https://codepen.io/mephysto/pen/ZYVKRY
$( document ).ready(function() {
$('.carosuelProperties').each(function() {
var current = $(this);
var image = current.find('img');
current.css('background-image', 'url(' + image.attr('src') + ')');
});
$('.item:nth-child(1), .item:nth-child(2), .item:nth-child(3)').addClass('active');
});
$slides.on('mouseenter', _.debounce(function() {
}, 350));
$('#myCarousel').carousel({
interval: 4000
});
$('.carousel .item').each(function(){
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
for (var i=0;i<2;i++) {
next=next.next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
}
});
.caroImgClass {
display: none;
}
.arrowOf {
color: #008692!important;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
margin-top: -25px;
}
.arrowOf:hover {
color: #000000!important;
cursor: pointer;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
.itemProperties {
min-height: 300px;
min-width: 300px;
max-height: 300px;
max-width: 300px;
width: 20vw;
border-radius: 20vw;
background-color: #008692;
}
.carosuelProperties {
min-height: 300px;
min-width: 300px;
max-height: 300px;
max-width: 300px;
width: 20vw;
border-radius: 20vw;
top: 0px;
left: 0px;
position: absolute;
transition: .5s ease-in-out;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.carosuelProperties:hover {
opacity: 0;
transition: .5s ease-in-out;
}
#media only screen and (min-width: 1900px) {
.propertyTitleCaro {
padding: 1vw;
padding-bottom: 0;
font-size: 1.5rem;
font-weight: 1000;
margin-top: 1.5vw;
}}
#media only screen and (max-width: 1900px) {
.propertyTitleCaro {
font-size: 1.5rem;
font-weight: 1000;
margin-top: 3vw;
padding: 10%;
padding-bottom: 0%;
}}
.propertyDesCaro {
padding: 1.5vw;
padding-top: 0px;
}
$carousel-visible-count: 3;
#mixin clearfix() {
&:before,
&:after {
content: ".";
display: block;
height: 0;
overflow: hidden;
}
&:after { clear: both; }
}
* {
box-sizing: border-box;
}
.carousel__control {
position: absolute;
top: 25%;
bottom: 25%;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
border: 0;
cursor: pointer;
outline: 0;
background: none;
}
.carousel-control {
background: none!important;
padding-top: 13%;
}
.carousel-control.left {
margin-left: -155px;
}
.multi-item-carousel{
.carousel-inner{
> .item{
transition: 500ms ease-in-out left;
}
.active{
&.left{
left:-33%;
}
&.right{
left:33%;
}
}
.next{
left: 33%;
}
.prev{
left: -33%;
}
#media all and (transform-3d), (-webkit-transform-3d) {
> .item{
// use your favourite prefixer here
transition: 100000ms ease-in-out left;
transition: 100000ms ease-in-out all;
backface-visibility: visible;
transform: none!important;
}
}
}
.carouse-control{
&.left, &.right{
background-image: none;
}
}
}
<div class="carousel slide" id="myCarousel" data-ride="carousel" data-interval="2000" data-pause="hover">
<div class="carousel-inner">
#if (isset($participatingProperties) && !empty($participatingProperties) && is_array($participatingProperties))
#foreach ($participatingProperties as $property)
<a href="/view/property/{{ $property->property_slug or $property->id }}">
<div class="carousel__box itemProperties col-md-4 col-sm-12 item">
<h2 class="propertyTitleCaro centered white sub-header">
<?php echo mb_strimwidth(strip_tags($property->property_name), 0, 45, '...'); ?>
</h2>
<p class="centered white smallerText propertyDesCaro"><?php echo mb_strimwidth(strip_tags($property->property_short_descript), 0, 140, '...<br><br>SEE MORE'); ?></p>
<div class="carosuelProperties" id="{{ $property->id }}">
<img class="caroImgClass" src="{{$property->property_main_image->images_main}}" alt="{{ $property->property_name or 'No name' }}" title="{{ $property->property_name or 'No name' }}">
</div>
</a>
</div>
#endforeach
#endif
</div>
<a class="left carousel-control arrowOf" href="#myCarousel" data-slide="prev">
<i class="fa fa-chevron-left fa-3x"></i></a>
<a class="right carousel-control arrowOf" href="#myCarousel" data-slide="next">
<i class="fa fa-chevron-right fa-3x"></i></a>
</div>

Related

When mySwitch is untoggled/unchecked, the toggle/checked no longer works, doesn't change my background again

I have 2 toggle switches, the problem I have is sperating each toggle switches to do their own thing. I'm unable to, in javascript, to make a if/else statement for my 2nd toggle switch.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Asignment 3</title>
<link rel="shortcut icon" href="https://cdn-icons-png.flaticon.com/512/136/136724.png" type="image/x-icon">
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div id="RainbowId">
<div id="mySidebar" class="sidebar">
<a class="closebtn" onclick="closeNav()">×</a>
<a>RAINBOW MODE</a>
<a><label class="switch"><input type="checkbox"><div class="slider round"><div id="text">OFF</div></div></label></a>
<a><br></a>
<a><br></a>
<a>DO NOT TOUCH</a>
<a><label class="switch2"><input type="checkbox2"><div class="slider2 round2"><div id="text2">OFF</div></div></label></a>
</div>
<button class="openbtn" id="openBtnId" onclick="openNav()">⚙️</button>
</div>
</body>
</html>
the first if statement for the frist switch works but when I copy the code i couldn't make an ID for the CHECKBOX for javascript and CSS.
function openNav() {
document.getElementById("mySidebar").style.width = "250px";
}
function closeNav() {
document.getElementById("mySidebar").style.width = "0";
}
document.addEventListener('DOMContentLoaded', function () {
var checkbox = document.querySelector('input[type="checkbox"]');
checkbox.addEventListener('change', function () {
if (checkbox.checked) {
RainbowId.classList.toggle('Rainbow');
document.getElementById('text').innerHTML = 'ON';
}
else {
RainbowId.classList.toggle("Rainbow");
document.getElementById('text').innerHTML = 'OFF';
}
});
});
I gave the 2nd switch its own classes but couldn't give the CHECKBOX its own class.
/* Rainbow background*/
.Rainbow {
height: 100%;
width: 100%;
left:0;
right: 0;
top: 0;
bottom: 0;
background: linear-gradient(#ff0000, #ff4000, #ff8000, #ffbf00, #ffff00, #bfff00, #80ff00, #40ff00, #00ff00, #00ff40, #00ff80, #00ffbf, #00ffff, #00bfff, #0080ff, #0040ff, #0000ff, #4000ff, #8000ff, #bf00ff, #ff00ff, #ff00bf, #ff0080, #ff0040, #ff0000);
position: absolute;
background-size: 1800% 1800%;
-webkit-animation: rainbow 3s ease infinite;
animation: rainbow 3s ease infinite;
}
#keyFrames rainbow {
0%{background-position:0% 82%}
25%{background-position: 50% 9.5%}
50%{background-position:100% 19%}
75%{background-position: 75% 41%}
100%{background-position:0% 82%}
}
/* Sidebar Styles */
.sidebar {
height: 100%;
width: 0;
position: fixed;
top: 0;
left: 0;
background: grey;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
overflow-x: hidden;
transition: 1s;
}
.sidebar a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: white;
display: block;
white-space: nowrap;
transition: 0.3s;
}
.closebtn {
cursor: pointer;
}
.sidebar .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 40px;
}
.openbtn {
font-size: 40px;
cursor: pointer;
border: none;
background: none;
}
.openbtn:hover {
opacity: 50%;
}
br {
user-select: none;
}
/* Toggle Switch Styles */
.switch {
position: absolute;
width: 60px;
height: 34px;
display: flex;
align-items: center;
justify-content: center;
}
.switch input {
display:none;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
transform: translateX(26px);
}
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
.switch #text {
user-select: none;
position: absolute;
left: 60px;
margin-left: 10px;
}
/*Toogle Switch 2*/
.switch2 {
position: absolute;
width: 60px;
height: 34px;
display: flex;
align-items: center;
justify-content: center;
}
.switch2 input {
display:none;
}
.slider2 {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
transition: .4s;
}
.slider2:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
transition: .4s;
}
input:checked + .slider2 {
background-color: #2196F3;
}
input:focus + .slider2 {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider2:before {
transform: translateX(26px);
}
.slider2.round2 {
border-radius: 34px;
}
.slider2.round2:before {
border-radius: 50%;
}
.switch2 #text2 {
user-select: none;
position: absolute;
left: 60px;
margin-left: 10px;
}

Change your code as follows - use querySelectorAll to find all .checkbox
You'll see that both id="text" (and text2) are now class="text" this is important, since we can get the parent of the clicked checkbox and use querySelector to find the appropriate text
document.addEventListener('DOMContentLoaded', function() {
var checkboxes = document.querySelectorAll('input[type="checkbox"]');
checkboxes.forEach(checkbox => {
checkbox.addEventListener('change', function() {
checkbox.parentElement.querySelector('.text').innerHTML =
checkbox.checked ? 'ON' : 'OFF';
if (this.dataset.action === 'rainbow') {
RainbowId.classList.toggle('Rainbow');
} else {
console.log('DO NOT TOUCH as TOUCHED');
}
});
});
});
I also tidied the code a bit to be more DRY
And your html - I've put line breaks in to make it readable, but I know that may cause issues, but at least you can see easily what has changed
<div id="RainbowId">
<div id="mySidebar" class="sidebar">
<a class="closebtn" onclick="closeNav()">×</a>
<a>RAINBOW MODE</a>
<a>
<label class="switch">
<input type="checkbox" data-action="rainbow">
<div class="slider round">
<!-- added class here -->
<div id="text" class="text">OFF</div>
</div>
</label>
</a>
<a><br></a>
<a><br></a>
<a>DO NOT TOUCH</a>
<a>
<label class="switch2">
<input type="checkbox" data-action="not a rainbow">
<div class="slider2 round2">
<!-- added class here -->
<div id="text2" class="text">OFF</div>
</div>
</label>
</a>
</div>
<button class="openbtn" id="openBtnId" onclick="openNav()">⚙️</button>
</div>

jquery Image gallery with an overlay, can't get the correct url on click because of the overlay

im trying to make a flexbox image gallery popup onclick. Almost everything works, but I have trouble getting the url of the correct image. My code get the url only of the first image, no matter which image I click. Can someone help me and point out with what Im doing wrong?
Here is the code:
$(document).ready(function() {
$(".image-overlay").click(function() {
var url = $('.content img').attr('src');
$(".modal").css("display", "block");
$(".close").css("display", "block");
$('#img01').attr('src', url);
});
});
$(document).ready(function() {
$(".image-overlay").mouseover(function() {
$(this).css("opacity", "1");
});
$(".image-overlay").mouseout(function() {
$(this).css("opacity", "0");
});
});
$(document).ready(function() {
$(".close").click(function() {
$(".modal").css("display", "none");
});
});
.gallery {
box-sizing: border-box;
margin-top: 5%;
padding: 0 5%;
}
.gallery-container {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
justify-content: center;
}
.gallery-column1 {
-ms-flex: 18%;
/* IE10 */
flex: 18%;
max-width: 18%;
padding: 0 0.8em;
}
.gallery-column2 {
-ms-flex: 24.7%;
/* IE10 */
flex: 24.7%;
max-width: 24.7%;
padding: 0 0.8em;
}
.gallery-column3 {
-ms-flex: 31.2%;
/* IE10 */
flex: 31.2%;
max-width: 31.2%;
padding: 0 0.8em;
}
#media screen and (max-width: 700px) {
.gallery-column1,
.gallery-column2,
.gallery-column3 {
-ms-flex: 100%;
flex: 100%;
max-width: 100%;
}
}
.gallery-column1 img {
margin-top: 1.5em;
vertical-align: middle;
width: 100%;
}
.gallery-column2 img {
margin-top: 1.5em;
vertical-align: middle;
width: 100%;
}
.gallery-column3 img {
margin-top: 1.5em;
vertical-align: middle;
width: 100%;
}
.modal {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
padding: 1%;
/* Location of the box */
top: 20%;
width: 320px;
/* Full width */
height: auto;
/* Full height */
overflow: auto;
/* Enable scroll if needed */
left: 50%;
transform: translate(-50%, 0);
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.9);
/* Black w/ opacity */
}
/* Modal Content (image) */
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
/* Add Animation */
.modal-content,
#caption {
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.8s;
animation-name: zoom;
animation-duration: 0.8s;
}
#-webkit-keyframes zoom {
from {
-webkit-transform: scale(0)
}
to {
-webkit-transform: scale(1)
}
}
#keyframes zoom {
from {
transform: scale(0)
}
to {
transform: scale(1)
}
}
.close {
display: block;
position: absolute;
right: 5%;
top: -2%;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
/* Overlay 8*/
.content {
position: relative;
width: 100%;
max-width: 100%;
margin: auto;
overflow: hidden;
}
.content .image-overlay {
background: rgba(114, 208, 223, 0.8);
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 8%;
bottom: 0;
right: 0;
opacity: 0;
cursor: pointer;
-webkit-transition: all 0.4s ease-in-out 0s;
-moz-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="gallery-container">
<div class="gallery-column1">
<div class="content img1">
<div class="image-overlay">
<i class="fa fa-search-plus gallery-icon" aria-hidden="true"></i>
</div>
<img id="myImg" src="http://elkatesthosting-com.stackstaging.com/mountains/images/gallery1.png">
</div>
<div id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img01">
</div>
<div class="content img4">
<div class="image-overlay">
<i class="fa fa-search-plus gallery-icon2" aria-hidden="true"></i>
</div>
<img id="myImg4" src="http://elkatesthosting-com.stackstaging.com/mountains/images/gallery4.png">
</div>
</div>
<div class="gallery-column2">
<div class="content">
<div class="image-overlay">
<i class="fa fa-search-plus gallery-icon3" aria-hidden="true"></i>
</div>
<img id="myImg2" src="http://elkatesthosting-com.stackstaging.com/mountains/images/gallery2.png">
</div>
<div class="content">
<div class="image-overlay">
<i class="fa fa-search-plus gallery-icon4" aria-hidden="true"></i>
</div>
<img id="myImg5" src="http://elkatesthosting-com.stackstaging.com/mountains/images/gallery5.png">
</div>
</div>
<div class="gallery-column3">
<div class="content">
<div class="image-overlay">
<i class="fa fa-search-plus gallery-icon5" aria-hidden="true"></i>
</div>
<img id="myImg3" src="http://elkatesthosting-com.stackstaging.com/mountains/images/gallery3.png">
</div>
<div class="content">
<div class="image-overlay">
<i class="fa fa-search-plus gallery-icon6" aria-hidden="true"></i>
</div>
<img id="myImg6" src="http://elkatesthosting-com.stackstaging.com/mountains/images/gallery6.png">
</div>
</div>
</div>
</div>
or my codepen url: https://codepen.io/christmastrex/pen/mdVzXMd

Welcome Elka, your issue is in this line:
var url= $('.content img').attr('src');
Inside the event the keyword this refers to the current image-overlay. Said that, in order to find the image you need to select the next img object.
Hence your code will be:
var url= $(this).next('img').attr('src');
The snippet:
$(".image-overlay").click(function(){
var url= $(this).next('img').attr('src');
$(".modal").css("display","block");
$(".close").css("display","block");
$('#img01').attr('src', url);
});
$(".image-overlay").mouseover(function(){
$(this).css("opacity", "1");
});
$(".image-overlay").mouseout(function(){
$(this).css("opacity", "0");
});
$(".close").click(function(){
$(".modal").css("display", "none");
});
.gallery{
box-sizing: border-box;
margin-top:5%;
padding: 0 5%;
}
.gallery-container {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
justify-content: center;
}
.gallery-column1 {
-ms-flex: 18%; /* IE10 */
flex: 18%;
max-width: 18%;
padding: 0 0.8em;
}
.gallery-column2 {
-ms-flex: 24.7%; /* IE10 */
flex: 24.7%;
max-width: 24.7%;
padding: 0 0.8em;
}
.gallery-column3 {
-ms-flex: 31.2%; /* IE10 */
flex: 31.2%;
max-width: 31.2%;
padding: 0 0.8em;
}
#media screen and (max-width: 700px) {
.gallery-column1, .gallery-column2, .gallery-column3 {
-ms-flex: 100%;
flex: 100%;
max-width: 100%;
}
}
.gallery-column1 img {
margin-top: 1.5em;
vertical-align: middle;
width: 100%;
}
.gallery-column2 img {
margin-top: 1.5em;
vertical-align: middle;
width: 100%;
}
.gallery-column3 img {
margin-top: 1.5em;
vertical-align: middle;
width: 100%;
}
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding: 1%; /* Location of the box */
top: 20%;
width: 320px; /* Full width */
height: auto; /* Full height */
overflow: auto; /* Enable scroll if needed */
left: 50%;
transform: translate(-50%, 0);
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}
/* Modal Content (image) */
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
/* Add Animation */
.modal-content, #caption {
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.8s;
animation-name: zoom;
animation-duration: 0.8s;
}
#-webkit-keyframes zoom {
from {-webkit-transform:scale(0)}
to {-webkit-transform:scale(1)}
}
#keyframes zoom {
from {transform:scale(0)}
to {transform:scale(1)}
}
.close {
display:block;
position: absolute;
right: 5%;
top: -2%;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
/* Overlay 8*/
.content {
position: relative;
width: 100%;
max-width: 100%;
margin: auto;
overflow: hidden;
}
.content .image-overlay {
background: rgba(114,208,223,0.8);
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 8%;
bottom: 0;
right: 0;
opacity: 0;
cursor: pointer;
-webkit-transition: all 0.4s ease-in-out 0s;
-moz-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="gallery" id="gallery">
<div class="gallery-container">
<div class="gallery-column1">
<div class="content img1">
<div class="image-overlay">
<i class="fa fa-search-plus gallery-icon" aria-hidden="true"></i>
</div>
<img id="myImg" src="http://elkatesthosting-com.stackstaging.com/mountains/images/gallery1.png">
</div>
<div id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img01">
</div>
<div class="content img4">
<div class="image-overlay">
<i class="fa fa-search-plus gallery-icon2" aria-hidden="true"></i>
</div>
<img id="myImg4" src="http://elkatesthosting-com.stackstaging.com/mountains/images/gallery4.png">
</div>
</div>
<div class="gallery-column2">
<div class="content">
<div class="image-overlay">
<i class="fa fa-search-plus gallery-icon3" aria-hidden="true"></i>
</div>
<img id="myImg2" src="http://elkatesthosting-com.stackstaging.com/mountains/images/gallery2.png">
</div>
<div class="content">
<div class="image-overlay">
<i class="fa fa-search-plus gallery-icon4" aria-hidden="true"></i>
</div>
<img id="myImg5" src="http://elkatesthosting-com.stackstaging.com/mountains/images/gallery5.png">
</div>
</div>
<div class="gallery-column3">
<div class="content">
<div class="image-overlay">
<i class="fa fa-search-plus gallery-icon5" aria-hidden="true"></i>
</div>
<img id="myImg3" src="http://elkatesthosting-com.stackstaging.com/mountains/images/gallery3.png">
</div>
<div class="content">
<div class="image-overlay">
<i class="fa fa-search-plus gallery-icon6" aria-hidden="true"></i>
</div>
<img id="myImg6" src="http://elkatesthosting-com.stackstaging.com/mountains/images/gallery6.png">
</div>
</div>
</div>
</div>

I've changed the following line in your js
var url= $('.content img').attr('src');
to
var url = $(this).siblings('img').attr('src');
So you get the image that is the sibling of the clicked .image-overlay
/*var myVar = document.querySelectorAll('.content img');
var mySrc="";
for (var i = 0; i < myVar.length; i++) {
mySrc = myVar[i].getAttribute('src');
//alert(mySrc);
}*/
$(document).ready(function() {
$(".image-overlay").click(function() {
var url = $(this).siblings('img').attr('src');
$(".modal").css("display", "block");
$(".close").css("display", "block");
$('#img01').attr('src', url);
});
});
$(document).ready(function() {
$(".image-overlay").mouseover(function() {
$(this).css("opacity", "1");
});
$(".image-overlay").mouseout(function() {
$(this).css("opacity", "0");
});
});
$(document).ready(function() {
$(".close").click(function() {
$(".modal").css("display", "none");
});
});
.gallery {
box-sizing: border-box;
margin-top: 5%;
padding: 0 5%;
}
.gallery-container {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
justify-content: center;
}
.gallery-column1 {
-ms-flex: 18%;
/* IE10 */
flex: 18%;
max-width: 18%;
padding: 0 0.8em;
}
.gallery-column2 {
-ms-flex: 24.7%;
/* IE10 */
flex: 24.7%;
max-width: 24.7%;
padding: 0 0.8em;
}
.gallery-column3 {
-ms-flex: 31.2%;
/* IE10 */
flex: 31.2%;
max-width: 31.2%;
padding: 0 0.8em;
}
#media screen and (max-width: 700px) {
.gallery-column1,
.gallery-column2,
.gallery-column3 {
-ms-flex: 100%;
flex: 100%;
max-width: 100%;
}
}
.gallery-column1 img {
margin-top: 1.5em;
vertical-align: middle;
width: 100%;
}
.gallery-column2 img {
margin-top: 1.5em;
vertical-align: middle;
width: 100%;
}
.gallery-column3 img {
margin-top: 1.5em;
vertical-align: middle;
width: 100%;
}
.modal {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
padding: 1%;
/* Location of the box */
top: 20%;
width: 320px;
/* Full width */
height: auto;
/* Full height */
overflow: auto;
/* Enable scroll if needed */
left: 50%;
transform: translate(-50%, 0);
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.9);
/* Black w/ opacity */
}
/* Modal Content (image) */
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
/* Add Animation */
.modal-content,
#caption {
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.8s;
animation-name: zoom;
animation-duration: 0.8s;
}
#-webkit-keyframes zoom {
from {
-webkit-transform: scale(0)
}
to {
-webkit-transform: scale(1)
}
}
#keyframes zoom {
from {
transform: scale(0)
}
to {
transform: scale(1)
}
}
.close {
display: block;
position: absolute;
right: 5%;
top: -2%;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
/* Overlay 8*/
.content {
position: relative;
width: 100%;
max-width: 100%;
margin: auto;
overflow: hidden;
}
.content .image-overlay {
background: rgba(114, 208, 223, 0.8);
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 8%;
bottom: 0;
right: 0;
opacity: 0;
cursor: pointer;
-webkit-transition: all 0.4s ease-in-out 0s;
-moz-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="gallery" id="gallery">
<div class="gallery-container">
<div class="gallery-column1">
<div class="content img1">
<div class="image-overlay">
<i class="fa fa-search-plus gallery-icon" aria-hidden="true"></i>
</div>
<img id="myImg" src="http://elkatesthosting-com.stackstaging.com/mountains/images/gallery1.png">
</div>
<div id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img01">
</div>
<div class="content img4">
<div class="image-overlay">
<i class="fa fa-search-plus gallery-icon2" aria-hidden="true"></i>
</div>
<img id="myImg4" src="http://elkatesthosting-com.stackstaging.com/mountains/images/gallery4.png">
</div>
</div>
<div class="gallery-column2">
<div class="content">
<div class="image-overlay">
<i class="fa fa-search-plus gallery-icon3" aria-hidden="true"></i>
</div>
<img id="myImg2" src="http://elkatesthosting-com.stackstaging.com/mountains/images/gallery2.png">
</div>
<div class="content">
<div class="image-overlay">
<i class="fa fa-search-plus gallery-icon4" aria-hidden="true"></i>
</div>
<img id="myImg5" src="http://elkatesthosting-com.stackstaging.com/mountains/images/gallery5.png">
</div>
</div>
<div class="gallery-column3">
<div class="content">
<div class="image-overlay">
<i class="fa fa-search-plus gallery-icon5" aria-hidden="true"></i>
</div>
<img id="myImg3" src="http://elkatesthosting-com.stackstaging.com/mountains/images/gallery3.png">
</div>
<div class="content">
<div class="image-overlay">
<i class="fa fa-search-plus gallery-icon6" aria-hidden="true"></i>
</div>
<img id="myImg6" src="http://elkatesthosting-com.stackstaging.com/mountains/images/gallery6.png">
</div>
</div>
</div>
</div>

How to delay jquery hide on mousedown until CSS animation completes?

Trying to put a menu together, and having some trouble with one behavior.
Have a set of sub-menu divs hidden behind the main menu divs. Upon click, the sub-menu is shown and animates into view.
I'm able to see the animation when the sub-menus are shown, but not when when they toggle back to hidden. I've tried a few different things to get it to behave the way I want, but no joy.
Here's the code:
$(document).ready(function() {
$(document).on('mouseenter mouseleave', '.circle.hover-effect', function (event) {
$(this).toggleClass("active", event.type === 'mouseenter');
});
$('.menu').hide();
$('.circle').on('mousedown touchstart', function() {
$('.circle').toggleClass('hover-effect');
$(this).toggleClass('selected');
$('.circle').not(this).removeClass('selected');
if ($(this).hasClass('selected')) {
$('.circle').not(this).addClass('behind');
$(this).prev().show('fast');
$(this).prev().find('.menu-item1').removeClass('menu-item-desel').addClass('menu-item1-sel');
$(this).prev().find('.menu-item2').removeClass('menu-item-desel').addClass('menu-item2-sel');
}
else {
$('.circle').removeClass('behind');
$('.circle').prev().hide('fast');
$(this).prev().find('.menu-item1').removeClass('menu-item1-sel').addClass('menu-item-desel');
$(this).prev().find('.menu-item2').removeClass('menu-item2-sel').addClass('menu-item-desel');
}
});
});
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background: -ms-linear-gradient(90deg, #16222A 10%, #3A6073 90%); /* IE10 */
background: linear-gradient(90deg, #16222A 10%, #3A6073 90%); /* W3C */
}
.grid {
display: flex;
flex-wrap: wrap;
width: 90%;
height: 450px;
margin: auto;
overflow: hidden;
padding: 10px 10px;
}
.cell {
flex-basis: 33.3%;
display: flex;
justify-content: center;
align-items: center;
border: 2px solid transparent;
}
.cell::before {
padding-bottom: 100%;
display: block;
content: '';
}
.menu {
position: relative;
top: 100px;
left: 100px;
}
.menu-item {
width: 60px;
height: 60px;
background-color: dimGray;
border-radius: 50%;
position: absolute;
color: white;
text-align: center;
line-height: 70px;
z-index: 19;
}
.menu-item a {
color: white;
transition: 0.35s;
}
.menu-item a:hover { color: black; }
.menu-item1 { transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55); }
.menu1 .menu-item1-sel { transform: translate(0px, 125px); }
.menu1 .menu-item2-sel { transform: translate(60px, 105px); }
.menu-item2 { transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.2s; }
.menu2 .menu-item1-sel { transform: translate(0px, 125px); }
.menu2 .menu-item2-sel { transform: translate(60px, 105px); }
.menu-item-desel { transform: none; }
.circle {
position: relative;
background: #ccc;
border-radius: 50%;
width: 200px;
height: 200px;
margin: 0 auto 1em;
transition: all 0.3s;
z-index: 20;
cursor: pointer;
opacity: 1;
}
.active { transform: scale(1.1); }
.selected {
background: red;
z-index: 20;
}
.behind {
opacity: 0.1;
z-index: 18;
cursor: default;
pointer-events: none;
}
.caption {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<div class="grid">
<div class="cell col1">
<div class="inner">
<div class="menu menu1">
<div class="menu-item menu-item1"><i class="fa fa-user fa-2x"></i></div>
<div class="menu-item menu-item2"><i class="fa fa-graduation-cap fa-2x"></i></div>
</div>
<div class="circle hover-effect">
<div class="caption">
<h2>Header 1</h2>
<h3>Subtitle 1</h3>
</div>
</div>
</div>
</div>
<div class="cell col1">
<div class="inner">
<div class="menu menu2">
<div class="menu-item menu-item1"><i class="fa fa-envelope-o fa-2x"></i></div>
<div class="menu-item menu-item2"><i class="fa fa-code fa-2x"></i></div>
</div>
<div class="circle hover-effect">
<div class="caption">
<h2>Header 2</h2>
<h3>Subtitle 2</h3>
</div>
</div>
</div>
</div>
</div>
And here's the fiddle: JSfiddle
Any help would be greatly appreciated! Thanks, and have a great day!

Add delay when hiding the div. Div should perform the effect first before hiding use setTimeout
Executes a function, after waiting a specified number of milliseconds.
$(document).ready(function() {
$(document).on('mouseenter mouseleave', '.circle.hover-effect', function (event) {
$(this).toggleClass("active", event.type === 'mouseenter');
});
$('.menu').hide();
$('.circle').on('mousedown touchstart', function() {
$('.circle').toggleClass('hover-effect');
$(this).toggleClass('selected');
$('.circle').not(this).removeClass('selected');
if ($(this).hasClass('selected')) {
$('.circle').not(this).addClass('behind');
$(this).prev().show('fast');
$(this).prev().find('.menu-item1').removeClass('menu-item-desel').addClass('menu-item1-sel');
$(this).prev().find('.menu-item2').removeClass('menu-item-desel').addClass('menu-item2-sel');
}
else {
$('.circle').removeClass('behind');
$(this).prev().find('.menu-item1').removeClass('menu-item1-sel').addClass('menu-item-desel');
$(this).prev().find('.menu-item2').removeClass('menu-item2-sel').addClass('menu-item-desel');
setTimeout(function(){ $('.circle').prev().hide('fast'); }, 1000);
}
});
});
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background: -ms-linear-gradient(90deg, #16222A 10%, #3A6073 90%); /* IE10 */
background: linear-gradient(90deg, #16222A 10%, #3A6073 90%); /* W3C */
}
.grid {
display: flex;
flex-wrap: wrap;
width: 90%;
height: 450px;
margin: auto;
overflow: hidden;
padding: 10px 10px;
}
.cell {
flex-basis: 33.3%;
display: flex;
justify-content: center;
align-items: center;
border: 2px solid transparent;
}
.cell::before {
padding-bottom: 100%;
display: block;
content: '';
}
.menu {
position: relative;
top: 100px;
left: 100px;
}
.menu-item {
width: 60px;
height: 60px;
background-color: dimGray;
border-radius: 50%;
position: absolute;
color: white;
text-align: center;
line-height: 70px;
z-index: 19;
}
.menu-item a {
color: white;
transition: 0.35s;
}
.menu-item a:hover { color: black; }
.menu-item1 { transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55); }
.menu1 .menu-item1-sel { transform: translate(0px, 125px); }
.menu1 .menu-item2-sel { transform: translate(60px, 105px); }
.menu-item2 { transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.2s; }
.menu2 .menu-item1-sel { transform: translate(0px, 125px); }
.menu2 .menu-item2-sel { transform: translate(60px, 105px); }
.menu-item-desel { transform: none; }
.circle {
position: relative;
background: #ccc;
border-radius: 50%;
width: 200px;
height: 200px;
margin: 0 auto 1em;
transition: all 0.3s;
z-index: 20;
cursor: pointer;
opacity: 1;
}
.active { transform: scale(1.1); }
.selected {
background: red;
z-index: 20;
}
.behind {
opacity: 0.1;
z-index: 18;
cursor: default;
pointer-events: none;
}
.caption {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<div class="grid">
<div class="cell col1">
<div class="inner">
<div class="menu menu1">
<div class="menu-item menu-item1"><i class="fa fa-user fa-2x"></i></div>
<div class="menu-item menu-item2"><i class="fa fa-graduation-cap fa-2x"></i></div>
</div>
<div class="circle hover-effect">
<div class="caption">
<h2>Header 1</h2>
<h3>Subtitle 1</h3>
</div>
</div>
</div>
</div>
<div class="cell col1">
<div class="inner">
<div class="menu menu2">
<div class="menu-item menu-item1"><i class="fa fa-envelope-o fa-2x"></i></div>
<div class="menu-item menu-item2"><i class="fa fa-code fa-2x"></i></div>
</div>
<div class="circle hover-effect">
<div class="caption">
<h2>Header 2</h2>
<h3>Subtitle 2</h3>
</div>
</div>
</div>
</div>
</div>

Slideshow Pagination Javascript/Jquery with no plugins

Code here https://jsfiddle.net/bbayo/gmvex82e/4/
I want to make a pagination slideshow out of the menu like (skinny, straight, flare) give the slideshow a control example arrows and x to close. I did something but get stuck.
Right now if you click on skinny you will get a slideshow but if you instead click on straight or boyfriend it gives you the content but no arrows.
check it here https://jsfiddle.net/bbayo/gmvex82e/4/
<div class="denim-destination-container">
<div class="denim-destination-content">
<div class="fits">
</div>
</div>
<div>
Any help is appreciated. Thank you

1.Your post didn't show your entire code to figure out what you're facing and others can't understand what you want to ask.(Although you post the code in jsfiddle, but what you post here is simple html and it's not clear enough for others to understand your question)
2.Why your control arrows and close button didn't show is because your .hide contains your control
<div id="macysSlideshow" class="hide">
<div id="macysSlideshowWrapper" >
<div id="skinny" class="macysSlide show">
<div class="slide-container">
<img src="xxx.jpg" alt="" />
</div>
</div>
<!-- and more divs -->
</div>
<div class="denim-close " id="x-img">
<img src="xxx"/>
</div>
<div class="arrow" id="arrow_right">
<img src="xxx"/>
</div>
<div class="arrow" id="arrow_left">
<img src="xxx"/>
</div>
and your javscript control show only your slider div but not your control div.
$(".link").click(function() {
$(".hide").hide();
var dataType = $(this).attr('data-type');
$("#" + dataType).show();
});
here is the fixed code.
check the html and javascript section.
$(document).ready(function() {
$(".link").click(function() {
$(".hide").hide();
$(".control").show();
var dataType = $(this).data('type');
$("#" + dataType).show();
});
var currentPosition = 0,
counter = 0,
slideWidth = 886,
slides = $('.macysSlide'),
numSlides = slides.length,
selectedClass;
function displayArrows(position) {
for (var i = 0; i < numSlides; i += 1) {
if (i == position) {
$(".activeslide").remove();
} else {
$("li.navPos" + i).css('color', '#8a8a8a');
}
}
}
function moveSlide() {
console.log(slideWidth);
console.log(currentPosition);
$('#macysSlideshowWrapper').animate({
'margin-left': (slideWidth * -currentPosition)
})
}
$('.arrow').click(function() {
currentPosition = parseInt(currentPosition);
if ($(this).attr('id') == 'arrow_right') {
if (currentPosition == (numSlides - 1)) {
currentPosition = 0;
} else {
currentPosition = currentPosition + 1;
}
} else if ($(this).attr('id') == 'arrow_left') {
if (currentPosition == 0) {
currentPosition = numSlides - 1;
} else {
currentPosition = currentPosition - 1;
}
}
displayArrows(currentPosition);
moveSlide();
});
displayArrows(currentPosition);
$(".fits-bottom-nav li").click(function() {
moveSlide();
// selectedClass=$(this).attr('class');
// console.log('selectedClass', selectedClass);
// currentPosition = selectedClass[6];
currentPosition = $(this).find("a").data('index');
console.log('currentPosition', currentPosition);
displayArrows(currentPosition);
moveSlide();
});
$(".control").hide();
});
ul {
margin: 0 0 1.5em;
/* 24 / 16 */
padding: 0;
}
li {
line-height: 1.5;
/* 24 / 16 */
margin: 0;
display: inline-block;
cursor: pointer;
padding: 32px;
}
.denim-destination-container {
width: 900px;
margin: 0 auto;
line-height: 0;
}
.denim-nav ul li a.active {
color: yellow;
}
.denim-destination-content {
border-top: 7px solid #34496C;
border-right: 7px solid #34496C;
border-left: 7px solid #34496C;
width: 886px;
height: 2532px;
}
/* fits styles */
.fits,
.washes {
position: relative;
}
.fits-top-nav {
position: absolute;
top: -22px;
left: 50px;
}
.fits-top-nav li a {
color: #fff;
text-decoration: none;
font-size: 16px;
font-family: Helvetica, Verdana, Arial, sans-serif;
font-style: italic;
margin: 5px;
}
.fits-top-nav li a:hover {
color: yellow;
}
.fits-bottom-nav {
position: absolute;
top: 576px;
left: 34px;
}
.fits-bottom-nav li a {
color: #485977;
text-decoration: none;
font-size: 14px;
font-family: Helvetica, Verdana, Arial, sans-serif;
font-style: italic;
font-weight: bold;
margin-left: -8px;
}
.fits-bottom-nav .active a {
background-color: #ccc !important
}
.washes-top-nav {
position: absolute;
top: 512px;
left: -17px;
}
.washes-top-nav li {
line-height: 18px;
margin-left: 20px
}
.washes-top-nav li a {
color: #fff;
text-decoration: none;
font-size: 16px;
font-family: Helvetica, Verdana, Arial, sans-serif;
font-style: italic;
margin: 5px;
}
/* slide styles */
#macysSlideshow {
/*width and height of the slides go here*/
height: 636px;
margin: 0 auto;
overflow: hidden;
position: absolute;
top: 173px;
clear: both;
}
#macysSlideshowWrapper {
/*width of all the slides combined (slidesWidth * 3) goes here*/
/* width:6300px;
height:636px;*/
}
.macysSlide {
/*slide with and height goes here*/
width: 886px;
height: 636px;
float: left;
position: relative;
margin: 0;
}
.slide-container {
position: relative;
display: inline-block;
float: left;
width: 886px;
}
.arrow,
.denim-close {
position: absolute;
cursor: pointer;
}
/*add left and right arrow positioning*/
#arrow_left {
top: 30%;
left: 15px;
padding-top: 1px;
z-index: 100;
}
#arrow_right {
top: 30%;
left: 855px;
padding-top: 1px;
z-index: 100;
}
#x-img {
top: 1%;
left: 850px;
padding-top: 1px;
z-index: 100;
}
/* BRANDS STYLE */
#brands {
position: relative;
font-family: Helvetica, Verdana, Arial, sans-serif;
font-style: italic;
font-size: 14px;
color: #34496c;
margin-top: 205px;
}
.brand-content {
position: absolute;
top: 200px;
left: 400px;
}
.dotted {
border-bottom: 3px dashed #34496c;
text-decoration: none;
font-size: 20px;
}
.brands-list li {
display: inline;
}
.brands-list a {
display: inline-block;
padding: 5px;
margin-right: 55px;
color: #34496c;
}
.new-noteworthy-list {
width: 611px;
margin-top: 25px;
margin-left: -25px;
}
.all-time-fav-list {
width: 580px;
margin-top: 25px;
margin-left: -25px;
}
/* how to wear it styles */
label,
a {
color: teal;
cursor: pointer;
text-decoration: none;
}
#slider {
margin: 0 auto;
}
/* NEW EXPERIMENT */
/* Slider Setup */
input {
display: none;
}
#slide1:checked ~ #slides .inner {
margin-left: 0;
}
#slide2:checked ~ #slides .inner {
margin-left: -100%;
}
#slide3:checked ~ #slides .inner {
margin-left: -200%;
}
#slide4:checked ~ #slides .inner {
margin-left: -300%;
}
#slide5:checked ~ #slides .inner {
margin-left: -400%;
}
#slide6:checked ~ #slides .inner {
margin-left: -500%;
}
#slide7:checked ~ #slides .inner {
margin-left: -600%;
}
#overflow {
overflow: hidden;
height: 774px;
}
article img {
width: 100%;
}
#slides .inner {
width: 700%;
line-height: 0;
}
#slides article {
/*width: 20%;*/
float: left;
}
/* Control Setup */
#controls {
margin: -29.9% 0 0 0;
width: 100%;
}
#controls label {
display: none;
width: 50px;
height: 50px;
opacity: 0.3;
}
#active {
/*margin: 20% 0 0;*/
text-align: center;
position: absolute;
margin-left: 250px;
margin-top: 175px;
}
#active label {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
display: inline-block;
width: 10px;
height: 10px;
background: #fff;
margin-left: 35px;
}
#active label:hover {
background: #eacf54;
border-color: #777 !important;
}
#controls label {
opacity: 0.8;
}
#slide1:checked ~ #controls label:nth-child(2),
#slide3:checked ~ #controls label:nth-child(4),
#slide4:checked ~ #controls label:nth-child(5),
#slide5:checked ~ #controls label:nth-child(6),
#slide6:checked ~ #controls label:nth-child(7),
#slide7:checked ~ #controls label:nth-child(1) {
background: url('../images/denim-right-arr-01.png') no-repeat;
float: right;
margin: -190px -20px 0 0;
display: block;
}
#slide1:checked ~ #controls label:nth-child(7),
#slide2:checked ~ #controls label:nth-child(1),
#slide3:checked ~ #controls label:nth-child(2),
#slide4:checked ~ #controls label:nth-child(3),
#slide5:checked ~ #controls label:nth-child(4),
#slide6:checked ~ #controls label:nth-child(5),
#slide7:checked ~ #controls label:nth-child(6) {
background: url('../images/denim-left-arr-01.png') no-repeat;
float: left;
margin: -190px 0 0 15px;
display: block;
}
#slide1:checked ~ #active label:nth-child(1) {
display: none;
}
#slide2:checked ~ #active label:nth-child(2),
#slide3:checked ~ #active label:nth-child(3),
#slide4:checked ~ #active label:nth-child(4),
#slide5:checked ~ #active label:nth-child(5),
#slide6:checked ~ #active label:nth-child(6),
#slide7:checked ~ #active label:nth-child(7) {
background: #eacf54;
border-color: #eacf54 !important;
}
/* Animation */
#slides .inner {
-webkit-transform: translateZ(0);
-webkit-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
-moz-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
-ms-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
-o-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
/* easeInOutQuart */
-webkit-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
-moz-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
-ms-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
-o-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
/* easeInOutQuart */
}
#slider {
-webkit-transform: translateZ(0);
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
#controls label {
-webkit-transform: translateZ(0);
-webkit-transition: opacity 0.2s ease-out;
-moz-transition: opacity 0.2s ease-out;
-o-transition: opacity 0.2s ease-out;
transition: opacity 0.2s ease-out;
}
/*washes styles*/
.washes-content {
position: absolute;
top: 235px;
left: 175px;
}
.hide {
display: none;
}
.show {
display: block;
}
#dw {
position: absolute;
left: 150px;
}
#ww {
position: absolute;
left: 200px;
}
#bw {
position: absolute;
left: 10px;
}
#gw {
position: absolute;
left: 160px;
}
#mw {
position: absolute;
left: 295px;
}
`HTML`
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="denim-destination-container">
<div class="denim-destination-content">
<div class="fits">
<img src="http://www1.mcomexternal114.fds.com/dyn_img/cms_tiles/astra_published/ce/assets/sitelets/denim-destination-plus/denim-destination-plus-02a.jpg" alt="" />
<div id="macysSlideshow" class="hide">
<div id="macysSlideshowWrapper">
<div id="skinny" class="macysSlide show">
<div class="slide-container">
<img src="http://www1.mcomexternal114.fds.com/dyn_img/cms_tiles/astra_published/ce/assets/sitelets/denim-destination-plus/denim-destination-plus-04a.jpg" alt="" />
</div>
</div>
<div id="straight" class="macysSlide show">
<div class="slide-container">
<img src="http://www1.mcomexternal114.fds.com/dyn_img/cms_tiles/astra_published/ce/assets/sitelets/denim-destination-plus/denim-destination-plus-05a.jpg" alt="" />
</div>
</div>
<div id="boyfriend" class="macysSlide show">
<div class="slide-container">
<img src="http://www1.mcomexternal114.fds.com/dyn_img/cms_tiles/astra_published/ce/assets/sitelets/denim-destination-plus/denim-destination-plus-06a.jpg" alt="" />
</div>
</div>
<div id="bootcut" class="macysSlide show">
<div class="slide-container">
<img src="http://www1.mcomexternal114.fds.com/dyn_img/cms_tiles/astra_published/ce/assets/sitelets/denim-destination-plus/denim-destination-plus-08a.jpg" alt="" />
</div>
</div>
<div id="cropped" class="macysSlide show">
<div class="slide-container">
<img src="http://www1.mcomexternal114.fds.com/dyn_img/cms_tiles/astra_published/ce/assets/sitelets/denim-destination-plus/denim-destination-plus-07a.jpg" alt="" />
</div>
</div>
<div id="flare" class="macysSlide show">
<div class="slide-container">
<img src="http://www1.mcomexternal114.fds.com/dyn_img/cms_tiles/astra_published/ce/assets/sitelets/denim-destination-plus/denim-destination-plus-09a.jpg" alt="" />
</div>
</div>
</div>
</div>
<div class="control">
<div class="denim-close " id="x-img">
<a href="#fits">
<img src="http://www1.mcomexternal114.fds.com/dyn_img/cms_tiles/astra_published/ce/assets/sitelets/denim-destination-plus/denim-close.png" />
</a>
</div>
<div class="arrow" id="arrow_right">
<img src="http://www1.mcomexternal114.fds.com/dyn_img/cms_tiles/astra_published/ce/assets/sitelets/denim-destination-plus/denim-right-arr.png" />
</div>
<div class="arrow" id="arrow_left">
<img src="http://www1.mcomexternal114.fds.com/dyn_img/cms_tiles/astra_published/ce/assets/sitelets/denim-destination-plus/denim-left-arr.png" />
</div>
</div>
<nav class="fits-top-nav denim-nav">
<ul>
<li>FITS
</li>
<!--
-->
<li>WASHES
</li>
<!--
-->
<li>HOW TO WEAR IT
</li>
<!--
-->
<li>BRANDS
</li>
<!--
-->
<li>SHOP ALL DENIM
</li>
</ul>
</nav>
<nav class="fits-bottom-nav">
<ul>
<li>SKINNY
</li>
<li>STRAIGHT
</li>
<li>BOYFRIEND
</li>
<li>BOOTCUT
</li>
<li>CROPPED
</li>
<li>FLARE
</li>
</ul>
</nav>
</div>
</div>
</div>

Function toggle won't show div's inside the "toggled" div

I'm "required" to make a webpage:
In a page I want a side menu and when clicking each option it shows in the right some content, but without "loading" another page (this would be the easier way, just making a page for each "option" and then just clicking in each button would lead me to that page with the content in the right).
I found this:
<script type="text/javascript">
function toggle(IDS) {
var sel = document.getElementById('pg').getElementsByTagName('div');
for (var i=0; i<sel.length; i++) {
if (sel[i].id != IDS) { sel[i].style.display = 'none'; }
}
var status = document.getElementById(IDS).style.display;
if (status == 'block') { document.getElementById(IDS).style.display = 'none'; }
else { document.getElementById(IDS).style.display = 'block'; }
return false;
}
</script>
I just added it to the side menu and when each part is clicked it shows what I want :
<div id="sidebar2">
<div>
<h2 class="title">TEXT</h2>
<ul>
<li>TEXT</li>
<li>TEXT2</li>
</ul>
</div>
<div>
And in the content of each "option":
<div id="pg">
<div id="pg0" class="pg">
<h2 class="title">TEXT</h2>
<p><img src="images/test.png" alt=""/></p>
</div>
<div id="pg1" class="pg">
<h2 class="title">TEXT2</h2>
<p><img src="images/test2.png" alt=""/>HERE GOES THE DIV POPUP BUTTON</p>
</div>
I want a button to open a pop up image. It appears toggle() sets everything inside each div to display:none; and when I click only changes to block the outer part. But if I have a div inside, it remains hidden.
I've tried these two codes for the popup:
<div id="test">
<a href="#" class="JesterBox">
<div id="image1"><img src="bg.jpg"></div>
</a>
Image 1
With the corresponding JesterBox definition in CSS:
.JesterBox div {
visibility: hidden;
position: fixed;
top: 5%;
right: 5%;
bottom: 5%;
left: 5%;
z-index: 75;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
.JesterBox div:before {
content: '';
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 74;
background-color: rgba(0, 0, 0, 0);
transition: all 0.5s ease-out;
}
.JesterBox div img {
position: relative;
z-index: 77;
max-width: 100%;
max-height: 100%;
margin-left: -9999px;
opacity: 0;
transition-property: all, opacity;
transition-duration: 0.5s, 0.2s;
transition-timing-function: ease-in-out, ease-out;
}
.JesterBox div:target { visibility: visible; }
.JesterBox div:target:before { background-color: rgba(0, 0, 0, 0.7); }
.JesterBox div:target img {
margin-left: 0px;
opacity: 1;
}
And this other:
<div class="box">
<a class="button" href="#popup1">TEXT</a>
</div>
<div id="popup1" class="overlay">
<div class="popup">
<h2>Title</h2>
<a class="close" href="#">×</a>
<div class="content">
TEXT TEXT
</div>
</div>
</div>
With its corresponding CSS:
.box {
width: 20%;
margin: 0 auto;
background: rgba(255,255,255,0.2);
padding: 35px;
border: 2px solid #fff;
border-radius: 20px/50px;
background-clip: padding-box;
text-align: center;
}
.button {
font-size: 1em;
padding: 10px;
color: #fff;
border: 2px solid #06D85F;
border-radius: 20px/50px;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease-out;
}
.button:hover {
background: #06D85F;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
.popup {
margin: 70px auto;
padding: 20px;
background: #fff;
border-radius: 5px;
width: 30%;
position: relative;
transition: all 5s ease-in-out;
}
.popup h2 {
margin-top: 0;
color: #333;
font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
position: absolute;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.popup .close:hover {
color: #06D85F;
}
.popup .content {
max-height: 30%;
overflow: auto;
}
#media screen and (max-width: 700px){
.box{
width: 70%;
}
.popup{
width: 70%;
}
}
I can't make it work. How could I make, for example, the 2nd option (the div class="box") work inside the div?
<div id="pg1" class="pg">
<h2 class="title">TEXT2</h2>
<p>
<div class="box">
<a class="button" href="#popup1">TEXT</a>
</div>
<div id="popup1" class="overlay">
<div class="popup">
<h2>Title</h2>
<a class="close" href="#">×</a>
<div class="content">
TEXT TEXT
</div>
</div>
</div>

We Keep Coding

JavaScript is the programming language of the Web.

Carousel only displaying 1 div bootstrap 3 javascript - javascript

Related

When mySwitch is untoggled/unchecked, the toggle/checked no longer works, doesn't change my background again

jquery Image gallery with an overlay, can't get the correct url on click because of the overlay

How to delay jquery hide on mousedown until CSS animation completes?

Slideshow Pagination Javascript/Jquery with no plugins

Function toggle won't show div's inside the "toggled" div

Categories

Resources