Develop Reference

Unable to add music file in audio player

I working on Audio Player for my website so I designed this play and pause animation for UI of audio player but I am having trouble adding an music file into this code. I also tried using some code from an template(https://codepen.io/himalayasingh/pen/QZKqOX) on the following code I made but it didn't workout. Thanks in advance.
let mainCover = document.querySelector("#main_cover");
mainCover.addEventListener("click", () => {
if (mainCover.classList.contains("active")) {
mainCover.classList.remove("active");
mainCover.classList.add("inactive");
} else {
mainCover.classList.remove("inactive");
mainCover.classList.add("active");
}
});
let posts = document.querySelectorAll(".p_img");
imagesLoaded(posts, function () {
document.querySelector("#cover").classList.add("loaded");
document.querySelector("#loading").classList.add("loaded");
});
* {
-webkit-tap-highlight-color: transparent;
}
*:focus {
outline: none;
}
html,
body {
height: 100%;
}
body {
margin: 0;
font-family: Verdana, Geneva, Tahoma, sans-serif;
background-color: #000;
}
#cover {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: none;
}
#cover.loaded {
display: block;
}
#loading {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #000;
z-index: 125;
}
#loading:before {
content: "Loading App ...";
position: absolute;
top: 50%;
right: 0;
left: 0;
color: #fff;
font-size: 14px;
line-height: 14px;
text-align: center;
animation: blink 1.5s ease 0s infinite;
transform: translateY(-50%);
}
#keyframes blink {
0% {
opacity: 1;
}
50% {
opacity: 0.4;
}
100% {
opacity: 1;
}
}
#loading.loaded {
display: none;
}
.p_img {
position: fixed;
top: 0;
left: 0;
width: 10px;
height: 10px;
opacity: 0;
}
.center {
position: absolute;
top: 50%;
right: 0;
left: 0;
margin: 0 auto;
transform: translateY(-50%);
}
#app {
width: 300px;
margin: 0 auto;
}
#main_cover {
position: relative;
display: block;
width: 300px;
height: 300px;
border: 0;
border-radius: 50%;
background-image: url(https://himalayasingh.github.io/audio-player-play-and-pause-animation-1/img/f1.gif);
background-size: cover;
background-position: 50%;
background-repeat: no-repeat;
cursor: pointer;
overflow: hidden;
transition: 0.1s ease transform;
}
#main_cover:active {
transform: scale(0.9);
}
#main_cover.active {
background-image: url(https://himalayasingh.github.io/audio-player-play-and-pause-animation-1/img/bg.gif);
}
#main_cover.inactive {
background-image: url(https://himalayasingh.github.io/audio-player-play-and-pause-animation-1/img/f1.gif);
}
#main {
width: 54px;
height: 60px;
overflow: hidden;
}
.bar {
position: absolute;
width: 8px;
background-color: #fff;
border-radius: 10px;
transition: 0.4s ease transform, 0.4s ease top, 0.4s ease bottom;
}
#_1 {
top: 0;
bottom: 0;
}
#_2 {
top: -13px;
left: 23px;
height: 60px;
transform: rotateZ(-60deg) translateY(0px);
}
#_3 {
top: 13px;
left: 23px;
height: 60px;
transform: rotateZ(60deg) translateY(0);
}
#_4,
#_5 {
top: 27px;
right: 0;
bottom: 27px;
}
#main_cover.active #_2 {
transform: rotateZ(-60deg) translateY(53px);
}
#main_cover.active #_3 {
transform: rotateZ(60deg) translateY(-53px);
transition-delay: 0.5s;
}
#main_cover.active #_4 {
bottom: 0;
}
#main_cover.active #_5 {
top: 0;
transition-delay: 0.5s;
}
#main_cover.inactive #_2 {
transform: rotateZ(-60deg) translateY(0);
}
#main_cover.inactive #_3 {
transform: rotateZ(60deg) translateY(0);
transition-delay: 0.5s;
}
#main_cover.inactive #_4 {
bottom: 27px;
}
#main_cover.inactive #_5 {
top: 27px;
transition-delay: 0.5s;
}
#app_info {
position: relative;
text-align: center;
padding: 30px 0;
}
#app_info span {
display: inline-block;
color: #adadad;
font-size: 14px;
}
<script src="https://unpkg.com/imagesloaded#4/imagesloaded.pkgd.min.js"></script>
<div id="cover">
<div id="app" class="center">
<div id="main_cover">
<div id="main" class="center">
<div class="bar" id="_1"></div>
<div class="bar" id="_2"></div>
<div class="bar" id="_3"></div>
<div class="bar" id="_4"></div>
<div class="bar" id="_5"></div>
</div>
</div>
<div id="app_info"><span>Radhey Sada Mujh Par</span></div>
</div>
<img src="img/f1.gif" class="p_img">
<img src="img/bg.gif" class="p_img">
</div>
<div id="loading"></div>

