We Keep Coding

Cannot hit button with eventlistener click when using opacity

So i have a question, on why something does not work..
I have a small mobile menu, when i click the main button, i am trying to expand the child items, with some animation.
To start with, i was hiding the child items beneath the main item, and they had opacity 0.
and then on click, i would set a class on the container, and they would get opacity 1.
But my event never fires...
But then if i use display:none on them instead of opacity 0, it works fine...
Codepen example: https://codepen.io/andrelange91/pen/abzmoww
Html
<div class="nav-wheel" id="nav-wheel__container">
<button class="nav-wheel__main" id="nav-wheel__btn">
<i class="fas fa-car"></i>
</button>
<a class="nav-wheel__sublink">
<i class="fas fa-truck-pickup"></i>
</a>
<a class="nav-wheel__sublink">
<i class="fas fa-truck-pickup"></i>
</a>
<a class="nav-wheel__sublink">
<i class="fas fa-truck-pickup"></i>
</a>
</div>
Styling
.nav-wheel{
position:fixed;
left:50%;
bottom:5%;
transform:translate(-50%,-5%);
.nav-wheel__main, .nav-wheel__sublink{
background-color:orange;
border:0;
color:white;
width:70px;
height:70px;
border-radius:50%;
position:absolute;
z-index:-1;
bottom:0;
left:0;
box-shadow:0 0 8px rgba(0,0,0,0.5);
transition: all 750ms cubic-bezier(.218,.63,.325,1);
cursor:pointer;
&:focus{
outline:none;
}
i.fas{
font-size:32px;
}
}
.nav-wheel__main{
}
.nav-wheel__sublink{
z-index:-1;
display:none;
text-align:center;
//opacity:0; // no good...
i.fas{
margin-top:17px;
}
}
&.active{
transition: all 750ms cubic-bezier(.218,.63,.325,1);
.nav-wheel__main{
z-index:50;
left:0;
}
.nav-wheel__sublink{
//opacity:1; // no good...
display:block;
&:nth-child(2){
left: -75px;
bottom: 55px;
}
&:nth-child(3){
left:0;
bottom:95px;
}
&:nth-child(4){
left: 75px;
bottom: 55px;
}
}
}
}
Javascript
const mainBtn = document.getElementById('nav-wheel__btn');
const mainEle = document.getElementById('nav-wheel__container');
console.log(mainBtn);
console.log(mainEle);
mainBtn.addEventListener("click", function(){
console.log("button clicked");
if(mainEle.classList.contains('active')){
mainEle.classList.remove("active");
}else{
mainEle.classList.add("active");
}
});

Everything is working fine except your css.
On rendering you have set .nav-wheel__main, .nav-wheel__sublink z-index to -1, therefore you made opacity to 0 your child menu start overlapping the button.
Therefore you script stop working corrected CSS provided below.
.nav-wheel{
position:fixed;
left:50%;
bottom:5%;
transform:translate(-50%,-5%);
.nav-wheel__main, .nav-wheel__sublink{
background-color:orange;
border:0;
color:white;
width:70px;
height:70px;
border-radius:50%;
position:absolute;
z-index:11;
bottom:0;
left:0;
box-shadow:0 0 8px rgba(0,0,0,0.5);
transition: all 750ms cubic-bezier(.218,.63,.325,1);
cursor:pointer;
&:focus{
outline:none;
}
i.fas{
font-size:32px;
}
}
.nav-wheel__main{
}
.nav-wheel__sublink{
z-index:-1;
opacity:0;
text-align:center;
//opacity:0; // no good...
i.fas{
margin-top:17px;
}
}
&.active{
transition: all 750ms cubic-bezier(.218,.63,.325,1);
.nav-wheel__main{
z-index:50;
left:0;
}
.nav-wheel__sublink{
opacity:1;
&:nth-child(2){
left: -75px;
bottom: 55px;
}
&:nth-child(3){
left:0;
bottom:95px;
}
&:nth-child(4){
left: 75px;
bottom: 55px;
}
}
}
}
Hope it will help.

Open-Close sections on a webpage?

On site, scroll down few times to show tiles. Click any tile which will display two sections.
One from right, another from left side and overlays landing page.
Both sections can be exited by clicking close button on the right side.
How to do similar open-close effect of sections?

