Develop Reference

CSS/JS keep DIV hidden as default and open on click

I have a simple emoji picker and the ballon remains open as default when the page is refreshed, I can't find a way how to keep it close and only open the ballon when pressing a button.
HTML
<div class="container">
<div class="emoji-btn open"><img src='images/smileys.png' title='Smileys'>
<!--this is the div I want to keep hidden till I click the button > --> <div class="emoji-popup">
<div class="emoji-wrapper"></div>
</div>
</div>
</div>
JS
emojibtn.addEventListener("click", function (e) {
e.stopPropagation();
this.classList.toggle("open");
});
document.body.addEventListener("click", function () {
emojibtn.classList.remove("open");
});
CSS
.emoji-popup {
position: absolute;
top: -140px;
left: 10px;
height: 130px;
width: 194px;
background: #999;
border-radius: 2px;
text-align: left;
overflow-y: auto;
opacity: 0;
pointer-events: none;
transition: all 0.25s;
box-sizing: border-box;
}
.emoji-wrapper {
overflow: hidden;
padding: 10px;
box-sizing: border-box;
}
.emoji-popup .emoji-img {
margin: auto;
width: 30px;
height: 30px;
text-align: center;
border-radius: 5px;
}
.emoji-popup .emoji-img:hover {
background: rgba(0, 0, 0, 0.25);
}

