Develop Reference

How can i close my overlay modal box here,it doesnt work

I cant close my overlay modal Box.I try when the x is clicked than remove the class list,than the modal-box should be closed,but it is not recognized by js and css.First i have one ovarlay where should be showed the name and the position of the coas,after that when the user clicks on the arrow the modal box pop up in full width and height and that'sworks correct and after that i have one X span #times where when i click on the X i want the mdoal box to be disapered.I tried with addevent listener and everything itdoesnt work.
JS CODE
const makingTheInstructorSection = (arrInst) => {
for(let coach of arrInst) {
$('.instructorBoxes').append
(`
<div class="infoPerInstructor">
<img src="ImageGalleryPictures/instructor.jpg"/>
<div class="firstOverlay">
<p class="arrowPointerInstructor">→</p>
<div class="text">
<p class="arrowPointerInstructor">→</p>
<h3>${coach.name}</h3>
<p>${coach.position}</p>
</div>
</div>
<div class="secondOverlayOnClick">
<span class="closeTheInstructorBox">×</span>
<h5>Why you coach:</h5>
<p>${coach.WhyYouCoach}</p>
<h5>Favorite Movement:</h5>
<p>${coach.favoriteMovement}</p>
<h5>Favorite Quote:</h5>
<p>${coach.favoriteQuote}</p>
</div>
</div>
`)
}
}
// the code that i am trygin first,i am nto removing here
// because even here i dont get the span "x" in the console
// when i click that x in the browser
for(let item of closing) {
item.addEventListener("click" , (e) => {
console.log(e.target);
})
}
THE CSS CODE
.instructorBoxes {
display: grid;
grid-template-columns: repeat(auto-fill,minmax(300px,1fr));
grid-gap: 8px;
}
.instructorBoxes > div > img {
width: 100%;
height: 100%;
object-fit: cover;
}
.instructorBoxes div {
width: 100%;
height: 100%;
}
.infoPerInstructor {
position: relative;
width: 50%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.firstOverlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
/* background-color: #008CBA; */
background-color: #570194;
overflow: hidden;
width: 100%;
height: 100%;
transform: scale(0);
transition: .3s ease;
cursor: pointer;
z-index:1;
}
.infoPerInstructor:hover .firstOverlay {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.arrowPointerInstructor {
float: right;
font-size: 50px;
color: white;
}
.secondOverlayOnClick {
display: none;
}
.activeteTheSecondOverlayOnClick {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.9);
overflow-x: hidden;
transition: 0.5s;
display: block;
}
/* .DEactiveteTheSecondOverlayOnClick {
display: none;
} */
.activeteTheSecondOverlayOnClick p , h1 {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block;
transition: 0.3s;
}
.closeTheInstructorBox {
font-size: 30px;
color: red;
cursor: pointer;
float: right;
right: 0;
z-index: 100;
}

