We Keep Coding

Play sound if div pass a offset while in animation?

Long story short, I used this source, to simulate a case opening: https://codepen.io/zheleznov/pen/POXMdO
<div class="raffle-roller-holder">
<div class="raffle-roller-container" style="margin-left: 0px;">
</div>
</div>
</div>
<center><span style="font-size: 25px;">You winning is <span style="color: green;" id="rolled">rolling</span>
<br>
<button onclick="generate(1);">go</button>
<button onclick="window.location='';">reset</button></center>
<br>
<div class="inventory"></div>
#import url('https://fonts.googleapis.com/css?family=Arvo');
body {
background: rgb(25,25,33);
}
.raffle-roller {
height: 100px;
position: relative;
margin: 60px auto 30px auto;
width: 900px;
}
.raffle-roller-holder {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 100px;
width: 100%;
}
.raffle-roller-holder {
overflow: hidden;
border-radius: 2px;
border: 1px solid #3c3759;
}
.raffle-roller-holder {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 100px;
width: 100%;
}
.raffle-roller-container {
width: 9999999999999999999px;
max-width: 999999999999999999px;
height: 100px;
background: #191726;
margin-left: 0;
transition: all 8s cubic-bezier(.08,.6,0,1);
}
.raffle-roller-holder:before {
content: "";
position: absolute;
border: none;
z-index: 12222225;
width: 5px;
height: 100%;
left: 50%;
background: #d16266;
}
.item {
display: inline-block;
float: left;
margin: 4px 0px 0.5px 5px;
width: 85px;
height: 88px;
float: left;
border: 1px solid #70677c;
background: #14202b;
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
}
.class_red_item {
border-bottom: 4px solid #EB4B4B;
}
img {
border: 0;
vertical-align: middle;
}
.winning-item {
border: 2px solid #66b233;
position: relative;
top: -1px;
border-bottom: 4px solid #66b233;
}
.inventory {
margin: 0 auto;
width: 960px;
max-width: 953px;
padding: 10px 15px 6px;
height: auto;
border: 2px solid #1c3344;
background: #0e1a23;
}
.inventory > .item {
float: none;
cursor: pointer;
margin: 4px 2px 0.5px 2px;
}
.inventory > .item:hover {
background-size: 90%;
background-color: #182a38;
}
.inventory > .item:active {
height: 83px;
width: 80px;
position: relative;
top: -2px;
border: 2px solid #356d27;
border-bottom: 4px solid #356d27;
}
var items = {
simple: {
skin: "M4A1-S | Cyrex",
img: "https://steamcdn-a.akamaihd.net/apps/730/icons/econ/default_generated/weapon_m4a1_silencer_cu_m4a1s_cyrex_light_large.144b4053eb73b4a47f8128ebb0e808d8e28f5b9c.png"
},
middle: {
skin: "M4A1-S | Chantico's Fire",
img: "https://steamcommunity-a.akamaihd.net/economy/image/-9a81dlWLwJ2UUGcVs_nsVtzdOEdtWwKGZZLQHTxDZ7I56KU0Zwwo4NUX4oFJZEHLbXH5ApeO4YmlhxYQknCRvCo04DEVlxkKgpou-6kejhz2v_Nfz5H_uO1gb-Gw_alIITCmX5d_MR6j_v--YXygED6_UZrMTzwJYSdJlU8N1zY81TrxO_v0MW9uJnBm3Rk7nEk5XfUmEeyhQYMMLIUhCYx0A"
},
super: {
skin: "M4A4 | Asiimov",
img: "https://steamcdn-a.akamaihd.net/apps/730/icons/econ/default_generated/weapon_m4a1_cu_m4_asimov_light_large.af03179f3d43ff55b0c3d114c537eac77abdb6cf.png"
}
};
function generate(ng) {
$('.raffle-roller-container').css({
transition: "sdf",
"margin-left": "0px"
}, 10).html('');
var randed2 = prompt('enter skin(1-asiimov,3-cyrex,2-chantico)','');
for(var i = 0;i < 101; i++) {
var element = '<div id="CardNumber'+i+'" class="item class_red_item" style="background-image:url('+items.simple.img+');"></div>';
var randed = randomInt(1,1000);
if(randed < 50) {
element = '<div id="CardNumber'+i+'" class="item class_red_item" style="background-image:url('+items.super.img+');"></div>';
} else if(500 < randed) {
element = '<div id="CardNumber'+i+'" class="item class_red_item" style="background-image:url('+items.middle.img+');"></div>';
}
$(element).appendTo('.raffle-roller-container');
}
setTimeout(function() {
if(randed2 == 2) {
goRoll(items.middle.skin, items.middle.img);
} else if(randed2 == 1) {
goRoll(items.super.skin, items.super.img);
} else {
goRoll(items.simple.skin, items.simple.img);
}
}, 500);
}
function goRoll(skin, skinimg) {
$('.raffle-roller-container').css({
transition: "all 8s cubic-bezier(.08,.6,0,1)"
});
$('#CardNumber78').css({
"background-image": "url("+skinimg+")"
});
setTimeout(function() {
$('#CardNumber78').addClass('winning-item');
$('#rolled').html(skin);
var win_element = "<div class='item class_red_item' style='background-image: url("+skinimg+")'></div>";
$(win_element).appendTo('.inventory');
}, 8500);
$('.raffle-roller-container').css('margin-left', '-6770px');
}
function randomInt(min, max) {
return Math.floor(Math.random() * (max - min)) + min;
}
I managed to add multiple case openings at once, and other stuffs, but, what I want to add now is that, to play a sound when a div passes a certain offset.
I've tried to check where is the middle position, using offsetLeft, and I got 411.
My question is, can I add sound everytime a div passes that offset?
Or is there any other way to play a sound individually for each div?
(The effect I want to get is this one: https://www.youtube.com/watch?v=9ChsGHLPyG8)

How to make the timeline activate with each click of the arrow? GSAP

Why the timeline is run only once after pressing the arrow? I would like it to be executed every time you click right arrow.
I tried different timeline layouts in the code but it didn't help.
the arrangement of the subtitles on the computer looks better
Link Codepen https://codepen.io/jarek-babiak/pen/GRQLBgy
const slid = [...document.querySelectorAll('.slid')];
const arrows = document.querySelectorAll('.arrows-slider .arrow');
slid.forEach(s => {
if (s.classList.contains('active') == false) {
// s.style.opacity = '0';
}
});
const slider = grow => {
for (i = 0; i < slid.length; i++) {
const s = slid[i];
if (s.classList.contains('active')) {
let numberArray = slid.indexOf(s);
numberArray += grow;
// if(numberArray > slid.length-1) numberArray = 0;
if (numberArray > slid.length - 1 || numberArray < 0) {
break;
} else {
s.classList.remove('active');
slid[numberArray].classList.add('active');
break;
};
}
}
}
const sliderMove = gsap.timeline({
paused: true
});
slid.forEach(s => {
sliderMove
.to(s, {
duration: .1,
x: "-100%"
});
});
arrows.forEach(arrow => {
arrow.addEventListener('click', function() {
if (this.classList.contains('arrows-right')) {
const grow = 1;
slider(grow);
sliderMove.play();
} else if (this.classList.contains('arrows-left')) {
const grow = -1;
slider(grow);
}
});
});
body {
/* overflow: hidden; */
}
.slider {
position: absolute;
top: 0;
left: 0;
width: 100%;
background-image: url('../img/mirrored_squares.png');
height: 100vh;
display: flex;
}
.slid {
position: relative;
width: 100%;
height: 100vh;
/* opacity: 0; */
flex-shrink: 0;
transition: .3s;
}
.active {
/* opacity: 1 !important; */
}
.img-slid {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 35%;
height: 50%;
background-size: cover;
}
.engine {
background-color: gray;
}
.exhaust {
background-color: pink;
}
.car {
background-color: red;
}
.slid-text {
position: absolute;
top: 50%;
left: 11%;
transform: translateY(-50%);
font-size: 8rem;
text-transform: uppercase;
color: #fff;
font-family: 'Black Ops One', cursive;
}
.number-slaid {
position: absolute;
bottom: 8%;
right: 8%;
font-size: 2rem;
color: #fff;
font-family: 'Black Ops One', cursive;
}
/* .arrows-left {
position: absolute;
top: 50%;
left: 5%;
transform: translateY(-50%);
}
.line-arrow {
width: 2px;
height: 70px;
background-color: black;
}
.top-line {
transform: rotate(48deg) translateY(25%);
}
.bottom-line {
transform: rotate(-48deg) translateY(-25%);
} */
.arrows-left {
position: absolute;
top: 50%;
left: 5%;
transform: translateY(-50%) rotate(45deg);
}
.arrows-right {
position: absolute;
top: 50%;
right: 5%;
transform: translateY(-50%) rotate(-135deg);
}
.arrow {
width: 80px;
height: 80px;
border-left: 2px solid #000;
border-bottom: 2px solid #000;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script>
<main>
<section class="slider">
<div class="slid slid1 active">
<div class="engine img-slid"> </div>
<p class="slid-text">Silniki</p>
<p class="number-slaid">01</p>
</div>
<div class="slid slid2 ">
<div class="exhaust img-slid"></div>
<p class="slid-text">Wydechy</p>
<p class="number-slaid">02</p>
</div>
<div class="slid slid3 ">
<div class="car img-slid"></div>
<p class="slid-text">Samochody</p>
<p class="number-slaid">03</p>
</div>
<div class="arrows-slider">
<div class="arrows-left arrow"></div>
<div class="arrows-right arrow"></div>
</div>
</section>
</main>

What is the difference between .contains(target) & target.contains()

I am catching a click and according to click close the menu :
To catch the click the code I tried is :
function someFnc(e){
let currentTarget = menuContain.contains(e.target);
if(!currentTarget){
document.body.style.color = "red";
} else {
document.body.style.color = "blue";
}
}
Other code I tried is :
function someFnc(e){
if(e.target.contains(menuContain)){
document.body.style.color = "red";
} else {
document.body.style.color = "blue";
}
}
Both works the same can anyone tell the reason because I am using same function .contains.
One is checking click is inside menu or not and in other menu is catching click inside it or not
let menuToggleCheck = document.getElementById("menuTogglerCheckbox");
let menuFixBg = document.getElementById("menuFix");
let menu = document.getElementById("menuToggler");
menuToggleCheck.addEventListener('click', menuTogglerBackground)
function menuTogglerBackground() {
if (menuToggleCheck.checked) {
menuFixBg.style.backgroundColor = "rgba(126, 125, 125, 0.5)";
menuFixBg.style.width = "100vw";
menuFixBg.style.height = "100vh";
} else {
menuFixBg.style.backgroundColor = "transparent";
menuFixBg.style.width = "0vw"
menuFixBg.style.height = "0vh"
}
}
let menuContain = document.getElementById("menuContainer");
menuFixBg.addEventListener('click', function(e) {
let currentTarget = menuContain.contains(e.target);
// e.target.contains(menuContain)
if (!currentTarget) {
document.body.style.color = "red";
menuToggleCheck.checked = false;
menuTogglerBackground();
} else {
document.body.style.color = "blue";
}
})
* {
box-sizing: border-box;
}
body {
margin: 0px;
}
#menuFix {
position: fixed;
top: 0px;
}
#menuContainer {
width: 100px;
height: 100vh;
}
#menuToggler {
position: relative;
display: flex;
width: 90px;
height: 80px;
/* left: -100px; */
user-select: none;
}
#menuToggler input {
cursor: pointer;
position: absolute;
width: 40px;
height: 40px;
top: 7px;
left: 21px;
opacity: 0;
z-index: 2;
}
.menuBarCircle {
position: relative;
width: 40px;
height: 40px;
margin-top: 10px;
margin-left: auto;
margin-right: auto;
border: 1px solid black;
border-radius: 20px;
}
#menuToggler span {
position: relative;
display: block;
width: 26px;
height: 3px;
top: 10px;
left: 6px;
margin-bottom: 5px;
border-radius: 5px;
background: black;
transform-origin: 0px 0px;
transition: 0.2s;
z-index: 1;
}
#menuToggler span:nth-child(1) {
background: brown;
transform-origin: 0 0;
}
#menuToggler span:nth-child(3) {
background: brown;
transform-origin: 0 100%;
}
#menuToggler input:checked~.menuBarCircle span {
margin-left: 4px;
}
#menuToggler input:checked~.menuBarCircle span:nth-child(1) {
transform: rotate(45deg) translate(0px, -1px);
}
#menuToggler input:checked~.menuBarCircle span:nth-child(3) {
transform: rotate(-45deg) translate(0, 1px);
}
#menuToggler input:checked~.menuBarCircle span:nth-child(2) {
opacity: 0;
}
#menu {
position: absolute;
list-style-type: none;
width: 90px;
height: 100vh;
margin-top: auto;
padding: 50px 0;
background: white;
border-right: 1px solid black;
/* z-index: -1; */
transform: translate(-100%, 0);
transition: 0.5s width;
}
#menu a {
display: flex;
flex-flow: column;
text-decoration: none;
font-size: 14px;
width: 100%;
padding: 5px 10px;
margin: 5px 0;
color: black;
border: 2px solid white;
border-radius: 20px 0 0 20px;
}
#menu a li {
display: flex;
justify-content: center;
align-items: center;
}
#menu a:hover {
background: rgb(255, 155, 155);
border: 2px solid rgb(255, 155, 155);
}
#menuToggler input:checked~#menu {
display: block;
width: 180px;
transform: translate(0%, 0);
}
#menuToggler input:checked~#menu a {
display: flex;
flex-flow: row;
font-size: 18px;
}
<div id="menuFix">
<div id="menuContainer">
<div id="menuToggler">
<input type="checkbox" id="menuTogglerCheckbox" />
<div class="menuBarCircle">
<span></span>
<span></span>
<span></span>
</div>
<ul id="menu">
<a href="#">
<li>Home</li>
</a>
<a href="#">
<li>Settings</li>
</a>
<a href="#">
<li>About Us</li>
</a>
<a href="#">
<li>Help</li>
</a>
</ul>
</div>
</div>
</div>
<div>Hello World I am with you this is the grace of God to be with you</div>