I added some simple audio code to make your buttons work. Here is the audio element added to your HTML:
<audio id="audio_player" controls>
<source src="https://raw.githubusercontent.com/himalayasingh/music-player-1/master/music/2.mp3" type="audio/mpeg">
<p>Your browser doesn't support HTML5 audio. Here is
a link to the audio instead.</p>
</audio>
Then, you need to get the audio_player in the JavaScript code with:
let audioPlayer = document.querySelector("#audio_player");
and then play and pause it with audio_player.play() and audio_player.pause()
Finally, you need to hide the audio element as you don't need it with a bit of CSS:
audio {
display: none;
}
Here is a link to: more information about audio
let mainCover = document.querySelector("#main_cover");
let audioPlayer = document.querySelector("#audio_player");
mainCover.addEventListener("click", () => {
if (mainCover.classList.contains("active")) {
mainCover.classList.remove("active");
mainCover.classList.add("inactive");
audio_player.pause();
} else {
mainCover.classList.remove("inactive");
mainCover.classList.add("active");
audio_player.play();
}
});
let posts = document.querySelectorAll(".p_img");
imagesLoaded(posts, function() {
document.querySelector("#cover").classList.add("loaded");
document.querySelector("#loading").classList.add("loaded");
});
* {
-webkit-tap-highlight-color: transparent;
}
*:focus {
outline: none;
}
html,
body {
height: 100%;
}
body {
margin: 0;
font-family: Verdana, Geneva, Tahoma, sans-serif;
background-color: #000;
}
audio {
display: none;
}
#cover {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: none;
}
#cover.loaded {
display: block;
}
#loading {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #000;
z-index: 125;
}
#loading:before {
content: "Loading App ...";
position: absolute;
top: 50%;
right: 0;
left: 0;
color: #fff;
font-size: 14px;
line-height: 14px;
text-align: center;
animation: blink 1.5s ease 0s infinite;
transform: translateY(-50%);
}
#keyframes blink {
0% {
opacity: 1;
}
50% {
opacity: 0.4;
}
100% {
opacity: 1;
}
}
#loading.loaded {
display: none;
}
.p_img {
position: fixed;
top: 0;
left: 0;
width: 10px;
height: 10px;
opacity: 0;
}
.center {
position: absolute;
top: 50%;
right: 0;
left: 0;
margin: 0 auto;
transform: translateY(-50%);
}
#app {
width: 300px;
margin: 0 auto;
}
#main_cover {
position: relative;
display: block;
width: 300px;
height: 300px;
border: 0;
border-radius: 50%;
background-image: url(https://himalayasingh.github.io/audio-player-play-and-pause-animation-1/img/f1.gif);
background-size: cover;
background-position: 50%;
background-repeat: no-repeat;
cursor: pointer;
overflow: hidden;
transition: 0.1s ease transform;
}
#main_cover:active {
transform: scale(0.9);
}
#main_cover.active {
background-image: url(https://himalayasingh.github.io/audio-player-play-and-pause-animation-1/img/bg.gif);
}
#main_cover.inactive {
background-image: url(https://himalayasingh.github.io/audio-player-play-and-pause-animation-1/img/f1.gif);
}
#main {
width: 54px;
height: 60px;
overflow: hidden;
}
.bar {
position: absolute;
width: 8px;
background-color: #fff;
border-radius: 10px;
transition: 0.4s ease transform, 0.4s ease top, 0.4s ease bottom;
}
#_1 {
top: 0;
bottom: 0;
}
#_2 {
top: -13px;
left: 23px;
height: 60px;
transform: rotateZ(-60deg) translateY(0px);
}
#_3 {
top: 13px;
left: 23px;
height: 60px;
transform: rotateZ(60deg) translateY(0);
}
#_4,
#_5 {
top: 27px;
right: 0;
bottom: 27px;
}
#main_cover.active #_2 {
transform: rotateZ(-60deg) translateY(53px);
}
#main_cover.active #_3 {
transform: rotateZ(60deg) translateY(-53px);
transition-delay: 0.5s;
}
#main_cover.active #_4 {
bottom: 0;
}
#main_cover.active #_5 {
top: 0;
transition-delay: 0.5s;
}
#main_cover.inactive #_2 {
transform: rotateZ(-60deg) translateY(0);
}
#main_cover.inactive #_3 {
transform: rotateZ(60deg) translateY(0);
transition-delay: 0.5s;
}
#main_cover.inactive #_4 {
bottom: 27px;
}
#main_cover.inactive #_5 {
top: 27px;
transition-delay: 0.5s;
}
#app_info {
position: relative;
text-align: center;
padding: 30px 0;
}
#app_info span {
display: inline-block;
color: #adadad;
font-size: 14px;
}
<script src="https://unpkg.com/imagesloaded#4/imagesloaded.pkgd.min.js"></script>
<div id="cover">
<div id="app" class="center">
<div id="main_cover">
<div id="main" class="center">
<div class="bar" id="_1"></div>
<div class="bar" id="_2"></div>
<div class="bar" id="_3"></div>
<div class="bar" id="_4"></div>
<div class="bar" id="_5"></div>
</div>
</div>
<div id="app_info"><span>Radhey Sada Mujh Par</span></div>
</div>
<img src="img/f1.gif" class="p_img">
<img src="img/bg.gif" class="p_img">
</div>
<audio id="audio_player" controls>
<source src="https://raw.githubusercontent.com/himalayasingh/music-player-1/master/music/2.mp3" type="audio/mpeg">
<p>Your browser doesn't support HTML5 audio. Here is
a link to the audio instead.</p>
</audio>
<div id="loading"></div>