$(document).on('click','#boxes div', function(e){
$('body').addClass('show-menus');
});
$(document).on('click','.close', function(e){
$('body').removeClass('show-menus');
});
#boxes div {
display:inline-block;
width:20%; padding-bottom:20%;
background:red;
cursor:pointer;
}
#boxes div:nth-child(even) {
background:blue;
}
#boxes div:hover {
opacity:0.5;
}
.left, .right {
transition:600ms ease-in-out transform;
position:fixed; top:0; height:100vh;
}
.left {
background:green; width:60%;
left:0;
transform:translate3d(-100%,0,0);
}
.right {
background:purple; width:40%;
right:0;
transform:translate3d(100%,0,0);
}
.show-menus .left, .show-menus .right {
transform:translate3d(0,0,0);
}
.right .close {
position:absolute;
top:10px; right:0;
cursor:pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="boxes">
<div></div><div></div><div></div><div></div><div></div>
</div>
<div class="left"></div>
<div class="right"><button class="close">close</button></div>

How to make a cross close sign in popup

I have used a popup script so that popup appear on my screen when I load my html file now I want a close sign on the top right corner on the popup screen like in the picture shown below
The code I have used is
("jsfiddle.net/sGeVT/10/")
this script code is an example of my code I have further modified it but the basic of the popup is same.
Hope you understand and can give solution.

(1) Add a span with a x inside, × the best looking one IMO.
<span class="deleteMeetingClose">×</span>
(2) Set up some styles for it.
.deleteMeetingClose {
font-size: 1.5em;
cursor: pointer;
position: absolute;
right: 10px;
top: 5px;
}
(3) Add it to the jQuery code along with other close triggers.
$('#overlay, .deleteMeetingCancel, .deleteMeetingClose').click(function () {
//close action
});
Updated demo: http://jsfiddle.net/zj0yL9me/
$('.deleteMeeting').click(function () {
$('#overlay').fadeIn('slow');
$('#popupBox').fadeIn('slow');
$('#popupContent').fadeIn('slow');
});
// added .deleteMeetingClose into the selectors
$('#overlay, .deleteMeetingCancel, .deleteMeetingClose').click(function () {
$('#overlay').fadeOut('slow');
$('#popupBox').fadeOut('slow');
$('#popupContent').fadeOut('slow');
});
$('.deleteMeetingButton').click(function () {
$('#popupContent').fadeOut('slow');
$('#deleteMeetingConfirmDeleted').fadeIn('slow');
$('#overlay').delay(1300).fadeOut('slow');
$('#popupBox').delay(1300).fadeOut('slow');
$('#deleteMeetingConfirmDeleted').fadeOut('slow');
});
#overlay {
display:none;
opacity:0.5;
background-color:black;
position:fixed;
width:100%;
height:100%;
top:0px;
left:0px;
z-index: 999;
}
#popupBox {
display:none;
position: relative;
margin-left:auto;
margin-right:auto;
margin-top:100px;
width:600px;
height: 500px;
color: #000000;
border:5px solid #4E93A2;
-moz-border-radius:8px;
-webkit-border-radius:8px;
background-color:#FFFFFF;
z-index: 1000;
}
#popupContent {
display:none;
font-family:Arial, Helvetica, sans-serif;
color: #4E93A2;
margin-top:30px;
margin-left:30px;
margin-right:30px;
}
.deleteMeetingButton {
clear:both;
cursor:pointer;
width:90px;
height:30px;
border-radius: 4px;
background-color: #5CD2D2;
border:none;
text-align:center;
line-height:10px;
color:#FFFFFF;
font-size:11px;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
}
.deleteMeetingCancel {
clear:both;
cursor:pointer;
width:90px;
height:30px;
border-radius: 4px;
background-color: #5CD2D2;
border:none;
text-align:center;
line-height:10px;
color:#FFFFFF;
font-size:11px;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
content:"XXXX";
}
#deleteMeetingConfirmDeleted {
display:none;
}
/* added code below */
.deleteMeetingClose {
font-size: 1.5em;
cursor: pointer;
position: absolute;
right: 10px;
top: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="content">Content Obscured By Overlay
<button class="deleteMeeting">Delete</button>
</div>
<div id="overlay"></div>
<div id="popupBox">
<div id="popupContent">
<i>Are you sure you want to delete this meeting?</i>
<br />
<span style="text-align:center;color:black;font-size:40px;">YO</span>
<br />
<button class="deleteMeetingButton">Delete</button>
<button class="deleteMeetingCancel">Cancel</button>
</div>
<div id="deleteMeetingConfirmDeleted">Meeting Deleted</div>
<span class="deleteMeetingClose">×</span> <!-- <= added this line -->
</div>

First, put in image element in your popup div
<img id="ClosePopup" src="insert-image-url-here"/>
Then, style it with position:absolute. Also, make sure the popup div has position:relative
#ClosePopup{
position: absolute;
right:0px;
}
Finally, attach your click handler
$('#ClosePopup').click(function(){
$('#overlay,#popupBox,#popupContent').fadeOut('slow');
});
See it working in this fiddle
If you want a pure css solution without images, see
Pure css close button