Although both could have the same effect depending on the HTML structure, they both do not work the same.
And in your provided example, they both do not always have the same result.
firstNode.contains( secondNode ) checks to see if secondNode is a descendant of firstNode and returns this as a boolean value.
It will also return true if a node performs this check on itself; this firstNode.contains( firstNode ) will equate to true.
function someFnc(e){
let currentTarget = menuContain.contains(e.target);
if(!currentTarget){
document.body.style.color = "red";
} else {
document.body.style.color = "blue";
}
}
In the above example, currentTarget holds the answer to the question; "Is e.target a descendant of menuContain".
function someFnc(e){
if(e.target.contains(menuContain)){
document.body.style.color = "red";
} else {
document.body.style.color = "blue";
}
}
In this above code block, you check to see if menuContain is a descendant of e.target.
e.target being the node on which the event was dispatched, or in your code's case, the node that was clicked on.
You can find more information on what .contains() does on this page, and more information on what event.target is on this page.
As for why both appear to work the same on your current code ( but remember, they don't ), well...
let menuContain = document.getElementById("menuContainer");
menuFixBg.addEventListener('click', function(e) {
let currentTarget = menuContain.contains(e.target);
// e.target.contains(menuContain)
if (!currentTarget) {
document.body.style.color = "red";
menuToggleCheck.checked = false;
menuTogglerBackground();
} else {
document.body.style.color = "blue";
}
})
In the above code, in your current HTML structure, #menuContainer occupies all of #menuFix's space, so any click event dispatched from #menuFix will come from either #menuContainer or one of it's descendants.
Because e.target will always either be #menuContainer or one of it's descendants, let currentTarget = menuContain.contains(e.target); will always be true.
Meaning that the font color will turn to blue in any case, with the above code.
In the case of using if ( e.target.contains(menuContain) ) {, this will be different.
If the click event is dispatched from #menuContainer, the if statement will equate to true, but if it's dispatched from one of its descendants, it will equate to false.
This is because descendants of #menuContainer won't contain #menuContainer.
Meaning, depending on where you click, the font will either be red or blue. I would suggest trying out Inspect Element in a browser that supports it and hovering over #menuContainer and its descendants in the Elements list to see what element occupies what space as this will be highlighted on the page.
See the below snippet as an example of how if ( e.target.contains(menuContain) ) { will have differing results depending on where you click.
Clicking near the circle will dispatch a click event from #menuToggler or one of its descendants, meaning the if statement will equate to false and the text will be blue.
Clicking further down, away from the circle, will dispatch a click event from #menuContainer, meaning the if statement will equate to true and the text will be red.
let menuToggleCheck = document.getElementById("menuTogglerCheckbox");
let menuFixBg = document.getElementById("menuFix");
let menu = document.getElementById("menuToggler");
menuToggleCheck.addEventListener('click', menuTogglerBackground)
function menuTogglerBackground() {
if (menuToggleCheck.checked) {
menuFixBg.style.backgroundColor = "rgba(126, 125, 125, 0.5)";
menuFixBg.style.width = "100vw";
menuFixBg.style.height = "100vh";
} else {
menuFixBg.style.backgroundColor = "transparent";
menuFixBg.style.width = "0vw"
menuFixBg.style.height = "0vh"
}
}
let menuContain = document.getElementById("menuContainer");
menuFixBg.addEventListener('click', function(e) {
if ( e.target.contains(menuContain) ) {
// #menuContainer was a descendant of the Clicked Element
// Or the Clicked Element actually was #menuContainer
document.body.style.color = "red";
menuToggleCheck.checked = false;
menuTogglerBackground();
} else {
// #menuContainer was not a descendant of the Clicked Element
document.body.style.color = "blue";
}
})
* {
box-sizing: border-box;
}
body {
margin: 0px;
}
#menuFix {
position: fixed;
top: 0px;
}
#menuContainer {
width: 100px;
height: 100vh;
}
#menuToggler {
position: relative;
display: flex;
width: 90px;
height: 80px;
/* left: -100px; */
user-select: none;
}
#menuToggler input {
cursor: pointer;
position: absolute;
width: 40px;
height: 40px;
top: 7px;
left: 21px;
opacity: 0;
z-index: 2;
}
.menuBarCircle {
position: relative;
width: 40px;
height: 40px;
margin-top: 10px;
margin-left: auto;
margin-right: auto;
border: 1px solid black;
border-radius: 20px;
}
#menuToggler span {
position: relative;
display: block;
width: 26px;
height: 3px;
top: 10px;
left: 6px;
margin-bottom: 5px;
border-radius: 5px;
background: black;
transform-origin: 0px 0px;
transition: 0.2s;
z-index: 1;
}
#menuToggler span:nth-child(1) {
background: brown;
transform-origin: 0 0;
}
#menuToggler span:nth-child(3) {
background: brown;
transform-origin: 0 100%;
}
#menuToggler input:checked~.menuBarCircle span {
margin-left: 4px;
}
#menuToggler input:checked~.menuBarCircle span:nth-child(1) {
transform: rotate(45deg) translate(0px, -1px);
}
#menuToggler input:checked~.menuBarCircle span:nth-child(3) {
transform: rotate(-45deg) translate(0, 1px);
}
#menuToggler input:checked~.menuBarCircle span:nth-child(2) {
opacity: 0;
}
#menu {
position: absolute;
list-style-type: none;
width: 90px;
height: 100vh;
margin-top: auto;
padding: 50px 0;
background: white;
border-right: 1px solid black;
/* z-index: -1; */
transform: translate(-100%, 0);
transition: 0.5s width;
}
#menu a {
display: flex;
flex-flow: column;
text-decoration: none;
font-size: 14px;
width: 100%;
padding: 5px 10px;
margin: 5px 0;
color: black;
border: 2px solid white;
border-radius: 20px 0 0 20px;
}
#menu a li {
display: flex;
justify-content: center;
align-items: center;
}
#menu a:hover {
background: rgb(255, 155, 155);
border: 2px solid rgb(255, 155, 155);
}
#menuToggler input:checked~#menu {
display: block;
width: 180px;
transform: translate(0%, 0);
}
#menuToggler input:checked~#menu a {
display: flex;
flex-flow: row;
font-size: 18px;
}
<div id="menuFix">
<div id="menuContainer">
<div id="menuToggler">
<input type="checkbox" id="menuTogglerCheckbox" />
<div class="menuBarCircle">
<span></span>
<span></span>
<span></span>
</div>
<ul id="menu">
<a href="#">
<li>Home</li>
</a>
<a href="#">
<li>Settings</li>
</a>
<a href="#">
<li>About Us</li>
</a>
<a href="#">
<li>Help</li>
</a>
</ul>
</div>
</div>
</div>
<div>Hello World I am with you this is the grace of God to be with you</div>
As a reply to your comment, here is a snippet where the menu will close if the user clicks inside the menu.
And some additional comments.
let menuToggleCheck = document.getElementById("menuTogglerCheckbox");
let menuFixBg = document.getElementById("menuFix");
let menu = document.getElementById("menuToggler");
menuToggleCheck.addEventListener('click', menuTogglerBackground)
function menuTogglerBackground() {
if (menuToggleCheck.checked) {
menuFixBg.style.backgroundColor = "rgba(126, 125, 125, 0.5)";
menuFixBg.style.width = "100vw";
menuFixBg.style.height = "100vh";
} else {
menuFixBg.style.backgroundColor = "transparent";
menuFixBg.style.width = "0vw"
menuFixBg.style.height = "0vh"
}
}
let menuContain = document.getElementById("menuContainer");
menuFixBg.addEventListener('click', function(e) {
if ( e.target.id === "menuTogglerCheckbox" ) {
// The User clicked on the Menu Toggle Box, which will have opened or closed the menu already, so do nothing
return true;
}
// Check to see if the Click Target is inside the Menu Container
let currentTarget = menuContain.contains(e.target);
if ( currentTarget ) {
// The user clicked inside the Menu Container
document.body.style.color = "red";
// Close the menu
menuToggleCheck.checked = false;
menuTogglerBackground();
} else {
// The user clicked outside the Menu Container
document.body.style.color = "blue";
// Maybe also close the menu?
//menuToggleCheck.checked = false;
//menuTogglerBackground();
}
});
* {
box-sizing: border-box;
}
body {
margin: 0px;
}
#menuFix {
position: fixed;
top: 0px;
}
#menuContainer {
width: 100px;
height: 100vh;
}
#menuToggler {
position: relative;
display: flex;
width: 90px;
height: 80px;
/* left: -100px; */
user-select: none;
}
#menuToggler input {
cursor: pointer;
position: absolute;
width: 40px;
height: 40px;
top: 7px;
left: 21px;
opacity: 0;
z-index: 2;
}
.menuBarCircle {
position: relative;
width: 40px;
height: 40px;
margin-top: 10px;
margin-left: auto;
margin-right: auto;
border: 1px solid black;
border-radius: 20px;
}
#menuToggler span {
position: relative;
display: block;
width: 26px;
height: 3px;
top: 10px;
left: 6px;
margin-bottom: 5px;
border-radius: 5px;
background: black;
transform-origin: 0px 0px;
transition: 0.2s;
z-index: 1;
}
#menuToggler span:nth-child(1) {
background: brown;
transform-origin: 0 0;
}
#menuToggler span:nth-child(3) {
background: brown;
transform-origin: 0 100%;
}
#menuToggler input:checked~.menuBarCircle span {
margin-left: 4px;
}
#menuToggler input:checked~.menuBarCircle span:nth-child(1) {
transform: rotate(45deg) translate(0px, -1px);
}
#menuToggler input:checked~.menuBarCircle span:nth-child(3) {
transform: rotate(-45deg) translate(0, 1px);
}
#menuToggler input:checked~.menuBarCircle span:nth-child(2) {
opacity: 0;
}
#menu {
position: absolute;
list-style-type: none;
width: 90px;
height: 100vh;
margin-top: auto;
padding: 50px 0;
background: white;
border-right: 1px solid black;
/* z-index: -1; */
transform: translate(-100%, 0);
transition: 0.5s width;
}
#menu a {
display: flex;
flex-flow: column;
text-decoration: none;
font-size: 14px;
width: 100%;
padding: 5px 10px;
margin: 5px 0;
color: black;
border: 2px solid white;
border-radius: 20px 0 0 20px;
}
#menu a li {
display: flex;
justify-content: center;
align-items: center;
}
#menu a:hover {
background: rgb(255, 155, 155);
border: 2px solid rgb(255, 155, 155);
}
#menuToggler input:checked~#menu {
display: block;
width: 180px;
transform: translate(0%, 0);
}
#menuToggler input:checked~#menu a {
display: flex;
flex-flow: row;
font-size: 18px;
}
<div id="menuFix">
<div id="menuContainer">
<div id="menuToggler">
<input type="checkbox" id="menuTogglerCheckbox" />
<div class="menuBarCircle">
<span></span>
<span></span>
<span></span>
</div>
<ul id="menu">
<a href="#">
<li>Home</li>
</a>
<a href="#">
<li>Settings</li>
</a>
<a href="#">
<li>About Us</li>
</a>
<a href="#">
<li>Help</li>
</a>
</ul>
</div>
</div>
</div>
<div>Hello World I am with you this is the grace of God to be with you</div>