DIV resizes on click but goes behind another DIV [vanilla JS]

I have three DIVs that complete the screen in a mobile device. Whenever these are clicked, the DIV resizes to fill up the screen and then the information appears.
It is all working as it should when I click it the first time. But after some other clicks, when the DIV starts to resize to fill up the screen or to go back to the original state, it grows behind another DIV until it suddenly pops-up in front of that DIV and continues on.
Also, I try to change the SPAN which is the Subtitle (class='sTitle') from position Absolute to Fixed. If I have it in Fixed since the beginning, the movement is not soft as if it is Absolute. But, I need it fixed because my scroll changes to horizontal when the DIV is enlarged. I have it commented in the JS code because it changes the style right away and there is no difference as if I just have its position in Fixed style from the beginning.
Thank you for your time. I'm starting to learn how to build websites as you may be able to see.
There is the code:
const thirdOne = document.querySelector('.thirdOne'),
thirdOneSpan = document.querySelector('.thirdOneSpan'),
txt1 = document.querySelector('.oneTxt1'),
txt2 = document.querySelector('.oneTxt2'),
txt3 = document.querySelector('.oneTxt3'),
txt4 = document.querySelector('.oneTxt4'),
txt5 = document.querySelector('.oneTxt5'),
txt6 = document.querySelector('.oneTxt6'),
txt7 = document.querySelector('.oneTxt7'),
txt8 = document.querySelector('.oneTxt8'),
txt9 = document.querySelector('.oneTxt9'),
img1 = document.querySelector('.oneImg1'),
img2 = document.querySelector('.oneImg2');
const thirdTwo = document.querySelector('.thirdTwo'),
thirdTwoSpan = document.querySelector('.thirdTwoSpan'),
txt21 = document.querySelector('.twoTxt1'),
txt22 = document.querySelector('.twoTxt2'),
txt23 = document.querySelector('.twoTxt3'),
txt24 = document.querySelector('.twoTxt4'),
txt25 = document.querySelector('.twoTxt5'),
txt26 = document.querySelector('.twoTxt6'),
txt27 = document.querySelector('.twoTxt7'),
txt28 = document.querySelector('.twoTxt8'),
txt29 = document.querySelector('.twoTxt9'),
img21 = document.querySelector('.twoImg1'),
img22 = document.querySelector('.twoImg2');
const thirdThree = document.querySelector('.thirdThree'),
thirdThreeSpan = document.querySelector('.thirdThreeSpan'),
txt31 = document.querySelector('.threeTxt1'),
txt32 = document.querySelector('.threeTxt2'),
txt33 = document.querySelector('.threeTxt3'),
txt34 = document.querySelector('.threeTxt4'),
txt35 = document.querySelector('.threeTxt5'),
txt36 = document.querySelector('.threeTxt6'),
txt37 = document.querySelector('.threeTxt7'),
txt38 = document.querySelector('.threeTxt8'),
txt39 = document.querySelector('.threeTxt9'),
img31 = document.querySelector('.threeImg1'),
img32 = document.querySelector('.threeImg2');
let clicked = 0;
let thirdOneSel = () => {
thirdOne.scrollLeft = 0;
thirdOne.classList.toggle('fullscreen');
thirdOne.classList.toggle('bgBlue');
thirdOne.classList.toggle('scrollable');
thirdOneSpan.classList.toggle('topCenter');
thirdOneSpan.classList.toggle('textTitle');
txt1.classList.toggle('txtLeft');
txt2.classList.toggle('txtRight');
txt3.classList.toggle('txtLeft');
txt4.classList.toggle('txtRight');
txt5.classList.toggle('txtLeft');
txt6.classList.toggle('txtRight');
txt7.classList.toggle('txtLeft');
txt8.classList.toggle('txtRight');
img1.classList.toggle('hide');
img1.classList.toggle('snap');
img2.classList.toggle('hide');
img2.classList.toggle('snap');
if (clicked === 0) {
thirdOne.style.zIndex = 1;
// thirdOneSpan.style.position = 'fixed';
clicked = 1;
} else {
thirdOne.style.zIndex = 0;
// thirdOneSpan.style.position = 'absolute';
clicked = 0;
}
};
let thirdTwoSel = () => {
if (clicked === 0) {
thirdTwo.style.zIndex = 1;
clicked = 1;
} else {
thirdTwo.style.zIndex = 0;
clicked = 0;
}
thirdTwo.scrollLeft = 0;
thirdTwo.classList.toggle('fullscreen');
thirdTwo.classList.toggle('bgGreen');
thirdTwo.classList.toggle('scrollable');
thirdTwoSpan.classList.toggle('topCenter');
thirdTwoSpan.classList.toggle('textTitle');
txt21.classList.toggle('txtLeft');
txt22.classList.toggle('txtRight');
txt23.classList.toggle('txtLeft');
txt24.classList.toggle('txtRight');
txt25.classList.toggle('txtLeft');
txt26.classList.toggle('txtRight');
txt27.classList.toggle('txtLeft');
txt28.classList.toggle('txtRight');
img21.classList.toggle('hide');
img21.classList.toggle('snap');
img22.classList.toggle('hide');
img22.classList.toggle('snap');
};
let thirdThreeSel = () => {
thirdThree.scrollLeft = 0;
thirdThree.classList.toggle('fullscreen');
thirdThree.classList.toggle('bgBlue');
thirdThree.classList.toggle('scrollable');
thirdThreeSpan.classList.toggle('topCenter');
thirdThreeSpan.classList.toggle('textTitle');
txt31.classList.toggle('txtLeft');
txt32.classList.toggle('txtRight');
txt33.classList.toggle('txtLeft');
txt34.classList.toggle('txtRight');
txt35.classList.toggle('txtLeft');
txt36.classList.toggle('txtRight');
txt37.classList.toggle('txtLeft');
txt38.classList.toggle('txtRight');
img31.classList.toggle('hide');
img31.classList.toggle('snap');
img32.classList.toggle('hide');
img32.classList.toggle('snap');
if (clicked === 0) {
thirdThree.style.zIndex = 1;
// thirdThreeSpan.style.position = 'fixed';
clicked = 1;
} else {
thirdThree.style.zIndex = 0;
// thirdThreeSpan.style.position = 'absolute';
clicked = 0;
}
};
thirdOne.addEventListener('click', () => {
thirdOneSel();
});
thirdTwo.addEventListener('click', () => {
thirdTwoSel();
});
thirdThree.addEventListener('click', () => {
thirdThreeSel();
});
.third {
position: relative;
height: 100vh;
display: block;
color: #000;
}
.third h1 {
position: absolute;
top: 2.2vh;
left: 50%;
font-size: 3.5vh;
letter-spacing: 2vw;
transform: translate(-50%, 0);
}
.third span {
position: absolute;
left: 50%;
top: 30%;
font-size: 2rem;
font-weight: 700;
letter-spacing: 4px;
color: rgba(255, 255, 255, 1);
transform: translateX(-50%);
text-align: center;
transition: all 1s;
}
.thirdOne {
position: absolute;
top: 8vh;
height: 31vh;
width: 100%;
border: 1px solid #fff;
background: 50% / cover no-repeat url('./bg.jpg');
background-color: rgb(78, 199, 255);
overflow: hidden;
transition: all 1.4s 0.5s;
}
.thirdOne p {
position: absolute;
width: 90%;
left: 50%;
font-weight: 400;
font-size: 2vh;
text-align: left;
white-space: normal;
color: #fff;
transform: translateX(-50%);
}
.oneTxt1 {
top: 10%;
transition: all 1s 0.6s;
}
.oneTxt2 {
top: 18%;
transition: all 1s 0.8s;
}
.oneTxt3 {
top: 56%;
transition: all 1s 0.8s;
}
.oneTxt4 {
top: 62%;
transition: all 1s 1s;
}
.oneTxt5 {
top: 68%;
transition: all 1s 1.2s;
}
.oneTxt6 {
top: 74%;
transition: all 1s 1.4s;
}
.oneTxt7 {
top: 78%;
transition: all 1s 1.6s;
}
.oneTxt8 {
top: 93%;
width: 50% !important;
transition: all 1s 1.8s;
display: inline-block;
letter-spacing: 0.3em;
text-align: center !important;
}
.scroll2 p span {
position: absolute;
top: -2%;
left: 95%;
width: 24px;
height: 24px;
margin-left: -12px;
border-left: 7px double #fff;
border-bottom: 7px double rgb(184, 179, 179);
transform: rotate(225deg);
opacity: 0;
animation: scrollAnim2 2s infinite;
}
#keyframes scrollAnim2 {
0% {
transform: rotateX(0deg) rotate(225deg) translate(0, 0);
opacity: 0;
}
50% {
opacity: 1;
}
100% {
transform: rotateX(360deg) rotate(225deg) translate(-30px, 30px);
opacity: 0;
}
}
.oneImg1 {
position: absolute;
width: 100vw;
height: 30vh;
top: 24vh;
left: 50%;
transform: translateX(-50%);
transition: all 1s 1.1s;
}
.oneImg2 {
position: absolute;
width: 100vw;
height: 30vh;
top: 60vh;
left: 150%;
transform: translateX(-50%);
}
.oneTxt9 {
left: 150% !important;
top: 10%;
}
.thirdTwo {
position: absolute;
top: 39vh;
height: 31vh;
width: 100%;
border: 1px solid #fff;
background: 50% / cover no-repeat url('./bg2.jpg');
background-color: rgb(46, 136, 186);
overflow: hidden;
transition: all 1.4s 0.5s;
}
.thirdTwo p {
position: absolute;
width: 90%;
left: 50%;
font-weight: 400;
font-size: 2.5vh;
text-align: justify;
white-space: normal;
color: #fff;
transform: translateX(-50%);
}
.twoTxt1 {
top: 10%;
transition: all 1s 0.6s;
}
.twoTxt2 {
top: 17%;
transition: all 1s 0.8s;
}
.twoTxt3 {
top: 56%;
transition: all 1s 0.8s;
}
.twoTxt4 {
top: 63%;
transition: all 1s 1s;
}
.twoTxt5 {
top: 67%;
transition: all 1s 1.2s;
}
.twoTxt6 {
top: 74%;
transition: all 1s 1.4s;
}
.twoTxt7 {
top: 81%;
transition: all 1s 1.6s;
}
.twoTxt8 {
top: 93%;
width: 50% !important;
transition: all 1s 1.8s;
display: inline-block;
letter-spacing: 0.3em;
}
#scroll2 p span {
position: absolute;
top: -2%;
left: 95%;
width: 24px;
height: 24px;
margin-left: -12px;
border-left: 7px double #fff;
border-bottom: 7px double rgb(184, 179, 179);
transform: rotate(225deg);
opacity: 0;
animation: scrollAnim2 2s infinite;
}
.twoImg1 {
position: absolute;
width: 100vw;
height: 30vh;
top: 25vh;
left: 50%;
transform: translateX(-50%);
transition: all 1s 1.1s;
}
.twoImg2 {
position: absolute;
width: 100vw;
height: 30vh;
top: 60vh;
left: 150%;
transform: translateX(-50%);
}
.twoTxt9 {
left: 150% !important;
top: 10%;
}
.thirdThree {
position: absolute;
top: 70vh;
height: 30vh;
width: 100%;
border: 1px solid #fff;
background: 90% / cover no-repeat url('./bg3.jpg');
background-color: rgb(66, 112, 176);
transition: all 1.4s 0.5s;
}
.thirdThree p {
position: absolute;
width: 90%;
left: 50%;
font-weight: 400;
font-size: 2.5vh;
text-align: justify;
white-space: normal;
color: #fff;
transform: translateX(-50%);
}
.threeTxt1 {
top: 10%;
transition: all 1s 0.6s;
}
.threeTxt2 {
top: 17%;
transition: all 1s 0.8s;
}
.threeTxt3 {
top: 56%;
transition: all 1s 0.8s;
}
.threeTxt4 {
top: 63%;
transition: all 1s 1s;
}
.threeTxt5 {
top: 67%;
transition: all 1s 1.2s;
}
.threeTxt6 {
top: 74%;
transition: all 1s 1.4s;
}
.threeTxt7 {
top: 81%;
transition: all 1s 1.6s;
}
.threeTxt8 {
top: 93%;
width: 50% !important;
transition: all 1s 1.8s;
display: inline-block;
letter-spacing: 0.3em;
}
.scroll2 p span {
position: absolute;
top: -2%;
left: 95%;
width: 24px;
height: 24px;
margin-left: -12px;
border-left: 7px double #fff;
border-bottom: 7px double rgb(184, 179, 179);
transform: rotate(225deg);
opacity: 0;
animation: scrollAnim2 2s infinite;
}
.threeImg1 {
position: absolute;
width: 100vw;
height: 30vh;
top: 25vh;
left: 50%;
transform: translateX(-50%);
transition: all 1s 1.1s;
}
.threeImg2 {
position: absolute;
width: 100vw;
height: 30vh;
top: 60vh;
left: 150%;
transform: translateX(-50%);
}
.threeTxt9 {
left: 150% !important;
top: 10%;
}
.fullscreen {
height: 100vh !important;
top: 0 !important;
transition: all 2s;
}
.topCenter {
top: 1vh !important;
/* position: fixed !important; */
/* left: 50% !important;
transform: translateX(-50%) !important; */
transition: all 1s;
}
.topCenter2 {
top: 2.2vh !important;
transition: all 1s;
}
.textTitle {
font-size: 3vh !important;
/* transition: all 1s !important; */
}
.bgBlue {
background: rgb(68, 133, 253) !important;
}
.bgGreen {
background: rgb(24, 153, 33) !important;
}
.txtLeft {
left: -100% !important;
transition: all 0.5s !important;
}
.txtRight {
left: 200% !important;
transition: all 0.5s !important;
}
.scrollable {
overflow-x: scroll !important;
scroll-snap-type: x mandatory !important;
position: fixed !important;
}
.snap {
scroll-snap-align: start;
}
.hide {
opacity: 0 !important;
height: 0px !important;
transition: all 0.6s !important;
}
.container {
position: absolute;
scroll-snap-type: y mandatory;
overflow-y: scroll;
height: 100vh;
width: 100%;
overflow-x: hidden;
}
section {
position: relative;
height: 100vh;
display: block;
align-items: center;
justify-content: center;
scroll-snap-align: start;
}
<div class="container">
<section class="third" id="3">
<h1 id="sTitle">TITLE</h1>
<div class="thirdOne">
<span class="thirdOneSpan">SUBTITLE</span>
<p class="oneTxt1 txtLeft">Text</p>
<p class="oneTxt2 txtRight">Text</p>
<img src="./vid.gif" class="oneImg1 hide">
<p class="oneTxt3 txtLeft">Text</p>
<p class="oneTxt4 txtRight">Text</p>
<img src="./vid2.gif" class="oneImg2 hide">
<p class="oneTxt5 txtLeft">Text</p>
<p class="oneTxt6 txtRight">Text</p>
<p class="oneTxt7 txtLeft">Text</p>
<div class="scroll2">
<p class="oneTxt8 txtRight">scroll right<span class="scroll2"></span></p>
</div>
<p class="oneTxt9">Text</p>
</div>
<div class="thirdTwo">
<span class="thirdTwoSpan">SUBTITLE</span>
<p class="twoTxt1 txtLeft">Text</p>
<p class="twoTxt2 txtRight">Text</p>
<img src="./vid.gif" class="twoImg1 hide">
<p class="twoTxt3 txtLeft">Text</p>
<p class="twoTxt4 txtRight">Text</p>
<img src="./vid2.gif" class="twoImg2 hide">
<p class="twoTxt5 txtLeft">Text</p>
<p class="twoTxt6 txtRight">Text</p>
<p class="twoTxt7 txtLeft">Text</p>
<div id="scroll2">
<p class="twoTxt8 txtRight">scroll right<span class="scroll2"></span></p>
</div>
<p class="twoTxt9">Text</p>
</div>
<div class="thirdThree">
<span class="thirdThreeSpan">SUBTITLE</span>
<p class="threeTxt1 txtLeft">Text</p>
<p class="threeTxt2 txtRight">Text</p>
<img src="./vid.gif" class="threeImg1 hide">
<p class="threeTxt3 txtLeft">Text</p>
<p class="threeTxt4 txtRight">Text</p>
<img src="./vid2.gif" class="threeImg2 hide">
<p class="threeTxt5 txtLeft">Text</p>
<p class="threeTxt6 txtRight">Text</p>
<p class="threeTxt7 txtLeft">Text</p>
<div id="scroll2">
<p class="threeTxt8 txtRight">scroll right<span class="scroll2"></span></p>
</div>
<p class="threeTxt9">Text</p>
</div>
</section>
</div>

