CSS/HTML: Unable to hide element in Safari - javascript

I am trying to implement a modal overlay on a webpage.
The intention is for the overlay to be hidden until the user clicks a particular . This works fine in Chrome and FF. However, in Safari whilst the overlay is hidden, the #feature within it is visible at all times.
Why is this? Dropping visibility:hidden explicitly into #feature does nothing.
Any help would be appreciated!
I have this:
<div id="overlay">
<div id="overlay-background" onclick="overlay()"></div>
<div id="feature-wrapper">
<iframe id="feature" src="https://player.vimeo.com/video/74891452?color=ffffff&title=0&byline=0&portrait=0" width="750" height="422" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<div id="description"></div>
<div id="close" onclick="overlay()"><p>close</p></a>
</div>
</div>
<script>
function overlay() {
document.body.style.overflow = (document.body.style.overflow == "hidden") ? "auto" : "hidden";
el = document.getElementById("overlay");
el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
}
</script>
With:
#overlay {
visibility: hidden;
}
#overlay-background {
width: 100%;
height: 100%;
z-index: 100;
top: 0px;
position: fixed;
background-color: #000;
opacity: 0.9;
}
#feature-wrapper {
opacity: 1.0;
z-index: 100;
position: fixed;
top: 10%;
width: 100%;
height: 200%;
left: 50%;
-ms-transform: translate(-50%,0); /* IE 9 */
-webkit-transform: translate(-50%,0); /* Safari */
transform: translate(-50%,0);
text-align: center;
}
#feature {
z-index: 999;
max-width: 90vw;
max-height: 50vh;
border-style: solid;
border-color: #fff;
border-width: 20px;
margin: 2em auto;
visibility: hidden;
}


Try display: none; or opacity: 0;

Related

Span does not close in modal window

Im not really sure why the span tag is not closing
Does it have to do with my selection being a div in js?
Please let me know what I can change in order to make this work.
Ive tried to switch out the labels of the classes and tested selectors as well
Here is my code.
document.querySelectorAll('.imageContainer div').forEach(image => {
image.onclick = () => {
document.querySelector('.popup-image').style.display = 'block';
document.querySelector('.popup-image img').div = image.getAttribute('data-img');
}
});
document.querySelector('.popup-image span').onclick = () => {
document.querySelector('.popup-image').style.display = 'none';
};
/* modal */
.container .popup-image {
position: fixed;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.641);
height: 100%;
width: 100%;
z-index: 100;
display: none;
}
.container .popup-image span {
position: absolute;
top: 0;
right: 10px;
font-size: bolder;
color: #fff;
cursor: pointer;
z-index: 100;
}
.container .popup-image img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 5px solid #fff;
width: 750px;
object-fit: cover;
}
#media only screen and (max-width: 600px) {
.container .popup-image img {
width: 99%;
}
}
<div class="imageContainer">
<div class="entry work-entry branding">
<div class="entry-image image imageBG" data-img="./src/assets/img/feature1.jpeg">
</div>
<div class="work-entry-hover">
<div class="work-entry-content">
<div class="work-entry-title">Brand</div>
<div class="work-entry-cat">Los Angeles, CA</div>
</div>
</div>
</div>
<!-- modal -->
<div class="popup-image">
<img src="./src/assets/img/feature1.jpeg" alt="">
<span>×</span>
</div>
</div>

Since the 'x' button is inside the other element, the function to set display: block is being called when you click on the span, which is overriding the display: none; that you're setting. You can stop this by running e.stopPropagation(); in the event handler, which will prevent the click event from triggering on any parent elements.
document.querySelectorAll('.imageContainer div').forEach(image => {
image.onclick = () => {
document.querySelector('.popup-image').style.display = 'block';
document.querySelector('.popup-image img').div = image.getAttribute('data-img');
}
});
document.querySelector('.popup-image span').onclick = (e) => {
e.stopPropagation();
document.querySelector('.popup-image').style.display = 'none';
};
/* modal */
.container .popup-image {
position: fixed;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.641);
height: 100%;
width: 100%;
z-index: 100;
display: none;
}
.container .popup-image span {
position: absolute;
top: 0;
right: 10px;
font-size: bolder;
color: #fff;
cursor: pointer;
z-index: 100;
}
.container .popup-image img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 5px solid #fff;
width: 750px;
object-fit: cover;
}
#media only screen and (max-width: 600px) {
.container .popup-image img {
width: 99%;
}
}
<div class="imageContainer">
<div class="entry work-entry branding">
<div class="entry-image image imageBG" data-img="./src/assets/img/feature1.jpeg">
</div>
<div class="work-entry-hover">
<div class="work-entry-content">
<div class="work-entry-title">Brand</div>
<div class="work-entry-cat">Los Angeles, CA</div>
</div>
</div>
</div>
<!-- modal -->
<div class="popup-image">
<img src="./src/assets/img/feature1.jpeg" alt="">
<span>×</span>
</div>
</div>