why is font-awesome icon displaying the icon too small and off center?

;
(function($) {
class Popup {
constructor(options, elem) {
var self = this;
var defaultPopupMenu = `<div>
<i id="faInfo" class="fa fa-info"></i>
<i id="faQuest" class="fa fa-question"></i>
<i id="faLink" class="fa fa-external-link"></i>
</div>`;
this.defaultOptions = {
content: defaultPopupMenu, //this option MUST be set when new options passed through, or only the default menu will show
position: "top", //where the popup will show by default- top. Other options: right, bottom, or left
theme: "popupTheme", //Menu Element theme. Defaults to popupTheme, but custom class can be set instead
style: "", //Popup Menu Style. Default no style, will revert to default colours. Other options: Blue, Red, Green, Custom
animation: "standard", //Standard animation by default. Other options: flip, grow, bounce
event: "click", //Default set to "click", can also be set to hover
hideOnClick: true, //When true, clicking off the menu closes it. When false, only clicking on the menu closes it
zIndex: 100, //Individual z-index can be set for each menu for layering if necessary
//function to handle actions when clicking on popup menu icons. MUST be set when options are passed through or an error or default menu actions will occur
popItemClick: function(globalthis) {
//Default actions
var twentyEightSpaces = `
`;
var twentyFourSpaces = `
`;
var eightSpaces = ` `;
var sixteenSpaces = `
`;
var content;
var container = $(event.target).attr("id");
switch (container) {
case "faInfo":
content = {
type: "info",
heading: "Information",
text: `<p>To set a new menu when calling .popup() on an element,
you must set a variable that holds a string with the html for that menu, then
pass that variable through as the "content" part of the options. For example: </p>
<p>var myMenu = '<div>\ <br />
${twentyEightSpaces}<a href="#''><i id="faInfo" class="fa fa-info"></i></a>\<br />
${twentyFourSpaces}</div>'; </p>
<p>would create a menu with one item, and just add more '<a>' tags with icons inside the '<div>' tags to add more menu items. </p>
<p>Then add it to the content when calling the popup: </p>
<p>$("#myPopUp").popup({ <br />
${eightSpaces}content: myMenu, <br />
${eightSpaces}popItemClick(globalthis) { <br />
${sixteenSpaces}...new actions here... <br />
${eightSpaces}} <br />
});</p>
<p>You must set new actions in the "popItemClick" function for your menu
in the options you pass or it will throw an error.</p>`
}
globalthis.alertBox(content);
break;
case "faQuest":
content = {
type: "info",
heading: "Question",
text: `<p>Why is this being shown?</p>
<p>Because you need to set a popup menu of your own (and the popItemClick() function) or you get this default menu.</p>
<p>If you set the popup menu but don't change the popItemClick() function, you will get an error.</p>
<p>Click the "i" button for more info.</p>`
}
globalthis.alertBox(content);
break;
case "faLink":
window.open("http://example.com/");
break;
default:
content = {
type: "danger",
heading: "Error",
text: `<p>Error! You have set a new menu without changing the 'popItemClick' function.
The 'popItemClick' function must be set to new menu actions.</p>`
}
globalthis.alertBox(content);
}
}
}
this.elem = elem;
this.$elem = $(elem);
this.options = $.extend({}, this.defaultOptions, options);
if (!this.$elem.hasClass(this.options.theme)) {
this.$elem.addClass(this.options.theme);
}
this.init();
}
init() {
this.popup = $('<div class="pop-cont" />')
.addClass('pop-' + this.options.position)
.addClass('popupTheme' + this.options.style)
.append('<div class="pop-items" />')
.appendTo('body').css("opacity", 0).hide();
this.setContent();
this.setTriggers();
}
setContent() {
var self = this;
var location = this.popup.find(".pop-items");
var content;
if ((this.options.position == 'top') || (this.options.position == 'bottom')) {
content = $(this.options.content).find("a").addClass("pop-item");
location.html(content);
this.popup.find("i").first().addClass("leftBorder");
this.popup.find("i").last().addClass("rightBorder");
} else if ((this.options.position == 'left') || (this.options.position == 'right')) {
content = $(this.options.content).find("a").addClass("pop-item").addClass('item-side');
location.html(content);
this.popup.find("i").first().addClass("topBorder");
this.popup.find("i").last().addClass("bottomBorder");
}
//popItemClick callback****************************************
location.find('.pop-item').on('click', function(event) {
event.preventDefault();
self.options.popItemClick.call(this, self);
});
}
setTriggers() {
var self = this;
if (this.options.event === 'click') {
this.$elem.on('click', function(event) {
event.preventDefault();
if (self.$elem.hasClass('pressed')) {
self.pophide();
} else {
self.popshow();
}
});
}
if (this.options.event === 'hover') {
this.$elem.on('mouseenter', function(event) {
setTimeout(function() {
self.popshow();
self.popup = $(self.popup[0]);
}, 250);
});
$(this.popup).on('mouseleave', function(event) {
setTimeout(function() {
self.pophide();
}, 1000);
});
}
if (this.options.hideOnClick === true) {
$('html').on('click.popup', function(event) {
if (event.target != self.elem && self.$elem.has(event.target).length === 0 &&
self.popup.has(event.target).length === 0 && self.popup.is(":visible")) {
self.pophide();
}
});
}
}
pophide() {
var self = this;
var animation = {
opacity: 0
};
this.$elem.removeClass('pressed');
switch (this.options.position) {
case 'top':
animation.top = '+=20';
break;
case 'left':
animation.left = '+=20';
break;
case 'right':
animation.left = '-=20';
break;
case 'bottom':
animation.top = '-=20';
break;
}
this.popup.animate(animation, 200, function() {
self.popup.hide();
});
}
popshow() {
this.$elem.addClass('pressed');
this.setPosition();
this.popup.show().css({
opacity: 1
}).addClass('animate-' + this.options.animation);
}
setPosition() {
var self = this;
this.coords = this.$elem.offset();
var x = this.coords.left;
var y = this.coords.top;
var popWidth = this.popup.width();
var popHeight = this.popup.height();
var adjLeft = popWidth / 2;
var adjTop = popHeight / 2;
this.testy = $('<div class="test" />')
.css({
display: 'inline-block',
margin: '0px',
padding: '0px'
})
.appendTo('body');
var measure = this.$elem.clone().css({
padding: "0px",
margin: "0px"
});
var loc = this.testy;
loc.html(measure);
var textWidth = this.testy.width();
var textHeight = this.testy.height();
this.testy.remove();
var adjMenuWidth = textWidth / 2;
var adjMenuHeight = textHeight / 2;
var up = y - (popHeight + 7);
var down = y + textHeight;
if (this.popup.hasClass('pop-top')) {
this.popup.css({
top: up + "px",
left: (x - adjLeft + adjMenuWidth + 5) + "px",
right: "auto",
'z-index': this.options.zIndex
});
}
if (this.popup.hasClass('pop-bottom')) {
this.popup.css({
top: (down + 7) + "px",
left: (x - adjLeft + adjMenuWidth + 5) + "px",
right: "auto",
'z-index': this.options.zIndex
});
}
if (this.popup.hasClass('pop-left')) {
this.popup.css({
top: (y - adjTop + adjMenuHeight + 5) + "px",
left: (x - popWidth - 2) + "px",
right: "auto",
'z-index': this.options.zIndex
});
}
if (this.popup.hasClass('pop-right')) {
this.popup.css({
top: (y - adjTop + adjMenuHeight + 5) + "px",
left: (x + textWidth + 12) + "px",
right: "auto",
'z-index': this.options.zIndex
});
}
}
alertBox(content) {
var self = this;
var myAlert = `<div id="alertBox" class="alert">
<div class="alert-content">
<div class="alert-header">
<h2></h2>
</div>
<div class="alert-body"></div>
<div class="alert-footer">
<button class="alert-close">OK</button>
</div>
</div>
</div>`;
$('body').append(myAlert);
this.alert = $('#alertBox');
this.header = this.alert.find('div.alert-header');
this.heading = this.header.find('h2');
this.alertBody = this.alert.find('div.alert-body');
this.footer = this.alert.find('div.alert-footer');
this.close = this.footer.find('button.alert-close');
this.heading.append(content.heading);
this.alertBody.append(content.text);
switch (content.type) {
case "info":
this.header.addClass("info");
this.footer.addClass("info");
this.close.addClass("info");
break;
case "success":
this.header.addClass("success");
this.footer.addClass("success");
this.close.addClass("success");
break;
case "danger":
this.header.addClass("danger");
this.footer.addClass("danger");
this.close.addClass("danger");
break;
case "warning":
this.header.addClass("warning");
this.footer.addClass("warning");
this.close.addClass("warning");
break;
default:
break;
}
this.alert.show();
var closeBtn = $("button.alert-close");
closeBtn.on("click", function() {
self.alert.remove();
});
$(document).on("click", function(event) {
event.preventDefault();
if (event.target == self.alert[0]) {
self.alert.remove();
}
});
}
};
//Set $.fn.popup so it returns an instance of the Popup class when called*******************************
$.fn.popup = function(options) {
return this.each(function() {
var popobject = new Popup(options, this);
});
};
}(jQuery));
/*jshint multistr: true */
//this is a sample .js file that shows how you might set up the popup menus
;
(function($) {
$(document).ready(function() {
$('#defaultTest').popup();
});
}(jQuery));
/*Default theme**************/
.popupTheme {
background-color: #333;
background-size: 100% 100%;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 0;
position: relative;
box-shadow: 5px 5px 3px #888;
z-index: 1;
float: left;
margin: 5px;
cursor: pointer;
}
.popupTheme i,
.popupThemeRed i,
.popupThemeBlue i,
.popupThemeGreen i,
.popupThemeCustom i {
width: 20px;
height: 20px;
font-size: 18px;
color: #fff;
display: block;
background-color: transparent;
padding: 10px;
background-size: 100% 100%;
cursor: pointer;
}
.popupTheme i:hover {
background-color: #4d4d4d;
}
.pop-cont.pop-top::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -7px;
border-width: 7px;
border-style: solid;
border-color: #333 transparent transparent transparent;
z-index: 100;
}
.pop-cont.pop-bottom::before {
content: "";
position: absolute;
top: -14px;
left: 50%;
margin-left: -7px;
border-width: 7px;
border-style: solid;
border-color: transparent transparent #333 transparent;
z-index: 100;
}
.pop-cont.pop-left::after {
content: "";
position: absolute;
top: 50%;
left: 100%;
margin-top: -7px;
border-width: 7px;
border-style: solid;
border-color: transparent transparent transparent #333;
z-index: 100;
}
.pop-cont.pop-right::before {
content: "";
position: absolute;
top: 50%;
left: -14px;
margin-top: -7px;
border-width: 7px;
border-style: solid;
border-color: transparent #333 transparent transparent;
z-index: 100;
}
.pop-cont {
margin: auto;
position: relative;
display: block;
cursor: pointer;
border-radius: 6px;
box-shadow: 5px 5px 3px #888;
}
.pop-cont,
.pop-item,
.popupTheme {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
/*Individual menu item*/
.pop-item {
height: 100%;
display: block;
width: 20px;
height: 20px;
text-align: center;
padding: 10px;
text-decoration: none;
float: left;
}
.item-side {
float: none !important;
}
.pop-item i {
margin: -10px 0 0 -10px;
}
.pop-top {
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
}
.pop-bottom {
position: absolute;
top: 0;
left: 50%;
margin-left: -5px;
}
.pop-left {
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
margin-top: -7px;
}
.pop-right {
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
margin-top: -7px;
}
.animate-standard {
animation: animateStandard 0.3s 1 ease;
-webkit-animation: animateStandard 0.3s 1 ease;
}
#-webkit-keyframes animateStandard {
from {
transform: translateY(20px);
opacity: 0;
}
to {
transform: translateY(0px);
opacity: 1;
}
}
#keyframes animateStandard {
from {
transform: translateY(20px);
opacity: 0;
}
to {
transform: translateY(0px);
opacity: 1;
}
}
.animate-grow {
animation: animateGrow 0.4s 1 ease;
-webkit-animation: animateGrow 0.4s 1 ease;
}
#-webkit-keyframes animateGrow {
0% {
transform: scale(0) translateY(40px);
opacity: 0;
}
70% {
transform: scale(1.5) translate(0px);
}
100% {
transform: scale(1) translate(0px);
opacity: 1;
}
}
#keyframes animateGrow {
0% {
transform: scale(0) translateY(40px);
opacity: 0;
}
70% {
transform: scale(1.5) translate(0px);
}
100% {
transform: scale(1) translate(0px);
opacity: 1;
}
}
.animate-flip {
animation: animateFlip 0.4s 1 ease;
-webkit-animation: animateFlip 0.4s 1 ease;
}
#-webkit-keyframes animateFlip {
from {
transform: rotate3d(2, 2, 2, 180deg);
opacity: 0;
}
to {
transform: rotate3d(0, 0, 0, 0deg);
opacity: 1;
}
}
#keyframes animateFlip {
from {
transform: rotate3d(2, 2, 2, 180deg);
opacity: 0;
}
to {
transform: rotate3d(0, 0, 0, 0deg);
opacity: 1;
}
}
.leftBorder {
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
}
.rightBorder {
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
}
.bottomBorder {
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
}
.topBorder {
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}
.hidden {
display: none !important;
}
.clear {
clear: both;
}
/* The Alert Box (background) */
.alert {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1001;
/* Sit on top */
padding-top: 250px;
/* Location of the box */
left: 0;
top: 0;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
overflow: auto;
/* Enable scroll if needed */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.8);
/* Black w/ opacity */
}
.alert-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
border: 1px solid #888;
border-radius: 6px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s;
max-width: 700px;
min-width: 300px;
/*width settings for different browsers. Note that these won't work at all for IE and versions of Edge before v79*/
width: fit-content;
/*works in chrome and opera*/
width: -moz-fit-content;
/*works for firefox */
width: -webkit-fit-content;
/*works for Edge v79 and up*/
width: -ms-fit-content;
width: -o-fit-content;
}
#-webkit-keyframes animatetop {
from {
top: -300px;
opacity: 0
}
to {
top: 0;
opacity: 1
}
}
#keyframes animatetop {
from {
top: -300px;
opacity: 0
}
to {
top: 0;
opacity: 1
}
}
.alert-header,
.alert-header.info {
padding: 2px 16px;
background-color: #02baf2;
color: #fff;
border-radius: 5px 5px 0px 0px;
text-align: center;
}
.alert-header.success {
background-color: #00cc1b;
}
.alert-header.danger {
background-color: #ff0000;
}
.alert-header.warning {
background-color: #f7931e;
}
.alert-body {
padding: 2px 16px;
text-align: left;
font-size: 18px;
font-weight: bold;
color: #000;
min-height: 40px;
}
.alert-footer,
.alert-footer.info {
padding: 15px 16px;
background-color: #02baf2;
color: #fff;
border-radius: 0px 0px 5px 5px;
text-align: center;
}
.alert-footer.success {
background-color: #00cc1b;
}
.alert-footer.danger {
background-color: #ff0000;
}
.alert-footer.warning {
background-color: #f7931e;
}
.alert-close,
.alert-close.info {
padding: 5px 15px;
border-radius: 3px;
border: 0;
background-color: #fff;
color: #02baf2;
font-weight: bold;
box-shadow: 5px 5px 10px #666;
}
.alert-close.success {
color: #00cc1b;
}
.alert-close.danger {
color: #ff0000;
}
.alert-close.warning {
color: #f7931e;
}
.alert-close:hover {
color: #000;
text-decoration: none;
cursor: pointer;
}
.alert-close:focus {
outline: none;
}
body {
font-family: Helvetica, sans-serif;
}
.displayBox {
background-color: #efefef;
padding: 0px 0px 30px 0px;
display: inline-block;
width: 100%;
}
.header {
text-align: center;
font-size: 12px;
border-bottom: 1px solid #fff;
width: 100%;
color: #fff;
background-color: #130e5a;
}
.header h1 {
margin: 0px;
padding: 5px 0px;
}
div.icon-box-top {
margin: 50px 0px 25px 0px;
display: block;
float: left;
clear: both;
}
div.icon-box {
margin: 25px 0px 25px 0px;
display: block;
float: left;
clear: both;
}
p.icon-text,
p.menuText {
display: block;
margin-left: 45px;
margin-bottom: 0px;
float: left;
}
p.menuText {
margin-left: 20px !important;
margin-top: 0px;
}
.textPopup {
/*When attaching popups to text menus, style text menu separately*/
display: block;
font-size: 28px;
font-weight: bold;
color: #130e5a;
margin: 0px 0px 0px 75px;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
cursor: pointer;
float: left;
z-index: 1;
}
p.textPopup.pressed {
color: #02baf2 !important;
}
div#myPopUp,
div#myPopUp2,
div#myPopUp3,
div#myPopUp4 {
margin-left: 75px;
display: inline-block;
}
i.swIcon {
font-size: 208px !important;
margin: 10px;
}
text-decoration: none;
}
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="icon-box-top">
<div id="defaultTest" style="margin-left: 75px">
<i class="fa fa-cog leftBorder rightBorder"></i>
</div>
</div>
I have an example I'm working from which works fine. When I duplicate that code in my app, the icon looks too small and off center.
Here is how it is supposed to look, per example:
Here is how it looks when I enter the same code:
It is smaller and the cog is off center.
Here is the example's html:
<div class="icon-box-top">
<div id="defaultTest" style="margin-left: 75px">
<i class="fa fa-cog leftBorder rightBorder"></i>
</div>
</div>
Here is my html:
<div class="icon-box-top">
<div id="defaultTest" style="margin-left: 75px">
<i class="fa fa-cog leftBorder rightBorder"></i>
</div>
</div>
Here are the example's dependencies:
<link rel="stylesheet" type="text/css" href="styles/Popup-plugin.css">
<link rel="stylesheet" type="text/css" href="styles/Example.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <!-- necessary for the "draggable" ui -->
<script src="scripts/Popup-plugin.js"></script>
<script src="scripts/Example.js"></script>
Here are my dependencies:
<link rel="stylesheet" type="text/css" href="css/Popup-plugin.css">
<link rel="stylesheet" type="text/css" href="css/Example.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <!-- necessary for the "draggable" ui -->
<script src="js/Popup-plugin.js"></script>
<script src="js/Example.js"></script>
The only difference that I can see is he stores his javascript in scripts folder and mine is in js folder. And he stores his css in styles folder whereas mine is in css folder.
The javascript is the same too:
$('#defaultTest').popup();
Any ideas?