div onclick does not fire (css-animated arrow, possible div size/overlaying issue)

I am using an animated arrow with the following code:
function startDownload() {
alert("Hi");
}
.arrow {
cursor: pointer;
height: 120px;
position: relative;
transition: transform 0.1s;
width: 80px;
/*display: inline-block;*/
}
.arrow-top, .arrow-bottom {
background-color: #666;
height: 4px;
left: -5px;
position: absolute;
top: 50%;
width: 100%;
}
.arrow-top:after, .arrow-bottom:after {
background-color: #fff;
content: '';
height: 100%;
position: absolute;
top: 0;
transition: all 0.15s;
}
.arrow-top {
transform: rotate(45deg);
transform-origin: bottom right;
}
.arrow-top:after {
left: 100%;
right: 0;
transition-delay: 0s;
}
.arrow-bottom {
transform: rotate(-45deg);
transform-origin: top right;
}
.arrow-bottom:after {
left: 0;
right: 100%;
transition-delay: 0.15s;
}
.arrow:hover .arrow-top:after {
left: 0;
transition-delay: 0.15s;
}
.arrow:hover .arrow-bottom:after {
right: 0;
transition-delay: 0s;
}
.arrow:active {
transform: translateX(-50%) translateY(-50%) scale(0.9);
}
<style type="text/css">
body {
background-color: black;
/*background-color: #2B2A3F;*/
}
</style>
<div class="arrow" id="start-arrow" onclick="startDownload()" style="z-index: 10;">
<div class="arrow-top" style="border:1px solid black; z-index: 9;"></div>
<div class="arrow-bottom" style="border:1px solid black; z-index: 9;"></div>
</div>
The issue is that when I click on the two arrow lines, the onclick() does not work. It works only if I click in the surrounding area of the two lines, that is enclosed by the border of the parent div with id start-arrow.
The desired behavior is for the onclick to work in the entire area enclosed by the start-arrow div.
I tried using z-index to make the start-arrow div be on top, but it's not working. I tried messing with display and also with position of the elements in CSS but no luck as well. However I should mention that I'm looking for a solution that does not include changing the position attributes of the elements.
How can I make the onclick fire regardless of where I click in the start-arrow div area?
EDIT: it seems to be working a lot better inside Stack Overflow, why? However if a click on top of the border of each line, it doesn't always work. I am opening mine (exact same code) in Firefox (it doesn't work inside my asp.net either).

