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.

CSS/Javascript flip-animation not working in Safari

I have made an animated profile card using CSS and JS, when hovered on it flips and stretches the name and role title up and around and shows the full backside card information. It works perfectly in Firefox and Chrome, but not in Safari.
It does flip around and shows all contact information when animating but at the end of the animation, the full contact information disappears and only reverts back to the original 'name and role title' on the frontside but upside-down.
The full code and live page can be found here: https://www.leap.co.uk/leadership/index-flip2.html
After reading a few articles, I have tried adding the '-webkit-backface-visibility:hidden;' to all 'backface-visibility:hidden;' css but this hasn't worked at all.
I also added a z-index to the 'back' section which fixes it and shows all information at the end of the animation but when it reverts back (after hover is taken off) it still shows instead of just the 'name and role title'.
<!-- HTML -->
<!-- language: lang-html -->
<body>
<div class="contact">
<div class="initials">RM</div>
<div class="flip back">
<div class="info">
<div class="name">Randy Marquardt</div>
<div class="title">Front End Developer</div>
<hr/>
<div class="phone">Phone<br/>
<span>(203)555-5555</span>
</div>
<hr/>
<div class="email">Email<br/>
<span>rmarquardt.1#gmail.com</span>
</div>
<hr/>
</div>
<div class="icon-set">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/874640/skype1.svg" class="skype"/>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/874640/delve1.svg" class="delve" />
</div>
</div>
<div class="flip front">
<div class="name">Randy Marquardt</div>
<div class="title">Front End Developer</div>
</div>
</div>
</body>
/* CSS */
<!-- language: lang-css -->
html {
height:100%;
}
body {
height:100%;
font-family:"Segoe UI";
background: -moz-linear-gradient(top, rgba(246,230,180,1) 0%, rgba(237,144,23,1) 100%);
background: -webkit-linear-gradient(top, rgba(246,230,180,1) 0%,rgba(237,144,23,1) 100%);
background: linear-gradient(to bottom, rgba(246,230,180,1) 0%,rgba(237,144,23,1) 100%);
}
#run {
position:absolute;
top:20px;
right:20px;
}
.contact {
position:absolute;
height:250px;
width:200px;
background:#37674b;
margin:auto;
top:0;
bottom:0;
left:0;
right:0;
text-align:center;
}
.contact .initials {
margin-top:33px;
color:#fff;
font-size:80px;
font-family:"Segoe UI Light";
margin-left:10px;
letter-spacing:10px;
}
.contact .flip {
width:198px;
border:1px inset #37674b;
}
.contact .front {
backface-visibility:hidden;
position:absolute;
background:#f0f0f0;
height:60px;
bottom:0;
text-align:center;
}
.contact .front .name {
margin-top:5px;
font-size:16px;
line-height:25px;
font-weight:600;
}
.contact .front .title {
font-size:12px;
font-style:italic;
}
.contact .back {
backface-visibility:hidden;
overflow:hidden;
background:#f0f0f0;
position:absolute;
bottom:0;
height:60px;
}
.contact .back .info {
padding:5px 10px;
}
.contact .back .info .name {
font-size:18px;
line-height:25px;
font-weight:600;
}
.contact .back .info .title {
font-size:12px;
font-style:italic;
/* margin-bottom:20px; */
}
.contact .back .info .phone, .contact .flip .info .email, .contact .flip .info .skype {
margin-top:20px;
font-size:14px;
font-weight:600;
}
.contact .back .info div span {
font-size:12px;
font-weight:normal;
}
.contact .icon-set {
height:45px;
position:absolute;
margin:auto;
bottom:0;
left:0;
right:0;
text-align:center;
}
.contact .icon-set img {
width:30px;
margin:0px 15px;
}
/* JS */
<!-- language: lang-js -->
TweenMax.set('.contact', {perspective:700});
TweenMax.set('.flip', {transformStyle:"preserve-3d"});
TweenMax.set('.back', {rotationY:-180, rotation:180});
$('.contact').hover(function(){
var flip = $(this).find('.flip');
var back = $(this).find('.back');
var front = $(this).find('.front');
TweenMax.to(flip, .7, {rotationX:180});
TweenMax.to([back, front], .7, {height:'100%'});
},
function(){
var flip = $(this).find('.flip');
var back = $(this).find('.back');
var front = $(this).find('.front');
TweenMax.to(flip, .7, {rotationX:0});
TweenMax.to([back, front], .7, {height:60});
});
I expect the full 'back' information to show on animation completion but when the hover event is taken off, for the 'front' information only to show. This works on all other browsers except safari.