I finally found the problem. There was a bootstrap css library that was interfering with the Popup-plugin css. But now my bootstrap tabs don't work and I'll have to spend additional time looking at different versions of it, or replacing the tabs with something else. I figured there was a css conflict somewhere but it took me all day to find it. This has happened to me before and it is a painful and time-consuming process to isolate the problem and fix it. If anyone has suggestions of tools or techniques for speeding up this process, please leave comments below for everyone reading this to benefit.

HTML5 Video Replay Button Hide at Start

I have a bug with my HTML5 Video player where the replay button shows at the start. I want to show the play button and not the replay. The replay button seems to be functioning properly, just doesn't hide at start.
CSS
.video-wrapper {
position: relative;
max-width: 680px;
}
.video-wrapper > video {
width: 100%;
max-width: 100%;
box-sizing: border-box;
vertical-align: middle;
cursor: pointer;
}
/* Hide iOS Play Button */
video::-webkit-media-controls-start-playback-button {
display: none!important;
-webkit-appearance: none;
}
.playButton {
border-radius: 100px;
border: 8px solid #fff !important;
height: 100px;
position: absolute;
width: 100px;
margin: auto;
top: 0;
bottom: 0;
right: 0;
left: 0;
cursor: pointer;
display: block;
opacity: 0.95;
transition: opacity 400ms;
}
.playButton:before {
content: "";
display: block;
width: 0;
height: 0;
border-style: solid;
border-width: 25px 0 25px 50px;
border-color: transparent transparent transparent #fff;
position: absolute;
top: 0;
left: 0;
right: -10px;
bottom: 0;
margin: auto;
}
.replayButton {
border-radius: 100px;
border: 8px solid #fff !important;
height: 100px;
position: absolute;
width: 100px;
margin: auto;
top: 0;
bottom: 0;
right: 0;
left: 0;
cursor: pointer;
display: block;
opacity: 0.95;
transition: opacity 150ms;
}
.replayButton:before {
height: 45px;
width: 45px;
position: absolute;
top: 18px;
left: 18px;
content: '';
display: block;
border-color: transparent white white white;
border-radius: 50%;
border-style: solid;
border-width: 8px;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.replayButton:after {
border-color: transparent transparent transparent white;
border-style: solid;
border-width: 0 45px 22px 22px;
height: 0;
position: absolute;
top: 40px;
left: 15px;
bottom: 0;
right: 0;
width: 0;
content: "";
display: block;
margin: auto;
}
HTML
<div class="video-wrapper">
<video id="bVideo">
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" />
</video>
<div id="playButton" class="playButton" onclick="playPause()"></div>
<div class="replayButton" id="replayButton" onclick="playPause()"></div>
</div>
Script
var bunnyVideo = document.getElementById("bVideo");
var el = document.getElementById("playButton");
var replay = document.getElementById("replayButton");
function playPause() {
if (bunnyVideo.paused)
{
bunnyVideo.play();
el.className = "";
replay.className = "";
}
else
{
bunnyVideo.pause();
el.className = "playButton";
replay.className = "";
}
}
function playPauseControls() {
if (!bunnyVideo.paused) {
el.className ="";
replay.className = "";
} else {
el.className = "playButton";
replay.className = "";
}
}
function videoEnd() {
replay.className = "replayButton";
el.className = "";
bunnyVideo.setAttribute("controls","controls");
}
function showControls(){
bunnyVideo.setAttribute("controls","controls");
}
function hideControls(){
bunnyVideo.removeAttribute("controls","controls");
}
bunnyVideo.addEventListener("click", playPause, false);
bunnyVideo.addEventListener("play", playPauseControls, false);
bunnyVideo.addEventListener("pause", playPauseControls, false);
bunnyVideo.addEventListener("mouseover", showControls, false);
bunnyVideo.addEventListener("mouseout", hideControls, false);
playButton.addEventListener("mouseover", showControls, false);
replay.addEventListener("mouseover", showControls, false);
bunnyVideo.addEventListener("ended", videoEnd, false);
https://jsfiddle.net/prpzv8wh/

Set the div to invisible when you start your javascript:
var replay = document.getElementById("replayButton");
replay.style.visibility = "hidden";
Then in the replay call back set it to visible:
function videoEnd() {
replay.className = "replayButton";
replay.style.visibility = "visible";
el.className = "";
bunnyVideo.setAttribute("controls","controls");
}