Why don't we simply wrap the elements into another parent element and bind the event on that? I am able to solve it using a parent element ('parent-id').
function startDownload() {
alert("Hi");
}
.arrow {
cursor: pointer;
height: 120px;
position: relative;
transition: transform 0.1s;
width: 80px;
/*display: inline-block;*/
}
.arrow-top, .arrow-bottom {
background-color: #666;
height: 4px;
left: -5px;
position: absolute;
top: 50%;
width: 100%;
}
.arrow-top:after, .arrow-bottom:after {
background-color: #fff;
content: '';
height: 100%;
position: absolute;
top: 0;
transition: all 0.15s;
}
.arrow-top {
transform: rotate(45deg);
transform-origin: bottom right;
}
.arrow-top:after {
left: 100%;
right: 0;
transition-delay: 0s;
}
.arrow-bottom {
transform: rotate(-45deg);
transform-origin: top right;
}
.arrow-bottom:after {
left: 0;
right: 100%;
transition-delay: 0.15s;
}
.arrow:hover .arrow-top:after {
left: 0;
transition-delay: 0.15s;
}
.arrow:hover .arrow-bottom:after {
right: 0;
transition-delay: 0s;
}
.arrow:active {
transform: translateX(-50%) translateY(-50%) scale(0.9);
}
<style type="text/css">
body {
background-color: black;
/*background-color: #2B2A3F;*/
}
</style>
<div id="parent-id" onclick="startDownload()">
<div class="arrow" id="start-arrow" style="z-
index: 10;">
<div class="arrow-top" style="border:1px solid black; z-index: 9;"></div>
<div class="arrow-bottom" style="border:1px solid black; z-index: 9;"></div>
</div>
</div>