I found an answer.Because it is overlay it does not work,the best way to do is to make add event listener on body,and then check
if some event target contains that specific class list,then it will be found,and throught that event can you search the "modal box" depending on the structure on your html and remove some class list etc...
body.addEventListener("click" , (e) => {
if(e.target.classList.contains("closeTheInstructorBox")) {
console.log("x e ");
console.log(e.target.parentElement)
e.target.parentElement.remove("activeteTheSecondOverlayOnClick")
}

0 height navigation bar still visible?

I am designing a portfolio website and wanted to have my work slide up onto the screen when you clicked portfolio, same way a nav bar would slide over when you click a menu icon. The code I have works for nav bars on the right and left, but for the bottom it still shows the block even with the height of 0
unfortunately using display:none and changing it to display:block with jquery removes the smooth animation of it sliding onto screen.
html
<div id="portfolionav" class="portfolionav">
<a href="javascript:void(0)" class="closebtn"
onclick="closeNav2()">☛</a>
testing
Services
Clients
Contact
</div>
<div id=bottom>
<h1 onclick="openNav2()">PORTFOLIO</h1>
</div>
css
.portfolionav {
height: 0;
width: 100%;
position: fixed;
z-index: 3;
bottom: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
display: block;
}
.portfolionav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.portfolionav a:hover {
color: #f1f1f1;
}
.portfolionav .closebtn {
position: absolute;
bottom: 25px;
right: 75px;
font-size: 36px;
writing-mode: vertical-rl;
}
javascript
function openNav2() {
document.getElementById("portfolionav").style.height = "100vh";
}
function closeNav2() {
document.getElementById("portfolionav").style.height = "0";
}

Use display: none instead of height.

Once the portfolio div is fixed, you can use the top property instead of cotroling the animation by the height. You also have to set the default height as 100vh.
So your portfolionav should be:
.portfolionav {
height: 100vh;
width: 100%;
position: fixed;
z-index: 3;
top: 100vh;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
display: block;
}
And your JavaScript functions:
function openNav2() {
document.getElementById("portfolionav").style.top = "0";
}
function closeNav2() {
document.getElementById("portfolionav").style.top = "100vh";
}
Now, you just have to adjust the hand-button as you wish.

You can combined height and paddingTop for show and hide navigation because of padding it is showing when you set height:0px;
function openNav2() {
debugger;
document.getElementById("portfolionav").style.height = "100vh";
document.getElementById("portfolionav").style.paddingTop = "60px";
}
function closeNav2() {
document.getElementById("portfolionav").style.height = "0";
document.getElementById("portfolionav").style.paddingTop = "0";
}
.portfolionav {
height: 0;
width: 100%;
position: fixed;
z-index: 3;
bottom: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 0px;
display: block;
}
.portfolionav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.portfolionav a:hover {
color: #f1f1f1;
}
.portfolionav .closebtn {
position: absolute;
bottom: 25px;
right: 75px;
font-size: 36px;
writing-mode: vertical-rl;
}
<div id="portfolionav" class="portfolionav">
<a href="javascript:void(0)" class="closebtn"
onclick="closeNav2()">☛</a>
testing
Services
Clients
Contact
</div>
<div id=bottom>
<h1 onclick="openNav2()">PORTFOLIO</h1>
</div>

Open and close lightbox

I make a lightbox, but I have a little problem.
I can close the lightbox when I click on the X button, but I want to close the lightbox when I click outside the box too.
And the second isuee, is when I have on open lightbox and I click on another. The first don't close and then, I have two lightbox opened.
Any idea guys?
Thanks for all :)

$(document).ready(function(){
$("a#show-panel").click(function(){
$("#lightbox, #lightbox-panel").fadeIn(300);
});
$("a#close-panel").click(function(){
$("#lightbox, #lightbox-panel").fadeOut(300);
})
});
.full_section_inner { z-index: auto; }
.link { width: 100% height: auto; position: absolute; cursor: pointer; }
.link:hover { text-decoration: underline; }
#link-text { width: 100%; position: absolute; bottom: 0px; font-size: 20px; line-height: 22px; letter-spacing: 0px; }
.status { position: absolute; top: 0; left: -100vw; }
.status:checked ~ .content { -webkit-transform: none; transform: none; }
.status:checked ~ .backdrop { bottom: 0; opacity: 1; z-index: 1; transition: 0.3s opacity ease-in-out; }
.lightbox { position: fixed; right: 0; left: 0; height: 0; padding: 0; z-index: 100; top: 20%; }
.lightbox .content { display: flex; flex-direction: column; overflow: hidden; position: relative; z-index: 2; max-width: 550px; max-height: 80vh; margin: 20px auto; padding: 25px; background: #fff; -webkit-transform: translateY(-200%); transform: translateY(-200%); transition: 0.3s -webkit-transform ease-in-out; transition: 0.3s transform ease-in-out; transition: 0.3s transform ease-in-out, 0.3s -webkit-transform ease-in-out; border: 3px solid; }
.lightbox .header-lightbox { display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: center; padding-bottom: 15px; }
.lightbox .header-lightbox h2 { margin: 0; font-size: 28px; line-height: 30px; }
.button { font-size: 30px; }
.button:hover { cursor: pointer; }
.text-lightbox { font-family: sans-serif; font-size: 16px; line-height: 20px; color: #000; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="link" for="lightbox-1">
<h2 id="link-text">Ona Bros</h2>
</label>
<aside class="lightbox">
<input type="checkbox" class="status" id="lightbox-1" />
<article class="content">
<header class="header-lightbox">
<h2>Title</h2>
<label class="button" for="lightbox-1">X</label>
</header>
<main class="text-lightbox">
<p>Lorem ipsum dolor sit amet.</p>
</main>
</article>
</aside>
Without code samples it might be kind of hard to answer, but in theory, you could try something like this:
I can close the lightbox when I click on the X button, but I want to close the lightbox when I click outside the box too.
I would try to have a light grey, transparent background come up as well covering the whole screen, and on click of that, it can close the lightbox
And the second isuee, is when I have on open lightbox and I click on another. The first don't close and then, I have two lightbox opened.
I would have some variable at a higher level as a sort of control for the lightbox. If you see it is true, you can either prevent the second lightbox from opening, or you can close the first one and open the second.

Waypoints not working properly with my sidenav

I'm attempting to make a side nav on my site which adds the "active" class to it's four buttons but I cannot seem to make it work properly.
I've successfully added waypoints to the code but they always seem to be a little off and it takes a bit of extra scrolling from the user to activate the waypoint. I've also tried to follow the {offset} rules in the documentation but to no veil. They either stop working properly from last to first or they stop doing so from first to last.
In order to make the sidenav work, I've split the page in columns, as shown in the CSS below. Feel free to provide insight on the code, as this is a learning exercise and I KNOW my code is pretty dirty at the moment (particularly Javascript)
The side nav:
<div class="sidebar verticalized" id="sidebar-verticalized">
<ul id="sidenav" class="side nav-fixed hide-on-med-and-down">
<li class="side-link">
<a class="side-link-first link1" onclick="clickOne()" href="#">01</a>
</li>
<li class="side-link">
02
</li>
<li class="side-link">
03
</li>
<li class="side-link">
04
</li>
</ul>
</div>
The CSS:
html {
overflow: scroll;
overflow-x: hidden;
}
::-webkit-scrollbar {
width: 0px; /* remove scrollbar space */
background: transparent; /* optional: just make scrollbar invisible */
}
.page{
display: grid;
grid-template-columns: 300px auto;
}
.sidebar{
position:fixed;
width:300px;
}
.main{
grid-column-start:2;
}
.verticalized {
margin: 0px;
padding:0px;
float: left;
top: 50%;
transform: translateY(-50%) translateX(-50%);
left:9%;
}
my mess of JS (each section is declared below):
var $section1 = $('.header');
var $section2 = $('.portfolio');
var $section3 = $('.what-we-do');
var $section4 = $('.contact');
var $link1 = $('.link1');
var $link2 = $('.link2');
var $link3 = $('.link3');
var $link4 = $('.link4');
$section1.waypoint(function (){
$link1.addClass('active');
$link2.removeClass('active');
$link3.removeClass('active');
$link4.removeClass('active');
});
$section2.waypoint(function(){
$link1.removeClass('active');
$link2.addClass('active');
$link3.removeClass('active');
$link4.removeClass('active');
});
$section3.waypoint(function(){
$link1.removeClass('active');
$link2.removeClass('active');
$link3.addClass('active');
$link4.removeClass('active');
});
$section4.waypoint(function(){
$link1.removeClass('active');
$link2.removeClass('active');
$link3.removeClass('active');
$link4.addClass('active');
});
What I've tried so far:
Offset: bottom-in-view (sections are sometimes too large and therefore the old active element remains)
Offset: +/- x% (This fixes the issue from one end but not the other one: I could be going from 1 to 4 on links and it works, but 4 to 1 is broken and vice versa)
Any and all advice/tips are welcome. I'm trying to imitate the bootstrap navbar behaviour with active items for each section.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<style>
#import url('https://fonts.googleapis.com/css?family=Varela+Round');
html, body {
overflow-x: hidden;
height: 100%;
}
body {
background: #fff;
padding: 0;
margin: 0;
font-family: 'Varela Round', sans-serif;
}
.header {
display: block;
margin: 0 auto;
width: 100%;
max-width: 100%;
box-shadow: none;
background-color: #FC466B;
position: fixed;
height: 60px!important;
overflow: hidden;
z-index: 10;
}
.main {
margin: 0 auto;
display: block;
height: 100%;
margin-top: 60px;
}
.mainInner{
display: table;
height: 100%;
width: 100%;
text-align: center;
}
.mainInner div{
display:table-cell;
vertical-align: middle;
font-size: 3em;
font-weight: bold;
letter-spacing: 1.25px;
}
#sidebarMenu {
height: 100%;
position: fixed;
left: 0;
width: 250px;
margin-top: 60px;
transform: translateX(-250px);
transition: transform 250ms ease-in-out;
background:#414956;
}
.sidebarMenuInner{
margin:0;
padding:0;
border-top: 1px solid rgba(255, 255, 255, 0.10);
}
.sidebarMenuInner li{
list-style: none;
color: #fff;
text-transform: uppercase;
font-weight: bold;
padding: 20px;
cursor: pointer;
border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}
.sidebarMenuInner li span{
display: block;
font-size: 14px;
color: rgba(255, 255, 255, 0.50);
}
.sidebarMenuInner li a{
color: #fff;
text-transform: uppercase;
font-weight: bold;
cursor: pointer;
text-decoration: none;
}
input[type="checkbox"]:checked ~ #sidebarMenu {
transform: translateX(0);
}
input[type=checkbox] {
transition: all 0.3s;
box-sizing: border-box;
display: none;
}
.sidebarIconToggle {
transition: all 0.3s;
box-sizing: border-box;
cursor: pointer;
position: absolute;
z-index: 99;
height: 100%;
width: 100%;
top: 22px;
left: 15px;
height: 22px;
width: 22px;
}
.spinner {
transition: all 0.3s;
box-sizing: border-box;
position: absolute;
height: 3px;
width: 100%;
background-color: #fff;
}
.horizontal {
transition: all 0.3s;
box-sizing: border-box;
position: relative;
float: left;
margin-top: 3px;
}
.diagonal.part-1 {
position: relative;
transition: all 0.3s;
box-sizing: border-box;
float: left;
}
.diagonal.part-2 {
transition: all 0.3s;
box-sizing: border-box;
position: relative;
float: left;
margin-top: 3px;
}
input[type=checkbox]:checked ~ .sidebarIconToggle > .horizontal {
transition: all 0.3s;
box-sizing: border-box;
opacity: 0;
}
input[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-1 {
transition: all 0.3s;
box-sizing: border-box;
transform: rotate(135deg);
margin-top: 8px;
}
input[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-2 {
transition: all 0.3s;
box-sizing: border-box;
transform: rotate(-135deg);
margin-top: -9px;
}
</style>
<body>
<div class="header"></div>
<input type="checkbox" class="openSidebarMenu" id="openSidebarMenu">
<label for="openSidebarMenu" class="sidebarIconToggle">
<div class="spinner diagonal part-1"></div>
<div class="spinner horizontal"></div>
<div class="spinner diagonal part-2"></div>
</label>
<div id="sidebarMenu">
<ul class="sidebarMenuInner">
<li>Jelena Jovanovic</li>
<li>Company</li>
<li>Instagram</li>
<li>Twitter</li>
<li>YouTube</li>
<li>Linkedin</li>
</ul>
</div>
<div id='center' class="main center">
<div class="mainInner">
<div>PURE CSS SIDEBAR TOGGLE MENU</div>
</div>
<div class="mainInner">
<div>PURE CSS SIDEBAR TOGGLE MENU</div>
</div>
<div class="mainInner">
<div>PURE CSS SIDEBAR TOGGLE MENU</div>
</div>
</div>
</body>`enter code here`

How to create change image option on mousehover like in gmail account?

I am trying to create change image functionality like we can do in GMail account for changing our image.
On mousehover event it shows change image option.
Maybe it is some kind of new concept that I don't know. I am not very good in CSS and JavaScript but I guess that it is a div with changed z-index showing change image option.
Could you please explain how to achieve that kind of effect?

Here is a version using the css pseudo-element :after:
demo
HTML:
<a href="#" class="image">
<img src="http://www.gravatar.com/avatar/c0b4455b645967c1431d73beea9d9c54?s=128&d=identicon&r=PG">
</a>
CSS:
.image img{
width: 100px;
text-decoration: none;
}
.image:after{
content: "Change Image";
display: block;
position: relative;
top: -25px;
width: 100px;
background-color: rgba(77, 144, 254, 0.7);
color: white;
font-weight: bold;
text-decoration: none;
opacity: 0;
transition: opacity 300ms;
}
.image:hover:after{
opacity: 1;
}

If you want a pure CSS solution than you can try it like this
Demo
div.wrap {
position: relative;
display: inline-block;
}
div.wrap img {
position: absolute;
}
div.wrap img:nth-of-type(1) {
opacity: 0;
transition: opacity 3s;
}
div.wrap:hover img:nth-of-type(1) {
z-index: 2;
opacity: 1;
}
div.wrap img:nth-of-type(2) {
opacity: 1;
transition: opacity 3s;
}
div.wrap:hover img:nth-of-type(2) {
opacity: 0;
}

is this what you mean?
CSS
.image {
width: 100px;
height: auto;
}
.popup {
top: -25px;
left: 25px;
width: 150px;
height: 75px;
position: relative;
display: none;
background-color: grey;
border-style: solid;
border-width: 1px;
border-radius: 3px;
}
.image:hover + .popup {
display: block;
}
.popup:hover {
    display: block;
}
HTML
<img class="image" src="http://img83.imageshack.us/img83/1905/dsc005142kc.jpg" />
<div class="popup">Change Image</div>
On jsfiddle

I'm not sure I understand what you want but I'd say something like that :
HTML :
<img src="yourimage" />
change
CSS :
a.appearOnHover {
display: none;
}
a.appearOnHover {
display: block;
background-color: #777777;
}