You can add the property display: none; ( https://developer.mozilla.org/en-US/docs/Web/CSS/display), visibility: hidden(https://developer.mozilla.org/en-US/docs/Web/CSS/visibility) or opacity: 0; (https://developer.mozilla.org/en-US/docs/Web/CSS/opacity). Then onClick you can add the class open with the properties display: block (if it's a div), visibility: visible or opacity: 1.

My slideshows are not working with node in localhost

As you can see I have positioned my divs properly position: relative; for slideshow and position: absolute; for containers
I have looked at similar questions that others posted and tried to fix the issue. It is still not working. Everything else works except slideshows. Slideshow shows only the last image. Does not change. My side panels work perfectly.
previously I had not added $(document).ready(function ()... In hopes of fixing issue I tried it but something else seems to be the problem. Any help would be appreciated, Thank you!
here are my files
//jshint esversion:6
$(document).ready(function (){
$("#slideshow > div:gt(0)").hide();
setInterval(function(){
$('#slideshow > div:first').fadeOut(1000).next().fadeIn(1000).end().appendTo('#slideshow');
}, 3000);
});
/* Set the width of the sidebar to 250px (show it) */
function openNav() {
document.getElementById("mySidepanel").style.width = "250px";
}
/* Set the width of the sidebar to 0 (hide it) */
function closeNav() {
document.getElementById("mySidepanel").style.width = "0";
}
img{
background-size: cover;
position: absolute;
background: rgba(0, 0, 0, 0.5);
}
.container {
width: 100%;
}
.container img {
height: 100%;
width: 100%;
border-radius: 20px 20px;
}
.QuoteBox{
bottom: 0;
left: 50px;
position: absolute;
height: auto;
width: auto;
text-align:center;
}
.authorName{
color: #e79cc2;
font-family:'Cinzel', serif;
}
p{
color: #a6dcef;
font-family: "Courier New", Courier, monospace;
font-size: 15px;
align-items: center;
}
.slide{
background-image: url('https://paintingvalley.com/images/dark-abstract-painting-11.jpg');
background-size: cover;
background-position: right;
background-repeat: no-repeat;
background-color: #ff4301;
background-blend-mode: multiply;
}
.backmost{
/* background-color: #1f4068; */
height: 100vh;
width: 100vw;
position: absolute;
top: 0;
left: 0;
}
.slide{
/* background-color: #e1ffc2; */
top: 0;
left: 0;
height: 100vh;
width: 100vw;
position: relative;
box-shadow: 25px 25px 50px 0 #111d5e inset, -25px -25px 50px 0 #111d5e inset;
}
#slideshow{
/* background-color: #ffa931; */
top: 0;
left: 37px;
height: 91.75%;
width: 94.75%;
position: relative;
}
#slideshow > div > img{
position: absolute;
}
/* The sidepanel menu */
.sidepanel {
height: 250px; /* Specify a height */
width: 0; /* 0 width - change this with JavaScript */
position: fixed; /* Stay in place */
z-index: 1; /* Stay on top */
top: 0;
left: 0;
background-color: #192965; /* Black*/
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 60px; /* Place content 60px from the top */
transition: 0.5s; /* 0.5 second transition effect to slide in the sidepanel */
}
/* The sidepanel links */
.sidepanel a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
/* When you mouse over the navigation links, change their color */
.sidepanel a:hover {
color: #f1f1f1;
}
/* Position and style the close button (top right corner) */
.sidepanel .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
/* Style the button that is used to open the sidepanel */
.openbtn {
font-size: 15px;
cursor: pointer;
background-color: #192965;
color: white;
padding: 5px 10px;
border: none;
}
.openbtn:hover {
background-color: #192965;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Name</title>
<link href="/css/homestyles.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Cinzel&family=El+Messiri&display=swap" rel="stylesheet">
</head>
<body>
<div class="backmost">
<div class="slide">
<div class="QuoteBox">
<p>“Vision is the art of seeing things invisible.” <span class="authorName"> ― Jonathan Swift</span></p>
</div>
<div id="mySidepanel" class="sidepanel">
×
About
Work Experience
Art
Football
</div>
<button class="openbtn" onclick="openNav()">☰ Pawan Panta</button>
<div id="slideshow">
<div class="container">
<img src="/images/IMG_E2670.JPG">
</div>
<div class ="container">
<img src="/images/IMG_E2668.JPG">
</div>
<div class="container">
<img src="/images/IMG_E2665.JPG">
</div>
</div>
</div>
</div>
<script src="myWebJs.js" charset="utf-8"></script>
<script src="JsFiles/homepageJS.js" charset="utf-8"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</body>
</html>

I made some modifications in $(document).ready() and replaced the images with inline data to visualize the fade in / fade out and the images get replaced now.
Looks like the fadeOut function returns immediately and not after the fading is finished. I created a callback function which gets called once fadeOut, see https://api.jquery.com/fadeOut/ which seems to do the trick.
//jshint esversion:6
$(document).ready(function (){
//$("#slideshow > div:gt(0)").hide();
setInterval(function(){
$('#slideshow > div:first').fadeOut(1000, "linear", function() { $('#slideshow > div:first').appendTo('#slideshow'); });
$('#slideshow > div:first').next().fadeIn(1000);
}, 3000);
});
/* Set the width of the sidebar to 250px (show it) */
function openNav() {
document.getElementById("mySidepanel").style.width = "250px";
}
/* Set the width of the sidebar to 0 (hide it) */
function closeNav() {
document.getElementById("mySidepanel").style.width = "0";
}
img{
background-size: cover;
position: absolute;
background: rgba(0, 0, 0, 0.5);
}
.container {
width: 100%;
}
.container img {
height: 100%;
width: 100%;
border-radius: 20px 20px;
}
.QuoteBox{
bottom: 0;
left: 50px;
position: absolute;
height: auto;
width: auto;
text-align:center;
}
.authorName{
color: #e79cc2;
font-family:'Cinzel', serif;
}
p{
color: #a6dcef;
font-family: "Courier New", Courier, monospace;
font-size: 15px;
align-items: center;
}
.slide{
background-image: url('https://paintingvalley.com/images/dark-abstract-painting-11.jpg');
background-size: cover;
background-position: right;
background-repeat: no-repeat;
background-color: #ff4301;
background-blend-mode: multiply;
}
.backmost{
/* background-color: #1f4068; */
height: 100vh;
width: 100vw;
position: absolute;
top: 0;
left: 0;
}
.slide{
/* background-color: #e1ffc2; */
top: 0;
left: 0;
height: 100vh;
width: 100vw;
position: relative;
box-shadow: 25px 25px 50px 0 #111d5e inset, -25px -25px 50px 0 #111d5e inset;
}
#slideshow{
/* background-color: #ffa931; */
top: 0;
left: 37px;
height: 91.75%;
width: 94.75%;
position: relative;
}
#slideshow > div > img{
position: absolute;
}
/* The sidepanel menu */
.sidepanel {
height: 250px; /* Specify a height */
width: 0; /* 0 width - change this with JavaScript */
position: fixed; /* Stay in place */
z-index: 1; /* Stay on top */
top: 0;
left: 0;
background-color: #192965; /* Black*/
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 60px; /* Place content 60px from the top */
transition: 0.5s; /* 0.5 second transition effect to slide in the sidepanel */
}
/* The sidepanel links */
.sidepanel a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
/* When you mouse over the navigation links, change their color */
.sidepanel a:hover {
color: #f1f1f1;
}
/* Position and style the close button (top right corner) */
.sidepanel .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
/* Style the button that is used to open the sidepanel */
.openbtn {
font-size: 15px;
cursor: pointer;
background-color: #192965;
color: white;
padding: 5px 10px;
border: none;
}
.openbtn:hover {
background-color: #192965;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Name</title>
<link href="/css/homestyles.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Cinzel&family=El+Messiri&display=swap" rel="stylesheet">
</head>
<body>
<div class="backmost">
<div class="slide">
<div class="QuoteBox">
<p>“Vision is the art of seeing things invisible.” <span class="authorName"> ― Jonathan Swift</span></p>
</div>
<div id="mySidepanel" class="sidepanel">
×
About
Work Experience
Art
Football
</div>
<button class="openbtn" onclick="openNav()">☰ Pawan Panta</button>
<div id="slideshow">
<div class="container">
<img src="data:image/png;base64,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">
</div>
<div class ="container">
<img src="data:image/png;base64,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">
</div>
<div class="container">
<img src="data:image/png;base64,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">
</div>
</div>
</div>
</div>
<script src="myWebJs.js" charset="utf-8"></script>
<script src="JsFiles/homepageJS.js" charset="utf-8"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</body>
</html>

According to the button 1 image is shown

I have a function when the "user" click on the button shows an image, but each button shows a different image. So what I'm looking for is when the user clicks on another button the image of the previous one is hidden
And I also need some advice or a guide to do a doubleclick function, keep the id and it is shown in a text
I'm using javascript, but I also believe that there is a way using jquery
Sorry my English is not the best, although I think I understand.
function showimage(id) {
var element = document.getElementById(id);
if (element.classList) {
element.classList.toggle(id);
} else {
var classes = element.className.split(" ");
var i = classes.indexOf(id);
if (i >= 0)
classes.splice(i, 1);
else
classes.push(id);
element.className = classes.join(" ");
}
}
html {
overflow: ;
}
.background {
filter: blur(5px);
-webkit-filter: blur(5px);
width: 100%;
height: 100%
}
#font-face {
font-family: 'avenir';
src: url(../fonts/Avenir Next Heavy.otf)
}
#font-face {
font-family: 'Avenir Next LT Pro Heavy Condensed Italic';
font-style: normal;
font-weight: normal;
src: url(../fonts/AvenirNextLTPro-HeavyCnIt.woff) format('woff');
}
.general {
background-image: url(../img/miSlJSc.png);
position: absolute;
top: 0%;
left: -1%;
width: 1584px;
height: 900px;
}
.contain1 {
background: rgba(0, 0, 0, 0.0);
position: absolute;
left: 100px;
top: 258px;
width: 1048px;
height: 254px
}
.contain2 {
background: rgba(0, 0, 0, 0.0);
position: absolute;
left: 100px;
top: 526px;
width: 1048px;
height: 254px;
}
button {
background: #005F38;
background: rgba(0, 95, 56, 1);
border-style: Solid;
border-color: #112302;
border-color: rgba(17, 35, 2, 1);
border-width: 1px;
position: absolute;
left: 439px;
top: 822px;
width: 359px;
height: 60px;
border-radius: 7px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px
}
#comprar {
left: 1185px
}
.styletext {
font-family: Avenir Next LT Pro Heavy Condensed Italic;
font-size: 40px;
color: #FCFCFC;
color: rgb(252, 252, 252);
}
.boxsmall {
background: #000000;
background: rgba(0, 0, 0, 0.3);
position: relative;
top: -14px;
left: 0px;
width: 117px;
height: 120px;
margin-left: 10px;
margin-top: 14px;
border-width: 0px;
-moz-border-radius: 0px;
-webkit-border-radius: 0px
}
.boxbig {
background: rgba(0, 0, 0, 0.3);
position: relative;
left: 0%;
top: -5%;
width: 249px;
height: 120px;
margin-left: 10px;
margin-top: 14px;
border-width: 0px;
-moz-border-radius: 0px;
-webkit-border-radius: 0px
}
.boxsellect {
background: #000000;
background: rgba(0, 0, 0, 1);
opacity: 0.65;
position: absolute;
left: 898px;
top: 526px;
width: 249px;
height: 120px
}
.icon * {
position: relative;
top: 0px;
left: -15px;
width: 135px;
height: 33px;
transform: rotate(315deg)
}
#botella .icon * {
width: 130px;
height: 35px
}
#punoAmericano .icon * {
width: 70px;
height: 35px;
left: 0px
}
.icon-p * {
left: -10px;
width: 92px;
height: 72px;
}
#pistol_mk2 .icon-p {
transform: scale(1.0, 1.0);
left: -20px;
}
.statsPistol {
width: 100%;
padding: 70px 105px;
background-image: url(https://image.flaticon.com/icons/svg/53/53524.svg);
position: absolute;
top: -270px;
left: 1090px
}
.statsPistolmk2 {
width: 100%;
padding: 70px 105px;
background-image: url(https://image.flaticon.com/icons/svg/1034/1034131.svg);
position: absolute;
top: -270px;
left: 1090px
}
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" type="text/javascript"></script>
<script src="js/script.js" type="text/javascript"></script>
<link rel="stylesheet" href="style/styles.css" type="text/css">
<style>
/*.general {display: none;}*/
</style>
</head>
<body>
<div class="full-screen">
<div class="general">
<div class="contain2">
<button class="boxsmall" id="pistol" onclick="showimage('statsPistol')">
<div class="icon-p">
<img src="https://image.flaticon.com/icons/svg/42/42829.svg">
</div>
<div id="statsPistol">
</div>
</button>
<button class="boxsmall" id="pistol_mk2" onclick="showimage('statsPistolmk2')">
<div class="icon-p">
<img src="img/pistolas/Pistol-mk2-icon.png">
</div>
<div id="statsPistolmk2">
</div>
</button>
</div>
<button class="styletext" id="comprar">Comprar</button>
<button class="styletext" id="salir">Salir</button>
</div>
</div>
</body>
</html>

This is not at all difficult to do using jQuery. Just hide all the images (including those that aren't showing), and show the one that has been clicked. You don't need to worry about hiding only the previous image, because you don't have enough buttons to improve perceived performance if you do.
The code works like this:
When you click on an element with the class boxsmall:
Hide all images that are inside any element with the class boxsmall.
Show the image that is inside the element that has been clicked.
A couple of other bits of advice:
Don't have any HTML elements with the same id. If you don't need an id, just leave it out.
Don't set duplicate CSS properties, as you have with some of your background and color properties. The lower of the two will override the upper one, so there's no point to it.
$(document).ready(function($) {
$('.boxsmall').on('click', function(e) {
$('.boxsmall img').hide();
$(this).find('img').show();
});
});
.boxsmall {
width: 122px;
height: 122px;
border-radius: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="full-screen">
<div class="general">
<div class="contain1">
<button class="boxsmall">
<div class="icon">
<img src="https://image.flaticon.com/icons/svg/42/42829.svg">
</div>
</button>
<button class="boxsmall">
<div class="icon">
<img src="https://image.flaticon.com/icons/svg/42/42829.svg">
</div>
</button>
<button class="boxsmall">
<div class="icon">
<img src="https://image.flaticon.com/icons/svg/42/42829.svg">
</div>
</button>
<button class="boxsmall">
<div class="icon">
<img src="https://image.flaticon.com/icons/svg/42/42829.svg">
</div>
</button>
</div>
</div>
</div>
</body>

How can I scroll a lightbox outside the box?

I have on my website some lightboxes and now I can scroll them only when my pointer is inside the box.
How can I scroll them outside the box, like when you open a comment on Trello or on Pinterest?
Here is my code:
//Declare vars
var $lightboxAnchor = $("a.list_message");
//Lightbox
$(".overlay-background").hide();
//Lightbox functions from leistungen
$lightboxAnchor.click(function() {
var $attr = $(this).attr("href").replace("#", "");
console.log($attr);
$('div[id=' + $attr + ']').show();
$("body").addClass("noscroll");
});
$(".overlay-background").click(function() {
console.log('alert');
$(this).hide();
$("body").removeClass("noscroll");
});
$(".close_lightbox").click(function() {
console.log('alert');
$(".overlay-background").hide();
$("body").removeClass("noscroll");
});
.overlay-background {
display: block;
position: absolute;
top: 0;
left: 0;
height:100%;
width: 100%;
cursor: pointer;
z-index: 1000; /* high z-index */
background: #000; /* fallback */
background: rgba(0,0,0,0.75);
}
.overlay-content
{
display: block;
background: #fff;
padding: 1%;
width: 70%;
height:70%;
position: absolute;
top: 15%;
left: 10%;
margin: 0;
cursor: default;
z-index: 10001;
border-radius: 4px;
box-shadow: 0 0 5px rgba(0,0,0,0.9);
}
<div class="overlay-background">
<div class="overlay-content">
<object type="text/html" data="https://en.wikipedia.org/wiki/Dentist" style="width: 100%; height: 100%;" </object>
</div>
</div>
I`ve made this JSFiddle as a representation: jsfiddle.net/9mesun50 As you can see the lightbox can be scrolled only inside it. If I have the pointer outside the lightbox I can scroll it.
Thank you for help!

Scrolling bug in Firefox

I've been working on an overlay menu recently. It'll contain a long list of names (can't be avoided). It behaves perfectly on Chrome, but the list refuses to scroll on Firefox. I've no idea what's causing this but have created a JSFiddle to show what's happening.
Link here
A bit of the HTML:
<div class="full-menu">
<div class="full-menu--middle">
<button class="menu-toggle menu-toggle--close"></button>
<div class="section group menu_items">
<ul>
<li>a bunch of options vvv</li>
</ul>
</div>
</div>
</div>
A bit of the CSS:
html,
body {
height: 100%;
width: 100%;
}
.main_menu {
display: none;
}
.full-menu {
visibility: hidden;
display: table;
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
opacity: 0;
}
.full-menu--open {
visibility: visible;
opacity: 1;
}
.full-menu--middle {
display: table-cell;
vertical-align: middle;
}
.menu-toggle {
background-color: transparent;
border: 0;
color: #fff;
position: fixed;
left: 20px;
top: 20px;
}
.menu-toggle:before {
content: '\f0c9';
font-family: 'FontAwesome';
margin: 0 20px 0 0;
}
.menu-toggle--close {
position: fixed;
top: 20px;
left: 20px;
}
.menu-toggle_black {
background-color: transparent;
border: 0;
color: #000;
position: fixed;
left: 20px;
top: 20px;
}
.menu-toggle_black:before {
content: '\f0c9';
font-family: 'FontAwesome';
margin: 0 20px 0 0;
}
.menu_items{
overflow: scroll;
height: 100%;
}
.page_inner_ {
display: table-cell;
vertical-align: middle;
}
.page_container {
display: table;
height: 100%;
width: 100%;
position: relative;
color: #ffffff;
}
Any help would be very much appreciated!
Thanks

Maybe you should give position: absolute; to .full-menu, instead of fixed.

Take display:table; off of .full-menu and take display:table-cell; off of .full-menu--middle then add overflow:scroll; to .full-menu.

How to Fix Overflow Issues in CSS Flex Layouts:
"... add min-height: 0; to the flex child that has our overflow container ..."
https://moduscreate.com/blog/how-to-fix-overflow-issues-in-css-flex-layouts/