let parent = document.getElementById("start-arrow");
for(let element of parent.children){
element.addEventListener("click", startDownload)
}
function startDownload() {
alert("Hi");
}
.arrow {
cursor: pointer;
height: 120px;
position: relative;
transition: transform 0.1s;
width: 80px;
/*display: inline-block;*/
}
.arrow-top, .arrow-bottom {
background-color: #666;
height: 4px;
left: -5px;
position: absolute;
top: 50%;
width: 100%;
}
.arrow-top:after, .arrow-bottom:after {
background-color: #fff;
content: '';
height: 100%;
position: absolute;
top: 0;
transition: all 0.15s;
}
.arrow-top {
transform: rotate(45deg);
transform-origin: bottom right;
}
.arrow-top:after {
left: 100%;
right: 0;
transition-delay: 0s;
}
.arrow-bottom {
transform: rotate(-45deg);
transform-origin: top right;
}
.arrow-bottom:after {
left: 0;
right: 100%;
transition-delay: 0.15s;
}
.arrow:hover .arrow-top:after {
left: 0;
transition-delay: 0.15s;
}
.arrow:hover .arrow-bottom:after {
right: 0;
transition-delay: 0s;
}
.arrow:active {
transform: translateX(-50%) translateY(-50%) scale(0.9);
}
<style type="text/css">
body {
background-color: black;
/*background-color: #2B2A3F;*/
}
</style>
<div class="arrow" id="start-arrow" onclick="startDownload()" style="z-index: 10;">
<div class="arrow-top" style="border:1px solid black; z-index: 9;"></div>
<div class="arrow-bottom" style="border:1px solid black; z-index: 9;"></div>
</div>
This is not the most optimize solution, but it should do the trick, other solution is to increase click box by adding it padding.
let parent = document.getElementById("filterInput");
for(let element of parent.children){
element.addEventListener("click", startDownload)
}