Simply create a span element containing × char for the x, put some style and bind the click event to the popup close action:
HTML
<span class="cancel-icon" >×</span>
CSS:
.cancel-icon{
float:right;
cursor:pointer;
}
JS
$('.cancel-icon').click(function () {
//Close the popup
});
Using your Fiddle: http://jsfiddle.net/sGeVT/118/

I made a jquery slide show but it doesn't work right, what do i do [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
Okay so i made this jquery slider from a video series on youtube and it doesn't seem to be working right... The image fades in at first but then the next image doesn't come in. How can i fix this.. Im using older versions of jquery because of deprecated functions
here is the html.
<!DOCTYPE html>
<html>
<head>
<title>
Home
</title>
<link rel="stylesheet" type="text/css" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js" type="text/javascript">
</script>
<script src="jquery-ui-1.8.18.js" type="text/javascript">
</script>
<script src="script.js" type="text/javascript">
</script>
</head>
<body class="body" onload="Slider()">
<div class="container">
<div class="bg">
<div class="mainHeader">
<nav>
<ul>
<li class="last">
Contact
</li>
<li>
Products
</li>
<li>
About
</li>
<li>
Home
</li>
</ul>
</nav>
</div>
<div class="topArea">
<div class="topAInfo">
<h2>
Here is just a simple title
</h2>
<p>
This is just a little bit of dummy text. This is just a little bit of dummy text. This is just a little bit of dummy text. This is just a little bit of dummy text.
</p>
</div>
</div>
<div class="middleArea">
<div class="slider">
<img id="1" src="slide1.jpg" border="0" alt="slide1" width="800px" height="350px">
<img id="2" src="slide2.jpg" border="0" alt="slide2" width="800px" height="350px">
<img id="3" src="slide3.jpg" border="0" alt="slide3" width="800px" height="350px">
</div>
<div class="middleAInfo">
<h3>
Welcome to
</h3>
<p>
A dummy website!!
</p>
</div>
<div class="latestNews">
<hr>
<h2>
Latest News
</h2>
<div class="post">
<p class="date">
March 28, 2015
</p>
<p>
New advanced update with double speed and a whole bunch of cool new st.. more>>
</p>
</div>
<div class="post">
<p class="date">
March 28, 2015
</p>
<p>
New advanced update with double speed and a whole bunch of cool new st.. more>>
</p>
</div>
<div class="newsLetter">
<div class="newsLInfo">
<h3>
Newsletter sign-up
</h3>
<hr>
<p>
If you would like to sign up for our free NewsLetter please enter your email below
</p>Unsubscribe
</div><input type="text" name="textBox" class="textBox" style="width:200px; height:20px;">
<div class="button1">
Submit
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
css:
*{margin:0;padding:0;}
#font-face {
font-family: SketchFont;
src: url(Fonts/Sketch_Block.ttf);
}
body{
background:#ebebeb;
width:80%;
height:1300px;
}
.container{
width:100%;
}
.mainHeader nav{
width:95%;
height:40px;
position:relative;
left:30px;
top:60px;
background: -webkit-linear-gradient(rgba(90, 215, 240, 0.75),rgb(33, 171, 198)); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(rgba(90, 215, 240, 0.75),rgb(33, 171, 198)); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(rgba(90, 215, 240, 0.75),rgb(33, 171, 198)); /* For Firefox 3.6 to 15 */
background: linear-gradient(rgba(90, 215, 240, 0.75),rgb(33, 171, 198)); /* Standard syntax */
/*margin: 100px 50px 0 150px;*/
}
.mainHeader nav ul{
}
.mainHeader nav ul li{
float:right;
display:inline;
text-align:center;
border:1px solid #ADADA8;
border-bottom:none;
border-top:none;
border-left:none;
padding-top:20px;
}
.mainHeader nav ul li.last{
border-right:none;
}
.mainHeader nav ul li a{
text-decoration:none;
/*margin:10px Use to replace paddings right/left but causes hovedr errors*/
font-family:Arial;
position:relative;
top:-10px;
color:white;
padding:10px;
padding-right:20px;
padding-left:20px;
}
.mainHeader nav ul li a.active{
background:white;
color:black;
}
.mainHeader nav ul li a:hover{
background:white;
color:black;
}
.topArea{
width:95%;
height:300px;
position:relative;
left:30px;
top:10px;
/*margin: -50px 50px 0 150px;*/
background: -webkit-linear-gradient(white,rgb(33, 171, 198)); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(white,rgb(33, 171, 198)); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(white,rgb(33, 171, 198)); /* For Firefox 3.6 to 15 */
background: linear-gradient(white,rgb(33, 171, 198)); /* Standard syntax */
}
.topArea .topAInfo{
margin:20px;
padding-top:60px;
width:60%;
margin:50px;
font-family:;
}
.topArea .topAInfo h2{
font-family:SketchFont;
font-weight: normal;
}
.topArea .topAInfo p{
line-height:25px;
font-family:cursive;
font-size:15px;
}
.bg{
width:100%;
height:1200px;
position:relative;
left:10%;
background:linear-gradient(blue, white, white, blue); /* Standard syntax */
/*background-image:url(bg2.jpg);*/
background-repeat: no-repeat;
}
.middleArea{
background:linear-gradient(white, white, #55C4E9); /* Standard syntax */;
height:600px;
width:95%;
position:relative;
left:30px;
top:10px;
}
.middleArea .middleAInfo {
padding:30px 0 0 30px;
}
.middleArea .middleAInfo p{
color:#49CBF0;
font-size:30px;
font-weight:400;
}
.middleArea .latestNews {
width:250px;
height:300px;
background:#0099cc;
float:right;
position:relative;
top:-60px;
border:1px solid #D6D8D8;
}
.middleArea .latestNews hr{
position:relative;
top:50px;
color:black;
width:90%;
margin-left:10px;
}
.middleArea .latestNews h2{
padding:10px 10px 10px 10px;
color:white;
}
.middleArea .latestNews p.date{
color:white;
font-size:13px;
font-weight:bold;
padding:10px 10px 10px 20px;
}
.middleArea .latestNews p{
color:white;
font-size:13px;
position:relative;
left:10px;
width:225px;
}
.middleArea .latestNews a{
color:blue;
font-size:15px;
font-family:Arial;
}
.middleArea .latestNews .newsLetter{
background:white;
width:250px;
height:200px;
position:relative;
top:80px;
border:1px solid #D6D8D8;
}
.middleArea .latestNews .newsLetter .textBox{
position:relative;
top:40px;
left:25px;
}
.middleArea .latestNews .newsLetter .button1{
width:50px;
height:25px;
background:#1768ED;
padding:3px 10px 2px 10px;
border-radius:7px;
text-align:center;
color:white;
font-family:Arial;
position:relative;
top:45px;
left:155px;
}
.middleArea .latestNews .newsLetter .button1:hover{
cursor: pointer;
}
.middleArea .latestNews .newsLetter h3{
position:relative;
top:15px;
left:10px;
color:#21AFEA;
}
.middleArea .latestNews .newsLetter hr{
position:relative;
top:20px;
color:#21AFEA;
}
.middleArea .latestNews .newsLetter p{
color:black;
position:relative;
top:40px;
color:#21AFEA;
font-size:15px;
}
.middleArea .latestNews .newsLetter a{
position:relative;
top:90px;
left:30px;
}
.slider{
width:800px;
height:350px;
overflow:hidden;
margin:30px auto;
background-image:url(loading.gif);
background-repeat:no-repeat;
background-position:center;
background-size: 100px 100px;
}
.slider img{
display:none;
}
javascript:
function Slider(){
$(".slider #1").show("fade", 500);
$(".slider #1").delay(5500).hide("slide", {direction:'left'}, 500);
var sc = $(".slider img").size();
var count = 2;
setInterval(function(){
$("slider #"+count).show("slide", {direction:'right'}, 500);
$("slider #"+count).delay(5500).hide("slide", {direction:'left'}, 500);
if(count == sc){
count == 1;
}else{
count = count + 1;
}
},6500);
}
and the images zip
https://www.dropbox.com/s/z8cxqlfp7i46066/slides.zip?dl=0

The problem is that your syntax is wrong, the class selector should contain a dot
change $("slider") to $(".slider")
try this
function Slider(){
$(".slider #1").show("fade", 500);
$(".slider #1").delay(5500).hide("slide", {direction:'left'}, 500);
var sc = $(".slider img").size();
var count = 2;
setInterval(function(){
console.log(count);
$(".slider #" + count).show("slide", {direction:'right'}, 500);
$(".slider #" + count).delay(5500).hide("slide", {direction:'left'}, 500);
if(count == sc){
count == 1;
}else{
count = count + 1;
}
},6500);
}
and replace your slider container with
<div class="slider">
<img id="1" src="slide1.jpg" border="0" alt="slide1" width="800px" height="350px">
<img id="2" src="slide2.jpg" border="0" alt="slide2" width="800px" height="350px">
<img id="3" src="slide3.jpg" border="0" alt="slide3" width="800px" height="350px">
</div>
and make sure to rename your image slider3.jpg to slide3.jpg

Well, Here are the following problems make it not working, and you can have a try:
In your javascript file, the data type of variable count is int, that's the reason why selector cannot find the DOM pointing to.
You should code like count.toString().
You select dom by Id, so you don't need to code like: $("slider #"+count), and $("#"+ count.toString()) is the proper way.
In the html, the name of image3 is incorrect, should be slider3.jpg.
I think that will help you to resolve the problem of image 2 and 3 not showing.
The other thing you need to think of is, how to slide back.

Image resizing issue in Slides

The problem is, in one of my pages I have a slide, where my images are 1920x1080 while the slide is just set to 1350 as width. My images are not getting centered, you just see about 1/3 of the picture's top left-middle-ish. The slide also doesn't reach out to the ends (<---->) of the screen, there's this tiny space there. Any solutions?
Picture: http://tinypic.com/view.php?pic=29crp7a&s=6
Code
Html:
<div id="container">
<div id="banner">
<ul class="bjqs">
<li><img src="images/lamborghini/av_lp700-4_roadster_ov3_v2_1920x1080.jpg" title="This is my slideshow!"></li>
<li><img src="images/lamborghini/gal_lp_550-2_home_1920x1080.jpg" title="Apparently it works!"></li>
<li><img src="images/lamborghini/gal_lp_550-2_spyder_home_1920x1080.jpg" title="By Andreas!"></li>
</ul>
</div>
</div>
<script src="js/jquery-1.6.2.min.js"></script>
<script src="js/basic-jquery-slider.min.js"></script>
<script>
$(document).ready(function() {
$('#banner').bjqs({
'animation' : 'slide',
'width' : 1350,
});
});
</script>
Css:
ul.bjqs{position:relative; list-style:none;padding:0;margin:0;overflow:hidden; display:none;}
li.bjqs-slide{display:none;position:absolute;}
ul.bjqs-controls{list-style:none;margin:0;padding:0;z-index:9999;}
ol.bjqs-markers{list-style:none;margin:0;padding:0;z-index:9999;}
ol.bjqs-markers li{float:left;}
p.bjqs-caption{display:block;width:96%;margin:0;padding:2%;position:absolute;bottom:0;}
/* demo styles */
body{
font-family: 'Carter One', sans-serif;
}
#container{
width:100%;
padding:20px 0;
margin:0 auto;
overflow:hidden;
}
#banner {
height:300px;
width:700px;
margin:0 auto;
position:relative;
background:#fff;
#fff solid;
}
ul.bjqs-controls li a{
display:block;
padding:5px 10px;
position:absolute;
background:#000000;
color:#fd0100;
text-decoration:none;
text-transform:uppercase;
}
a.bjqs-prev{
left:0;
}
a.bjqs-next{
right:0;
}
p.bjqs-caption{
background:rgba(0,0,0,0.7);
color:#fff;
text-align:center;
}
ol.bjqs-markers{
position:absolute;
bottom:-50px;
}
ol.bjqs-markers li{
float:left;
margin:0 3px;
}
ol.bjqs-markers li a{
display:block;
height:10px;
width:10px;
border:4px solid #fff;
overflow:hidden;
text-indent:-9999px;
background:#000;
border-radius:10px;
}
ol.bjqs-markers li.active-marker a{
background:#fd0100;
}

The solution is very simple actually.
You need to set a width to your images to 100% in your CSS.
.bjqs img {
width:100%;
}
Hope that helps, good luck