Display previous images stored in an array

I have a gallery that will open a modal when you click on an image or video. I am now trying to implement a previous and next button. I've been unable to get it working completely, I can only get it to display ONLY the previous image/video that the user initially clicked. I cannot get it to continually display the previous or after images/videos.
I feel like some sort of loop could do the trick, but I personally couldn't figure out the condition of a loop in order for it to loop properly.
Here is a https://jsfiddle.net/Boros/r9nsyw0m/
If you click on any image or video itself(not the play button), then click the previous arrow, you will see it displays the correct previous image/video. However, if you try to press the previous button again, nothing happens. Another issue is the next button doesn't even work. I have no idea why since it should be the exact same code as the previous button except it just adds one to the index instead of subtracting one like the previous button code. You may need to refresh after closing the modal after you clicked the previous button since it will display the incorrect image/video if you re-open the modal.
Line 50: Previous button
$("#previous").addEventListener("click", evt => {
slides[g].style.display = "none";
slides[g - 1].style.display = "initial";
});
Line 55: Next button
$("#next").addEventListener("click", evt => {
slides[g].style.display = "none";
slides[g + 1].style.display = "initial";
});
I've been learning JS for a couple months now so the code might be all over the place but I am happy I was able to get this far on this project.

I had a little look at the newer version of the code and whilst it is better it still has issues - the main being that the navigation still does not work. There appears to be a lot of repetition within the various parts of the code and I ended up approaching from a different direction to achieve what I hope was the stated goal. I may not have implemented all the things I see in the original - such as removing the tabindex attributes or other such. I also could not understand why there is duplication of the images/videos on the page other than to provide content for the modal - so these items were removed explicitly from the modal so that they can be copied/cloned later when actually needed.
(function(){
'use strict';
let index;
const d=document;
const q=(e,n=d)=>n.querySelector(e);
const qa=(e,n=d)=>n.querySelectorAll(e);
const col=qa('#gallery img,#gallery video');
const _length=col.length-1;
const modal=q('#my_modal');
const receiver=q('.receiver',modal);
const setdisplay=(n,s)=>n.style.display=s;
const setoverflow=(n,s)=>n.style.overflow=s;
const setindex=(i)=>qa('[data-type="nav"]').forEach(n=>n.dataset.index=i);
const pausevideos=()=>qa('video').forEach(n=>n.pause());
const clearstyle=(c)=>qa('[data-type="nav"]').forEach(n=>n.classList.remove(c));
const warn=(e,a,b,c)=>{
clearstyle(c);
if( a==b )e.target.classList.add(c)
};
const setinitialstate=(i,c)=>{
clearstyle(c);
if( i==0 )q('[data-task="prev"]').classList.add(c)
if( i==_length )q('[data-task="next"]').classList.add(c)
}
const _CN='red';
/*
Define all the event handlers for
the modal buttons etc
*/
const closeclickhandler=(e)=>{
receiver.innerHTML='';
pausevideos();
setdisplay(modal,'none');
setoverflow(d.body,'initial');
return true;
};
/*
The prev/next handlers could be a single function
that processes the dataset to fork the logic within.
Find the index from the button and use that to determine
and display the next/prev item. The `setcontent` function
takes the item and clones it so it can be displayed.
*/
const previousclickhandler=(e)=>{
index=e.target.dataset.index;
if( index > 0 ){
index--;
warn(e,index,0,_CN);
setindex(index);
setcontent(col[index]);
}
return true;
};
const nextclickhandler=(e)=>{
index=e.target.dataset.index;
if( index < _length){
index++;
warn(e,index,_length,_CN);
setindex(index);
setcontent(col[index])
}
return true;
};
const bttnclickhandler=(e)=>{
/*
This is a `delegated` event handler
bound to the modal but operating
only on elements with a data-task
attribute.
*/
switch( e.target.dataset.task ){
case 'close': return closeclickhandler(e);
case 'prev': return previousclickhandler(e);
case 'next': return nextclickhandler(e);
}
};
/*
assign initial slide to the modal and
then set the index to the navigation
buttons.
*/
const slideclickhandler=(e)=>{
setcontent(e.target);
setindex(e.target.dataset.index);
setinitialstate(e.target.dataset.index,_CN);
};
const keyuphandler=(e)=>{
/* close modal if the user presses the ESC/Enter key */
if( e.keyCode == 27 || e.keyCode == 13 )closeclickhandler.call(this,e);
};
const setcontent=(item)=>{
let clone=item.cloneNode(true);
let div=d.createElement('div');
div.className=clone instanceof HTMLImageElement ? 'img_slides' : 'video_slides';
div.append( clone );
if( clone instanceof HTMLVideoElement ){
div.append( item.nextElementSibling.cloneNode( true ) );
clone.controls=true;
clone.muted=true;
}
receiver.innerHTML='';
receiver.appendChild( div );
setdisplay(div,'initial');
setdisplay(modal,'initial');
};
/*
Assign all the listeners
*/
col.forEach((n,i)=>{
n.dataset.index=i; // !!important!!
n.setAttribute( 'alt', n.src.split('/').pop() );
n.addEventListener('click',slideclickhandler);
});
modal.addEventListener('click',bttnclickhandler);
d.addEventListener('keyup',keyuphandler);
})();
* { box-sizing: border-box; }
html {
font-family: Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
color: white;
font-size: 16px;
background-color: black;
}
#gallery {
text-align: center;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select:none;
user-select:none;
}
#gallery img, video {
width: 100%;
max-width: 360px;
height: 480px;
object-fit: cover;
cursor: pointer;
image-rendering: -webkit-optimize-contrast;
}
.video_container {
position: relative;
display: inline-block;
width: 100%;
max-width: 360px;
height: 480px;
margin: 0;
padding: 0;
cursor: pointer;
}
/* Prevents video from moving when hovered on chrome */
.video_container video {
filter: brightness(1);
}
.fa-play {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 9999;
cursor: pointer;
font-size: 2rem;
color: white;
}
#gallery img:hover, .video_container:hover {
transition: opacity 0.3s;
opacity: 0.8;
}
.fa-play:hover {
transition: color 0.5s;
color: #181818;
}
#keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
#keyframes fadeOut {
from { opacity: 1; }
to { opacity: 0; }
}
#my_modal {
animation-name: fadeIn;
animation-duration: 0.5s;
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 9999;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.4);
overflow: auto;
margin: 0;
padding: 0;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select:none;
user-select:none;
}
.img_slides,
.video_slides {
display: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}
.img_slides img {
max-height: 100%;
max-width: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
object-fit: contain;
image-rendering: -webkit-optimize-contrast;
}
.video_slides video{
height: auto;
max-height: 100%;
width: auto;
max-width: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
object-fit: contain;
image-rendering: -webkit-optimize-contrast;
}
#close_button,
[data-task='close']{
cursor: pointer;
text-align: center;
font-size: 4rem;
width: 4rem;
position: absolute;
right: 0;
border-radius: 16px;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select:none;
user-select:none;
}
#previous,
[data-task='prev']{
cursor: pointer;
text-align: center;
font-size: 3rem;
width: 4rem;
position: absolute;
left: 0;
bottom: 0;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select:none;
user-select:none;
}
#next,
[data-task='next']{
cursor: pointer;
text-align: center;
font-size: 3rem;
width: 4rem;
position: absolute;
right: 0;
bottom: 0;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select:none;
user-select:none;
}
#close_button:hover,
[data-task='close']:hover{
transition: opacity 0.1s;
opacity: 0.5;
}
#previous:hover,
[data-task='prev']:hover{
transition: opacity 0.1s;
opacity: 0.5;
}
#next:hover,
[data-task='next']:hover{
transition: opacity 0.1s;
opacity: 0.5;
}
/* new */
.receiver{
display:flex;
flex-direction:column;
align-content:center;
align-items:center;
justify-content:center;
}
.receiver img,
.receiver video{
margin:auto
}
.red{
color:red;
}
[data-char]:after{
content:attr(data-char)
}
<div id='gallery'>
<img src='//i.imgur.com/gyVTo26.jpg' alt='' tabindex='1' />
<img src='//i.imgur.com/bEo04qh.jpg' alt='' tabindex='1' />
<img src='//i.imgur.com/iRENtzp.jpg' alt='' tabindex='1' />
<img src='//i.imgur.com/ElkQu54.jpg' alt='' tabindex='1' />
<img src='//i.imgur.com/Aj25iuv.jpg' alt='' tabindex='1' />
<div class='video_container'>
<video src='//i.imgur.com/kKGF9Az.mp4' tabindex='1' muted></video>
<i class='fas fa-play'></i>
</div>
<div class='video_container'>
<video src='//i.imgur.com/p7ohLnA.mp4' tabindex='1' muted></video>
<i class='fas fa-play'></i>
</div>
<img src='//i.imgur.com/PxWajo9.jpg' alt='' tabindex='1' />
<img src='//i.imgur.com/CAh7F8p.jpg' alt='' tabindex='1' />
</div>
<div id='my_modal'>
<div class='receiver'></div>
<span data-task='close' data-char='×' tabindex='0'></span>
<span data-task='prev' data-char='<' data-type='nav' tabindex='0'></span>
<span data-task='next' data-char='>' data-type='nav' tabindex='0'></span>
</div>
Update
Following from your comments regarding beginner status and still learning I worked a similar solution to that I proposed before but without the cloneNode approach and without modifying your HTML structure at all (apart from removing the scheme from image/video urls )
"use strict";
let index;
const d=document;
const body=d.body;
const q=(e,n=d)=>n.querySelector(e);
const qa=(e,n=d)=>n.querySelectorAll(e);
let modal=q('#my_modal');
let gallery=q('#gallery');
let bttns=qa('span',modal);
let videos=qa('video');
let collection=qa('[tabindex="1"]',gallery);
let items=qa('div[ class$="_slides" ]',modal);
let _length=items.length - 1;
const setdisplay=(nodes,style)=>{
if( nodes instanceof Array || nodes instanceof NodeList )nodes.forEach(n=>n.style.display=style);
else if( nodes instanceof HTMLElement )nodes.style.display=style;
};
const setoverflow=(n,value)=>n.style.overflow=value;
const setattribs=(col,attr,value)=>col.forEach(n=>n.setAttribute(attr,value));
const pausevideos=(col)=>col.forEach(n=>n.pause());
const removetabs=(col)=>col.forEach(n=>n.removeAttribute('tabindex'));
const setindices=(col,i)=>col.forEach(n=>n.dataset.index=i);
const closeModal = e => {
if ( e.target == q('#close_button') || e.keyCode==27 || e.keyCode==13 ) {
setoverflow(body,'initial')
setdisplay(modal,'none');
setdisplay(items,'none');
setattribs(collection,'tabindex',1);
pausevideos(videos);
}
};
const bttnclickhandler=(e)=>{
switch(e.target.id){
case 'previous':
if( index > 0 )index--;
break;
case 'next':
if( index < _length )index++;
break;
}
setindices(bttns,index);
setdisplay(items,'none');
setdisplay(items[index],'initial');
return true;
}
// set the dataset attribute on all items within modal & gallery
qa('#gallery > *').forEach((n,i)=>n.dataset.index=i);
qa('#my_modal > *').forEach((n,i)=>n.dataset.index=i);
// assign event listener to each item in the gallery which displays
// that item & sets the global index.
qa('img,div',gallery).forEach( n=>n.addEventListener('click',function(e){
// Find which index the clicked item has and set the global index variable
index=Number( this.dataset.index );
// Find the respective item from the modal collection of nodes
let item=items[index];
// set properties
setdisplay(modal,'initial');
setdisplay(item,'initial');
setindices(bttns,index);
removetabs(collection);
}));
bttns.forEach(bttn=>bttn.addEventListener('click',e=>{
switch( e.target.id ){
case 'close_button':return closeModal(e);
default: return bttnclickhandler(e);
}
}));
d.addEventListener( 'keyup', closeModal );
* { box-sizing: border-box; }
html {
font-family: Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
color: white;
font-size: 16px;
background-color: black;
}
#gallery {
text-align: center;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select:none;
user-select:none;
}
#gallery img, video {
width: 100%;
max-width: 360px;
height: 480px;
object-fit: cover;
cursor: pointer;
image-rendering: -webkit-optimize-contrast;
}
.video_container {
position: relative;
display: inline-block;
width: 100%;
max-width: 360px;
height: 480px;
margin: 0;
padding: 0;
cursor: pointer;
}
/* Prevents video from moving when hovered on chrome */
.video_container video {
filter: brightness(1);
}
.fa-play {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 9999;
cursor: pointer;
font-size: 2rem;
color: white;
}
#gallery img:hover, .video_container:hover {
transition: opacity 0.3s;
opacity: 0.8;
}
.fa-play:hover {
transition: color 0.5s;
color: #181818;
}
#keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
#keyframes fadeOut {
from { opacity: 1; }
to { opacity: 0; }
}
#my_modal {
animation-name: fadeIn;
animation-duration: 0.5s;
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 9999;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.4);
overflow: auto;
margin: 0;
padding: 0;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select:none;
user-select:none;
}
.img_slides, .video_slides {
display: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}
.img_slides img {
max-height: 100%;
max-width: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
object-fit: contain;
image-rendering: -webkit-optimize-contrast;
}
.video_slides video{
height: auto;
max-height: 100%;
width: auto;
max-width: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
object-fit: contain;
image-rendering: -webkit-optimize-contrast;
}
#close_button {
cursor: pointer;
text-align: center;
font-size: 4rem;
width: 4rem;
position: absolute;
right: 0;
border-radius: 16px;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select:none;
user-select:none;
}
#previous {
cursor: pointer;
text-align: center;
font-size: 3rem;
width: 4rem;
position: absolute;
left: 0;
bottom: 0;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select:none;
user-select:none;
}
#next {
cursor: pointer;
text-align: center;
font-size: 3rem;
width: 4rem;
position: absolute;
right: 0;
bottom: 0;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select:none;
user-select:none;
}
#close_button:hover {
transition: opacity 0.1s;
opacity: 0.5;
}
#previous:hover {
transition: opacity 0.1s;
opacity: 0.5;
}
#next:hover {
transition: opacity 0.1s;
opacity: 0.5;
}
<div id="gallery">
<img src="//i.imgur.com/gyVTo26.jpg" alt="" tabindex="1">
<img src="//i.imgur.com/bEo04qh.jpg" alt="" tabindex="1">
<img src="//i.imgur.com/iRENtzp.jpg" alt="" tabindex="1">
<img src="//i.imgur.com/ElkQu54.jpg" alt="" tabindex="1">
<img src="//i.imgur.com/Aj25iuv.jpg" alt="" tabindex="1">
<div class="video_container">
<video src="//i.imgur.com/kKGF9Az.mp4" tabindex="1" muted></video>
<i class="fas fa-play"></i>
</div>
<div class="video_container">
<video src="//i.imgur.com/p7ohLnA.mp4" tabindex="1" muted></video>
<i class="fas fa-play"></i>
</div>
<img src="//i.imgur.com/PxWajo9.jpg" alt="" tabindex="1">
<img src="//i.imgur.com/CAh7F8p.jpg" alt="" tabindex="1">
</div>
<div id="my_modal">
<div class="img_slides">
<img src="//i.imgur.com/gyVTo26.jpg" alt="">
</div>
<div class="img_slides">
<img src="//i.imgur.com/bEo04qh.jpg" alt="">
</div>
<div class="img_slides">
<img src="//i.imgur.com/iRENtzp.jpg" alt="">
</div>
<div class="img_slides">
<img src="//i.imgur.com/ElkQu54.jpg" alt="">
</div>
<div class="img_slides">
<img src="//i.imgur.com/Aj25iuv.jpg" alt="">
</div>
<div class="video_slides">
<video src="//i.imgur.com/kKGF9Az.mp4" controls muted></video>
</div>
<div class="video_slides">
<video src="//i.imgur.com/p7ohLnA.mp4" controls muted></video>
</div>
<div class="img_slides">
<img src="//i.imgur.com/PxWajo9.jpg" alt="">
</div>
<div class="img_slides">
<img src="//i.imgur.com/CAh7F8p.jpg" alt="">
</div>
<span id="close_button" tabindex="0">×</span>
<span id="previous" tabindex="0"><</span>
<span id="next" tabindex="0">></span>
</div>
The idea remains the same in principal. Items within the gallery and items within the modal are assigned a data-index attribute when the page loads ( this could be done another way but this is, imo, easier & less cluttered )
The global index variable is changed according to whether the previous or next buttons is clicked and that new index value is used to select the item within the modal with that same data-index value. The buttons data-index attribute is changed to that new index value so that the next time a button is clicked the process can repeat. If the index is approaching the limits ( 0 or _length ) then the index remains unchanged so no error occurs trying to select an invalid index. Alternatively at that point the index could be reset to the opposite value perhaps so the process becomes cyclic - not tested though. Plus 1?