The problem is you're attaching a click event listener. That means if you want it to fire, the element needs to be clicked & released.
If you click on your element, it moves to the upper-left. Now if you're slow enough the element isn't below your mouse pointer anymore, thus the click event won't fire because you released the mouse somewhere below.
So simply replace
onclick="startDownload()"
by
onmousedown="startDownload()"
and make sure you don't have an alert dialog in the callback function since it would stop the movement of your arrow. Simply trace something using console.log("fired");

Do it with jquery. Use the id start-arrow
<div class="arrow" id="start-arrow" onclick="startDownload()" style="z-index: 10;">
<div class="arrow-top" style="border:1px solid black; z-index: 9;"></div>
<div class="arrow-bottom" style="border:1px solid black; z-index: 9;"></div>
</div>
Try this:
$(document).on('click','#start-arrow',function(){
alert('Hi');
});

How to prevent css transform animation from jumping?

I try to create a slider using CSS transforms combined with .addClass() and .removeClass(). So far it works fine, except for one thing:
While I remove .behind and add .behinder (which is a stupid name for a class), the images on the right side jump instantly to the left side and than transition themselves to the right again.
This causes some kind of "flickering", as you can see in this snippet:
var slider = $('#slider');
// to the right
var slideRight = function() {
// switch state
var dumb = slider.find('.behinder.left');
slider.find('.behinder.right').removeClass('right').addClass('left');
slider.find('.behind.right').removeClass('behind').addClass('behinder');
slider.find('.center').removeClass('center').addClass('behind right');
slider.find('.behind.left').removeClass('behind left').addClass('center');
dumb.removeClass('behinder').addClass('behind');
}
$('#right').on('click', function(){
slideRight();
});
body, html {
margin: 0% 5%;
}
#card-slider-fullwidth {
display: block;
width: 80%;
height: 300px;
max-width: 500px;
}
#slider {
position: relative;
}
#slider img {
position: absolute;
top: 0;
z-index: 10;
left: 50%;
-webkit-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
#slider img.center {
z-index: 50;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
#slider img.behind {
z-index: 30;
-webkit-transform: translateX(-50%) scale(0.9);
transform: translateX(-50%) scale(0.9);
}
#slider img.behind.left {
margin-left: calc( (100% - 200px) / 3 * -1);
}
#slider img.behind.right {
margin-left: calc( (100% - 200px) / 3);
}
#slider img.behinder {
z-index: 10;
-webkit-transform: translateX(0) scale(0.8);
transform: translateX(0) scale(0.8);
}
#slider img.behinder.left {
left: 0;
right: auto;
margin-left: calc( (100% - 200px) / 8 * -1);
}
#slider img.behinder.right {
left: auto;
right: 0;
margin-right: calc( (100% - 200px) / 8 * -1);
}
#right {
padding: 20px;
background: #000;
display: inline-block;
color: #fff;
font-weight: bold;
margin-bottom: 5px;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="right">Switch, baby.</div>
<div id="card-slider-fullwidth">
<div id="slider">
<img src="https://unsplash.it/200/300/?image=100" alt="100" class="behinder left">
<img src="https://unsplash.it/200/300/?image=200" alt="200" class="behind left">
<img src="https://unsplash.it/200/300/?image=320" alt="300" class="center">
<img src="https://unsplash.it/200/300/?image=400" alt="400" class="behind right">
<img src="https://unsplash.it/200/300/?image=500" alt="500" class="behinder right">
</div>
</div>
How can I fix this?
There is a CODEPEN DEMO as well.