When scroll page down appear and dissapear element

Whenever I scroll page down to bottom of B element my sticky element (which is the display none; on the top) must be appear and if I scroll page up to top of my B element my sticky must be hidden.
my codes
HTML
<html>
<head>
</head>
<body>
<ul class="sticky">
<li>Home</li>
<li>About Us</li>
<li>Download</li>
<li>Forums</li>
<li>Contact</li>
</ul>
<div class="container">
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
</div>
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<body>
</html>
CSS
.container {
width:1020px;
margin:0 auto;
}
.container>div{
width:100%;
height:300px;
background:#f0f0f0;
border:1px solid #ccc;
margin:100px 0;
}
.a:after{
content:"A";
font-size:250px;
text-align:center;
line-height:300px;
display:block;
color:#999;
}
.b:after{
content:"B";
font-size:250px;
text-align:center;
line-height:300px;
display:block;
color:#999;
}
.c:after{
content:"C";
font-size:250px;
text-align:center;
line-height:300px;
display:block;
color:#999;
}
ul.sticky{
list-style-type:none;
padding:0;
margin:0;
position:fixed;
top:0;
left:0;
width:100%;
background:#f0f0f0;
height:50px;
border-bottom:5px solid #ccc;
display:none;
}
ul.sticky:after,ul.sticky:before{
content:"";
display:table;
clear:both;
}
ul.sticky li a{
display:block;
float:left;
line-height:50px;
padding:0 30px;
text-decoration:none;
color:#999;
}
ul.sticky li a:hover{
background:#999;
color:#f0f0f0;
}
(in my css I have sticky element which is none appear)
JQUERY
$(function() {
$(window).scroll(function() {
/* I dont't know what I have to do */
});
});
click to see on codepen

I've solved it by doing this, it appears after you pass the bottom of .b and hides if not:
$(function() {
$(window).scroll(function() {
if($(window).scrollTop() > $(".b").offset().top+$(".b").height()){
$(".sticky").show();
}else{
$(".sticky").hide();
}
});
});

Suggested Solution:
Add this to your jquery code:
$(function() {
var targetOffset = $(".b").offset().top; //based on this div, the sticky element should appear
var $w = $(window).scroll(function(){
if ( $w.scrollTop() > targetOffset ) {
$(".sticky").show(); //show the sticky element
} else {
$(".sticky").hide();//hide the sticky element
}
});
});
Whenever I scroll page down to bottom of B element my sticky element must appear
If I scroll page up to top of my B element my sticky must be hidden