Why target of click event is incorrect in mobile devices?

As you can observe in the enclosed picture(https://i.ibb.co/yQSTK0H/test-section.jpg), I have divided specified area into 3 sections. now the problem is that when i toggle to mobile device in chrome developer tools and I'm trying to click in the blue area event fires as if I have clicked in red section.
Why is this happening?
https://codepen.io/anon/pen/xNxZKe
$(".time-filter").click(function (e) {
alert(e.target.className)
});
.time-filter {
position: fixed;
bottom: -100px;
right: -100px;
height: 200px;
width: 200px;
z-index: 99;
}
.time-filter-content {
position: relative;
height: 100%;
width: 100%;
border-radius: 50% !important;
overflow: hidden;
}
.section {
height: 100px;
width: 100px;
position: absolute;
top: 0;
right: 100px;
}
.red {
transform-origin: bottom right;
z-index: 3;
transform: rotate(59deg);
background-color:red
}
.blue {
transform-origin: bottom right;
z-index: 2;
transform: rotate(28deg);
background-color:blue
}
.black {
border-bottom: 0;
z-index: 1;
background-color:black
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="time-filter">
<div class="time-filter-content">
<div class="section red">
</div>
<div class="section blue">
</div>
<div class="section black">
</div>
</div>
</div>

Popup cannot close once opened multiple times

I have a simple popup that plays a movie and have a cross to close the popup and movie.
This works fine once, however if reopened, you cannot close the popup again. We could have multiple videos on here, for some reason the cross button t close is working first, but not if the popup is reopened.
Anyone have any suggestions? It seems as though the cross function is only working once.
$('.video-popup').click(function(e) {
$('.overlay').fadeIn();
$(this).parent('.video-img').find('.video-container, .close-video').fadeIn();
e.stopPropagation();
});
$('.close-video').click(function(f) {
vimeoWrap = $('.video-container');
vimeoWrap.html(vimeoWrap.html());
$('.overlay, .video-container, .close-video').fadeOut();
f.stopPropagation();
});
.video-container {
position: fixed;
z-index: 99;
max-width: 800px;
left: 50%;
top: 50%;
height: 500px;
display: none;
width: 100%;
padding: 0 15px;
}
.overlay {
position: fixed;
height: 100%;
width: 100%;
background: rgba(0, 14, 60, 0.8);
z-index: 9;
display: none;
top: 0;
left: 0;
right: 0;
}
.close-video {
position: absolute;
z-index: 99;
top: -50px;
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="pdf-video-block">
<div class="video-img">
<img src="https://d1e4pidl3fu268.cloudfront.net/66963e4a-ccba-4fdd-ba18-d5862fb4dba7/test.png" class="video-popup">
<div class="video-container">
<div class="close-video">X</div>
<iframe src="https://player.vimeo.com/video/8733915" width="100%" height="500" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
</div>
</div>
</div>
Thanks

You need to change your close function like:
$('body').on('click', '.close-video', function(f) {
//instead of
//$('.close-video').click(function(f) {
Because after you change parent element (like below) you can't access this element anymore.
vimeoWrap = $('.video-container');
vimeoWrap.html(vimeoWrap.html());

It works like this for me:
$('.video-popup').click(function(e) {
$('.overlay').fadeIn();
$('.video-container, .close-video').fadeIn();
e.stopPropagation();
e.stopPropagation();
});
$('.close-video').click(function(f) {
//vimeoWrap = $('.video-container');
//vimeoWrap.html(vimeoWrap.html());
$('.overlay, .video-container, .close-video').fadeOut();
f.stopPropagation();
});
.video-popup {
width: 100px;
height: 100px;
}
.video-container {
position: fixed;
z-index: 99;
max-width: 800px;
left: 50%;
top: 50%;
margin-top: 0;
margin-left: 0;
height: 500px;
display: none;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
width: 100%;
padding: 0 15px;
}
.overlay {
position: fixed;
height: 100%;
width: 100%;
background: rgba(0, 14, 60, 0.8);
z-index: 9;
display: none;
top: 0;
left: 0;
right: 0;
}
.close-video {
position: absolute;
z-index: 99;
top: 100px;
left: 20px;
display: none;
cursor: pointer;
color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img src="https://d1e4pidl3fu268.cloudfront.net/66963e4a-ccba-4fdd-ba18-d5862fb4dba7/test.png" class="video-popup">
<div class="overlay"></div>
<div class="video-container">
<div class="close-video" style="display: block;">X</div>
<iframe src="https://player.vimeo.com/video/317230912" width="100%" height="500" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
</div>

Your current click-listener becomes obsolete by vimeoWrap.html(vimeoWrap.html());.
Just put the listener on the parent and it will work even when you reset the html (just changed the first line):
$('.video-container').on("click",".close-video", function(f) {
...
});

Image Overlay Effect On click

I am trying to make an on click image overlay, where you click the left icon and an image fades or slides in, but when you click the right icon a different image fades or slides in. Also, when you click either icon, the associated images fade or slide out.
I've been trying to use
function on() {
document.getElementById("overlay").style.display = "block";
}
function off() {
document.getElementById("overlay").style.display = "none";
}
to make the display go from none to block when you click the icon, but there is no way to use this function with two separate links. I am not very great with javascript so any help would be greatly appreciated. Thanks.
https://jsfiddle.net/hzfw00L7/

Are you looking for something like this? I have used Jquery to speed up the coding!
$(document).ready(function() {
$(".left").click(function() {
$("#overlay").fadeIn(3000);
});
$(".right").click(function() {
$("#overlay2").fadeIn(3000);
});
$("#overlay").click(function() {
$("#overlay").fadeOut(2000);
});
$("#overlay2").click(function() {
$("#overlay2").fadeOut(2000);
});
});
#overlay {
position: fixed;
z-index: 4;
display: none;
width: 100%;
height: 350px;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 2;
cursor: pointer;
}
#overlay2 {
position: fixed;
z-index: 4;
display: none;
width: 100%;
height: 350px;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: red;
z-index: 2;
cursor: pointer;
}
#text {
position: absolute;
top: 50%;
left: 50%;
font-size: 50px;
color: white;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
#content {
padding: 20px;
}
a.left {
display: block;
position: absolute;
top: 320px;
left: 80px;
z-index: 6;
height: 20px;
background-color: purple;
color: white;
font-family: Arial;
padding: 10px;
}
a.right {
display: block;
position: absolute;
top: 320px;
right: 80px;
z-index: 7;
height: 20px;
background-color: magenta;
color: white;
font-family: Arial;
padding: 10px;
}
#buttons {
height: 50px;
width: 300px;
margin: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
</head>
<body>
<div id="overlay">
<div id="text">Overlay Text</div>
</div>
<div id="overlay2">
<div id="text">Overlay Text 2</div>
</div>
<div id="content">
<div id="buttons">
<a class="left">Turn on overlay effect</a>
</div>
<div id="content">
<a class="right">Turn on overlay effect 2</a>
</div>
</div>
</body>
</html>
Added Fade in and fade out animations!
For More Reference Go here

Categories