Ok actually the solution was quite simple. I have used two properties, to position the elements:
margin-left: x;
transform: translateX();
As at one point I have removed translateX(); completely, the images have been jumping. So to solve this problem, I rearranged the layout using only margin-left to offset the images.
You can check the working solution with an update of the scss:
img {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
transition: all .3s ease-in-out;
&.center {
z-index: 50;
margin-left: 0;
}
&.behind {
z-index: 30;
margin-left: -20px;
transform: translateX(-50%) scale(.9);
&.right {
margin-left: 20px;
}
}
&.behinder {
z-index: 10;
margin-left: -40px;
transform: translateX(-50%) scale(.8);
&.right {
margin-left: 40px;
}
}
}

How to create a smooth zoom and display an overlay when another HTML element gets hovered?

1st problem: I am trying to display the text overlay when the "point" class gets hovered, but for me works just the display when the "caption" class gets hovered, how to fix it?
2nd problem: I need to create a smooth zoom in image when the "point" class gets hovered, how can i do it?
Demo: http://jsfiddle.net/0qgcn2uu/12/
HTML:
<div class="caption">
<span class="point"></span>
<img src="http://www.blasdale.com/pictures/2007/Hendon/thumbs/IMG_3337.jpg" />
<div class="caption__overlay">
<div class="caption__overlay__content">
<img id="hello" class="caption__media" src="http://2.bp.blogspot.com/-TH7ATkZ55uw/VOatQSMgt4I/AAAAAAAAAUM/bB199rdZMuE/s1600/alone.png" />
</div>
</div>
</div>
CSS:
.caption {
position: relative;
overflow: hidden;
-webkit-transform: translateZ(0);
}
.caption::before {
content: ' ';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: transparent;
transition: background .35s ease-out;
}
.captionHover::before {
background: rgba(248, 214, 215, .5);
}
/* I want that when i hover on the circle, the image would get this overlay, but this doesn't work */
.point:hover: + .caption::before {
background: rgba(248, 214, 215, .5);
}
.point {
position: absolute;
display: block;
height: 25px;
width: 25px;
border-radius: 30px;
background-color: black;
}
.caption__overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
padding: 10px;
color: white;
-webkit-transform: translateY(100%);
transform: translateY(100%);
transition: -webkit-transform .35s ease-out;
transition: transform .35s ease-out;
}
.caption:hover .caption__overlay {
-webkit-transform: translateY(0);
transform: translateY(0);
}
.caption {
display: inline-block;
}
.caption__media{
max-width: 100%;
}
jQuery:
$(document).ready(function() {
$(".point").mouseenter(function() {
$('.caption').addClass('captionHover');
});
$('.point').mouseleave(function() {
$('.caption').removeClass('captionHover');
});
});

All you need is the Adjacent sibling selector, General sibling selector and ftransform
*{
box-sizing: border-box
}
figure{
overflow: hidden;
width: 250px;
height: 250px;
margin: 50px auto;
z-index:1;
position: relative
}
figure span{
display: block;
width: 16px;
height:16px;
border-radius: 50%;
background: black;
z-index: 2;
position: absolute;
top: 10px;
left: 10px;
cursor: pointer
}
figure img, figure figcaption{
-webkit-transition: 1s ease
}
figure figcaption{
position: absolute;
top: 100%;
z-index: 2;
width: 100%;
left: 0;
text-align: center;
color: white
}
figure span:hover + img{
-webkit-transform: scale(2,2)
}
figure span:hover ~ figcaption{
top: 50%
}
<figure>
<span class=point></span>
<img src="http://www.blasdale.com/pictures/2007/Hendon/thumbs/IMG_3337.jpg" />
<figcaption>HELLO!</figcaption>
</figure>