You need to check the scrollTop of the document to see how far you are from the top, then compare that to the scrollTop of the element you are scrolling to (to see if you have reached it)
The reason you should cache your selectors, like I have, is that the onScroll event triggers A LOT. So if you have $('ul.sticky').dosomethign inside of $.scroll(), you are A.) creating that jquery object, B.) querying the DOM C.) doing stuff. This can get rather expensive for performance. Typically if you are going to do an onScroll event handler, you should add a debounce or throttle to it to limit the number of times the handler function is called.
$(function() {
var $sticky = $('ul.sticky');
var bToTop = $('.b').scrollTop();
$(window).scroll(function() {
if($(document).scrollTop() > bToTop){
$sticky.show();
}
else {
$sticky.hide();
}
});
});
.container {
width:1020px;
margin:0 auto;
}
.container>div{
width:100%;
height:300px;
background:#f0f0f0;
border:1px solid #ccc;
margin:100px 0;
}
.a:after{
content:"A";
font-size:250px;
text-align:center;
line-height:300px;
display:block;
color:#999;
}
.b:after{
content:"B";
font-size:250px;
text-align:center;
line-height:300px;
display:block;
color:#999;
}
.c:after{
content:"C";
font-size:250px;
text-align:center;
line-height:300px;
display:block;
color:#999;
}
ul.sticky{
list-style-type:none;
padding:0;
margin:0;
position:fixed;
top:0;
left:0;
width:100%;
background:#f0f0f0;
height:50px;
border-bottom:5px solid #ccc;
display:none;
}
ul.sticky:after,ul.sticky:before{
content:"";
display:table;
clear:both;
}
ul.sticky li a{
display:block;
float:left;
line-height:50px;
padding:0 30px;
text-decoration:none;
color:#999;
}
ul.sticky li a:hover{
background:#999;
color:#f0f0f0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
</head>
<body>
<ul class="sticky">
<li>Home</li>
<li>About Us</li>
<li>Download</li>
<li>Forums</li>
<li>Contact</li>
</ul>
<div class="container">
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
</div>
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<body>
</html>
If you want to show the sticky only when you have reached the end of element b, you can do var bToTop = $('.b').height() + $('.b').scrollTop();

codepen
$(document).on("scroll", function() {
if ($(document).scrollTop() >= 600) {
$("ul").css({"display":"initial"});
}
if($(document).scrollTop() <=600) {
$("ul").css({"display":"none"});
}
});

This should be the proper and correct solution.
Just change the display: none to visibility: hidden;.
$(function() {
$(window).scroll(function() {
if ($(window).scrollTop() > $(".a").offset().top + $(".a").height()) {
$(".sticky").css({
"visibility": "visible"
});
} else {
$(".sticky").css({
"visibility": "hidden"
});
}
});
});
.container {
width:1020px;
margin:0 auto;
}
.container>div{
width:100%;
height:300px;
background:#f0f0f0;
border:1px solid #ccc;
margin:100px 0;
}
.a:after{
content:"A";
font-size:250px;
text-align:center;
line-height:300px;
display:block;
color:#999;
}
.b:after{
content:"B";
font-size:250px;
text-align:center;
line-height:300px;
display:block;
color:#999;
}
.c:after{
content:"C";
font-size:250px;
text-align:center;
line-height:300px;
display:block;
color:#999;
}
ul.sticky{
list-style-type:none;
padding:0;
margin:0;
position:fixed;
top:0;
left:0;
width:100%;
background:#f0f0f0;
height:50px;
border-bottom:5px solid #ccc;
visibility: hidden;
}
ul.sticky:after,ul.sticky:before{
content:"";
display:table;
clear:both;
}
ul.sticky li a{
display:block;
float:left;
line-height:50px;
padding:0 30px;
text-decoration:none;
color:#999;
}
ul.sticky li a:hover{
background:#999;
color:#f0f0f0;
}
.show{
display:block;
}
<html>
<head>
</head>
<body>
<ul class="sticky">
<li>Home</li>
<li>About Us</li>
<li>Download</li>
<li>Forums</li>
<li>Contact</li>
</ul>
<div class="container">
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
</div>
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<body>
</html>

How do I get a fixed scrolling div to scroll with the rest of the window?

Here's the jfiddle http://jsfiddle.net/pq5ckkcg/4/. I basically need the whole window and div to scroll together no matter where the mouse is. How would I accomplish this?
<div id="bottomwrap">
<div id="element"></div>
<div id="element"></div>
<div id="element"></div>
</div>
#bottomwrap {
position:fixed;
top:45px;
right:0;
width:80%;
overflow-y:scroll;
bottom:0;
background-color:#666;
}
#element {
float:left;
width:200px;
height:300px;
background-color:#000;
margin:20px;
}

Your parent div needs to be relative positioned:
#bottomwrap {
position:relative;
margin-top:45px;
float: right;
width:80%;
overflow-y:scroll;
bottom:0;
background-color:#666;
}
http://jsfiddle.net/pq5ckkcg/3/

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