Play sound if div pass a offset while in animation?

Play sound if div pass a offset while in animation? - javascript

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)

Related

How to make a toggle onclick to hide and show video player's UI?

I want to show and hide the video player's elements details, play_pause_button and controls_bar when the video player itself is clicked but not when its elements are clicked. I have made some progress but the video player's elements hide when I click on the elements which shouldn't happen. So how can I detect that the video player was clicked but not the video player's elements.
index.html:
var play_pause_button = document.getElementById("play_pause_button");
play_pause_button.style.visibility = "hidden";
var details = document.getElementById("details");
details.style.visibility = "hidden";
var controls_bar = document.getElementById("player_controller_bar");
controls_bar.style.visibility = "hidden";
document.getElementById("video_player_box").onclick = function () {
if (controls_bar.style.visibility == "hidden") {
play_pause_button.style.visibility = "visible";
details.style.visibility = "visible";
controls_bar.style.visibility = "visible";
} else {
play_pause_button.style.visibility = "hidden";
details.style.visibility = "hidden";
controls_bar.style.visibility = "hidden";
}
}
body {
margin: 0;
}
#video_player_box {
position: relative;
height: 100%;
width: 100%;
display: block;
font-family: Helvetica, Arial, sans-serif;
color: rgb(22,22,23);
}
#video_player_box video {
height: 100%;
width: 100%;
pointer-events: none;
}
#video_player_box img {
width: 50px;
height: 50px;
}
#video_player_box #details {
width: 100%;
height: 12.5%;
background-color: rgb(108, 171, 247);
position: absolute;
top: 0;
}
#video_player_box #play_pause_button {
background-color: rgb(108, 171, 247);
height: 100px;
width: 100px;
margin-top: -50px;
margin-left: -50px;
position: absolute;
top: 50%;
left: 50%;
border-radius: 50%;
}
#video_player_box #play_pause_button img {
width: 50%;
height: 50%;
z-index: 1;
position: absolute;
left: 50%;
top: 50%;
margin: -25% 0px 0px -25%;
}
#video_player_box #player_controller_bar {
width: 100%;
height: 50px;
background-color: rgb(108, 171, 247);
position: absolute;
bottom: 0;
display: flex;
align-items: center;
}
.controller_bar_block1, .controller_bar_block3 {
text-align: center;
padding: 0px 5px 0px 5px;
margin: 5px 0px 5px 0px;
}
.controller_bar_block2 {
flex: 7;
text-align: center;
padding: 0px 5px 0px 5px;
}
#video_player_box #seek_bar {
padding-top: 3px;
background: rgb(108, 171, 247);
border: rgb(22, 22, 23) 1px solid;
border-radius: 50px;
width: 100%;
float: left;
-webkit-appearance: none !important;
height: 4px;
flex: 7;
}
#video_player_box #seek_bar::-webkit-slider-thumb {
-webkit-appearance: none !important;
background: rgb(22, 22, 23);
height: 1px;
width: 1px;
cursor: pointer;
border-radius: 100%;
}
<html>
<head>
<title></title>
</head>
<body>
<div id="video_player_box">
<div id="details"></div>
<div id="play_pause_button">
<img src="https://image.flaticon.com/icons/png/512/31/31128.png">
</div>
<video poster="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c5/Big_buck_bunny_poster_big.jpg/220px-Big_buck_bunny_poster_big.jpg" src="https://dash.akamaized.net/akamai/bbb/bbb_640x360_60fps_1200k.mp4"></video>
<div id="player_controller_bar">
<div class="controller_bar_block1">00:00:00</div>
<div class="controller_bar_block2">
<input id="seek_bar" type="range" min="0" value="0" max="634">
</div>
<div class="controller_bar_block3">00:10:34</div>
</div>
</div>
</body>
</html>

You can use the event's target property. The target property references the element that was actually clicked, even when you attach the handler on a ascending element
(see https://developer.mozilla.org/en-US/docs/Web/API/Event/target)
you will receive the reference to the event as the first argument of your onClick handler
myElement.onclick = function (ev) {
if (ev.target.id === 'details') {
// the clicked element is the details element
}
}
you can also check if the target is the video element for example.
console.log(ev.target.nodeName === 'VIDEO')

CSS, express and bootstrap : overflow and margin error

I stack two circles over an image, using the position and overflow properties.
It works fine but I have the circle running over the image on left and right (not top and left.
Here is the image : Circle overflowing
Here is the CSS.
.mainContainer {
background-color: #A6A4AA
}
.targetImage {
margin: 0;
width: 100%;
height: auto;
border: solid medium #2C3756;
border-radius: 0 0 8px 8px;
background-color: #A6A4AA;
position: relative;
}
#targetCol {
overflow: hidden;
position: absolute;
}
.impact, .ajustement {
position: absolute;
background-color: #dc022e;
border-radius: 100%;
opacity: 0.75;
margin: 0;
width: 100%;
height: auto;
border: solid medium #2C3756;
}
.ajustement {
opacity: 0.5;
}
The code source (ejs+bootstrap) : the row is a child of mainContainer
<div class="row"> <!-- Row : target -->
<div class= "col-xs-12" id="targetCol">
<img id="target" class="targetImage"></img>
<div id="ajustement" class="ajustement"></div>
<div id="impact" class="impact"></div>
</div>
</div>
How can I draw my circles into the images only, without running out the border ?
Here is what I would like :

Do you looking something like this:
body{
margin: 0;
background-color: #A6A4AA
}
.mainContainer {
background-color: #A6A4AA;
margin: 15px auto;
width: 98%;
}
.targetImage {
margin: 0;
width: 100%;
height: auto;
border-radius: 0 0 8px 8px;
background: #A6A4AA;
position: relative;
}
#targetCol {
overflow: hidden;
position: absolute;
border: 3px solid #2C3756;
line-height: 0;
border-radius: 12px;
}
.impact, .ajustement {
position: absolute;
background-color: #dc022e;
border-radius: 100%;
opacity: 0.75;
margin: 0;
width: 100%;
height: auto;
border: 3px solid #2C3756;
left: -45%;
top: -78px;
height: calc(100% + 78px);
}
.impact{
width: 20px;
height: 20px;
border-color: #000;
left: 10%;
top: 10%;
}
.ajustement {
opacity: 0.5;
}
<div class="mainContainer">
<div class="row"> <!-- Row : target -->
<div class= "col-xs-12" id="targetCol">
<img id="target" class="targetImage" src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/aa/Papageitaucher_Fratercula_arctica.jpg/800px-Papageitaucher_Fratercula_arctica.jpg">
<div id="ajustement" class="ajustement"></div>
<div id="impact" class="impact"></div>
</div>
</div>
</div>

Increase z-index on custom controls when video is fullscreen

I am working on a touchscreen video kiosk coding in javascript and CSS and HTML. I have some code that works pretty well thanks to a post by zer00ne. I have 4 videos on the page with custom controls for play and fullscreen. When I fullscreen a video I can still see the Custom controls of every other video behind it. Im not sure why but I can see that these values may have something to do with it:
video::-webkit-media-controls-enclosure { display:none !important; }
.vidBar1 { z-index: 2147483647; }
.vidBar2 { z-index: 2147483647; }
.vidBar3 { z-index: 2147483647; }
.vidBar4 { z-index: 2147483647; }
I am not a programmer by any means and I have struggled a lot just to get this this far with a lot of "borrowed" code.
What I would like to do is set the above values to 2147483646 and then on the event listener for the fullscreen button for each video have the z-index for the custom controls on that video increased by 1 on fullscreen and decreased by 1 when full screen exits. In short when 1 video is fullscreen I dont want to see anything but that video and its custom controls.
Im not even sure if thats how it "should" be done but I'd like to get this project done as I have a limited time left to work on it and that is the last thing that is not working. Please see the entire code here and thank you so much in advance:`
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>PowerHouse-VideoKiosk</title>
<style>
.vidFrame1 { position: absolute; top: 10%; width: 640px; height: auto; min-height: 180px; outline: 1px dashed red; }
.vidFrame2 { position: absolute; top: 10%; left: 50%; width: 640px; height: auto; min-height: 180px; outline: 1px dashed red; }
.vidFrame3 { position: absolute; top: 50%; left: 50%; width: 640px; height: auto; min-height: 180px; outline: 1px dashed red; }
.vidFrame4 { position: absolute; top: 50%; width: 640px; height: auto; min-height: 180px; outline: 1px dashed red; }
.vidBar1 { position: absolute; bottom: 0; right: 0; left: 0; height: 40px; width: 99%; z-index: 2;}
.vidBar2 { position: absolute; bottom: 0; right: 0; left: 0; height: 40px; width: 99%; z-index: 2;}
.vidBar3 { position: absolute; bottom: 0; right: 0; left: 0; height: 40px; width: 99%; z-index: 2;}
.vidBar4 { position: absolute; bottom: 0; right: 0; left: 0; height: 40px; width: 99%; z-index: 2;}
#fullScreen1 { position: absolute; bottom: 0; right: 0; width: 36px; height: 36px; outline: none; border: 1px solid transparent; border-radius: 6px; display: block; cursor: pointer; z-index: 3;}
#fullScreen2 { position: absolute; bottom: 0; right: 0; width: 36px; height: 36px; outline: none; border: 1px solid transparent; border-radius: 6px; display: block; cursor: pointer; z-index: 3;}
#fullScreen3 { position: absolute; bottom: 0; right: 0; width: 36px; height: 36px; outline: none; border: 1px solid transparent; border-radius: 6px; display: block; cursor: pointer; z-index: 3;}
#fullScreen4 { position: absolute; bottom: 0; right: 0; width: 36px; height: 36px; outline: none; border: 1px solid transparent; border-radius: 6px; display: block; cursor: pointer; z-index: 3;}
#fullScreen1:hover { border: 1px groove #0ef; }
#fullScreen2:hover { border: 1px groove #0ef; }
#fullScreen3:hover { border: 1px groove #0ef; }
#fullScreen4:hover { border: 1px groove #0ef; }
.on1, .off1 { background: url('https://glpro.s3.amazonaws.com/lib/bx/toggle.png') no-repeat; width: 36px; height: 36px; }
.on2, .off2 { background: url('https://glpro.s3.amazonaws.com/lib/bx/toggle.png') no-repeat; width: 36px; height: 36px; }
.on3, .off3 { background: url('https://glpro.s3.amazonaws.com/lib/bx/toggle.png') no-repeat; width: 36px; height: 36px; }
.on4, .off4 { background: url('https://glpro.s3.amazonaws.com/lib/bx/toggle.png') no-repeat; width: 36px; height: 36px; }
.off1 { background-position: 0 0 }
.off2 { background-position: 0 0 }
.off3 { background-position: 0 0 }
.off4 { background-position: 0 0 }
.on1 { background-position: -1px -50px }
.on2 { background-position: -1px -50px }
.on3 { background-position: -1px -50px }
.on4 { background-position: -1px -50px }
#playPause1 { position: absolute; bottom: 0; left: 0; width: 36px; height: 36px; background: none; font-size: 36px; color: #0ff; line-height: 1; border: 1px solid transparent; display: block; cursor: pointer; outline: none; z-index: 3;}
#playPause2 { position: absolute; bottom: 0; left: 0; width: 36px; height: 36px; background: none; font-size: 36px; color: #0ff; line-height: 1; border: 1px solid transparent; display: block; cursor: pointer; outline: none; z-index: 3;}
#playPause3 { position: absolute; bottom: 0; left: 0; width: 36px; height: 36px; background: none; font-size: 36px; color: #0ff; line-height: 1; border: 1px solid transparent; display: block; cursor: pointer; outline: none; z-index: 3;}
#playPause4 { position: absolute; bottom: 0; left: 0; width: 36px; height: 36px; background: none; font-size: 36px; color: #0ff; line-height: 1; border: 1px solid transparent; display: block; cursor: pointer; outline: none; z-index: 3;}
#playPause1.play1:before { content: '\25b6'; }
#playPause1.pause1:before { content: '\275a\275a'; }
#playPause2.play2:before { content: '\25b6'; }
#playPause2.pause2:before { content: '\275a\275a'; }
#playPause3.play3:before { content: '\25b6'; }
#playPause3.pause3:before { content: '\275a\275a'; }
#playPause4.play4:before { content: '\25b6'; }
#playPause4.pause4:before { content: '\275a\275a'; }
.vid1 { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: auto; display: block; z-index: 1; outline: 1px dotted blue; }
.vid2 { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: auto; display: block; z-index: 1; outline: 1px dotted blue; }
.vid3 { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: auto; display: block; z-index: 1; outline: 1px dotted blue; }
.vid4 { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: auto; display: block; z-index: 1; outline: 1px dotted blue; }
/*
Fullscreen Pseudo-class:
https://developer.mozilla.org/en-US/docs/Web/CSS/:fullscreen
*/
.vidBar1:-moz-full-screen { position: fixed; }
.vidBar1:-webkit-full-screen { position: fixed; }
.vidBar1:-ms-fullscreen { position: fixed; }
.vidBar1:fullscreen { position: fixed; }
.vidBar2:-moz-full-screen { position: fixed; }
.vidBar2:-webkit-full-screen { position: fixed; }
.vidBar2:-ms-fullscreen { position: fixed; }
.vidBar2:fullscreen { position: fixed; }
.vidBar3:-moz-full-screen { position: fixed; }
.vidBar3:-webkit-full-screen { position: fixed; }
.vidBar3:-ms-fullscreen { position: fixed; }
.vidBar3:fullscreen { position: fixed; }
.vidBar4:-moz-full-screen { position: fixed; }
.vidBar4:-webkit-full-screen { position: fixed; }
.vidBar4:-ms-fullscreen { position: fixed; }
.vidBar4:fullscreen { position: fixed; }
/*
Special Shadow DOM Settings to Override Default Controls:
https://css-tricks.com/custom-controls-in-html5-video-full-screen/
*/
video::-webkit-media-controls-enclosure { display:none !important; }
.vidBar1 { z-index: 2147483647; }
.vidBar2 { z-index: 2147483647; }
.vidBar3 { z-index: 2147483647; }
.vidBar4 { z-index: 2147483647; }
</style>
</head>
<body>
<figure class="vidFrame1">
<video id="vid1" class="vid1" autoplay muted loop src="Bill_Nye_the_Science_Guy_S01E18_Electricity.mp4"></video>
<figcaption class="vidBar1">
<button id='playPause1' class="play1" title="Play/Pause Video"></button>
<button id='fullScreen1' class="on1" title="Enter/Exit Full Screen"></button>
</figcaption>
</figure>
<figure class="vidFrame2">
<video id="vid2" class="vid2" autoplay muted loop src="Tesla'sWardenclyffeTowerandLab(3D Model).mp4"></video>
<figcaption class="vidBar2">
<button id='playPause2' class="play2" title="Play/Pause Video"></button>
<button id='fullScreen2' class="on2" title="Enter/Exit Full Screen"></button>
</figcaption>
</figure>
</figure>
<figure class="vidFrame3">
<video id="vid3" class="vid3" autoplay muted loop src="IntroductiontoElectricity.mp4"></video>
<figcaption class="vidBar3">
<button id='playPause3' class="play3" title="Play/Pause Video"></button>
<button id='fullScreen3' class="on3" title="Enter/Exit Full Screen"></button>
</figcaption>
</figure>
<figure class="vidFrame4">
<video id="vid4" class="vid4" autoplay muted loop src="FirstElectricBulbsbyThomasEdison.mp4"></video>
<figcaption class="vidBar4">
<button id='playPause4' class="play4" title="Play/Pause Video"></button>
<button id='fullScreen4' class="on4" title="Enter/Exit Full Screen"></button>
</figcaption>
</figure>
<script>
/*
Toggle Button with classList:
https://developer.mozilla.org/en-US/docs/Web/API/Element/classList
*/
var fullBtn1 = document.getElementById('fullScreen1');
var playBtn1 = document.getElementById('playPause1');
var fullBtn2 = document.getElementById('fullScreen2');
var playBtn2 = document.getElementById('playPause2');
var fullBtn3 = document.getElementById('fullScreen3');
var playBtn3 = document.getElementById('playPause3');
var fullBtn4 = document.getElementById('fullScreen4');
var playBtn4 = document.getElementById('playPause4');
playBtn1.addEventListener('click', function(event) {
var player1 = document.getElementById('vid1');
if(player1.paused) {
playBtn1.classList.remove('play1');
playBtn1.classList.add('pause1');
player1.play();
} else {
playBtn1.classList.add('play1');
playBtn1.classList.remove('pause1');
player1.pause();
}
}, false);
playBtn2.addEventListener('click', function(event) {
var player2 = document.getElementById('vid2');
if(player2.paused) {
playBtn2.classList.remove('play2');
playBtn2.classList.add('pause2');
player2.play();
} else {
playBtn2.classList.add('play2');
playBtn2.classList.remove('pause2');
player2.pause();
}
}, false);
playBtn3.addEventListener('click', function(event) {
var player3 = document.getElementById('vid3');
if(player3.paused) {
playBtn3.classList.remove('play3');
playBtn3.classList.add('pause3');
player3.play();
} else {
playBtn3.classList.add('play3');
playBtn3.classList.remove('pause3');
player3.pause();
}
}, false);
playBtn4.addEventListener('click', function(event) {
var player4 = document.getElementById('vid4');
if(player4.paused) {
playBtn4.classList.remove('play4');
playBtn4.classList.add('pause4');
player4.play();
} else {
playBtn4.classList.add('play4');
playBtn4.classList.remove('pause4');
player4.pause();
}
}, false);
fullBtn1.addEventListener('click', function(event) {
var tgtEle1 = document.querySelector('.vid1');
var onOrOff1 = fullBtn1.classList.contains('on1');
if (onOrOff1) {
enterFS(tgtEle1);
fullBtn1.classList.remove('on1');
fullBtn1.classList.add('off1');
vid1.muted = false;
vid1.currentTime = 0;
} else {
exitFS();
fullBtn1.classList.add('on1');
fullBtn1.classList.remove('off1');
vid1.muted = true;
vid1.currentTime = 0;
}
}, false);
fullBtn2.addEventListener('click', function(event) {
var tgtEle2 = document.querySelector('.vid2');
var onOrOff2 = fullBtn2.classList.contains('on2');
if (onOrOff2) {
enterFS(tgtEle2);
fullBtn2.classList.remove('on2');
fullBtn2.classList.add('off2');
vid2.muted = false;
vid2.currentTime = 0
} else {
exitFS();
fullBtn2.classList.add('on2');
fullBtn2.classList.remove('off2');
vid2.muted = true;
vid2.currentTime = 0
}
}, false);
fullBtn3.addEventListener('click', function(event) {
var tgtEle3 = document.querySelector('.vid3');
var onOrOff3 = fullBtn3.classList.contains('on3');
if (onOrOff3) {
enterFS(tgtEle3);
fullBtn3.classList.remove('on3');
fullBtn3.classList.add('off3');
vid3.muted = false;
vid3.currentTime = 0
} else {
exitFS();
fullBtn3.classList.add('on3');
fullBtn3.classList.remove('off3');
vid3.muted = true;
vid3.currentTime = 0
}
}, false);
fullBtn4.addEventListener('click', function(event) {
var tgtEle4 = document.querySelector('.vid4');
var onOrOff4 = fullBtn4.classList.contains('on4');
if (onOrOff4) {
enterFS(tgtEle4);
fullBtn4.classList.remove('on4');
fullBtn4.classList.add('off4');
vid4.muted = false;
vid4.currentTime = 0
} else {
exitFS();
fullBtn4.classList.add('on4');
fullBtn4.classList.remove('off4');
vid4.muted = true;
vid4.currentTime = 0
}
}, false);
/*
Fullscreen API:
https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API
*/
function enterFS(element) {
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
}
}
function exitFS() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}
</script>
</body>
</html>
`

I really hate he amount of duplicate code in here... nevertheless here is what you need to do. The .vidBar classes you identified are the issue. They are always on a much higher z-index than everything else. You don't notice it though until you open the video at fullscreen. What you want to do is onl apply the high z-index to the opened video. So to do that we need to toggle a new class that is added and then removed when it is opened/closed.
.vidBar1.open { z-index: 2147483647; }
.vidBar2.open { z-index: 2147483647; }
.vidBar3.open { z-index: 2147483647; }
.vidBar4.open { z-index: 2147483647; }
and in your JS do this:
if (onOrOff1) {
enterFS(tgtEle1);
fullBtn1.classList.remove('on1');
fullBtn1.classList.add('off1');
fullBtn1.parentElement.classList.add('open');
vid1.muted = false;
vid1.currentTime = 0;
} else {
exitFS();
fullBtn1.classList.add('on1');
fullBtn1.classList.remove('off1');
fullBtn1.parentElement.classList.remove('open');
vid1.muted = true;
vid1.currentTime = 0;
}
Note, this is the new part:
fullBtn1.parentElement.classList.add('open');
...
fullBtn1.parentElement.classList.remove('open');
Do that for all four, make sure you update the class name as you update each.
So the high z-index class targets the video caption, which is the parent element of the full-screen button.
https://codepen.io/partypete25/pen/gRxPYo?editors=0110
Good luck.

Restart Simon Game in javascript

How I can make the game restart from the beginning by clicking start button except reloading the whole page?
The problem occurs because when user clicks Start playGame function is called, but the a previous instance of playGame function is still running. I even thought about to kill a previous instance of function but in JS it can not be implemented except using webworker.terminate().
Here's the code:
document.addEventListener("DOMContentLoaded", function() {
'use strict';
var checkOn = document.querySelector("input[type=checkbox]");
var gameCount = document.getElementsByClassName("innerCount")[0];
var startButton = document.getElementById("innerStart");
var strictButton = document.getElementById("strictButton");
var strictInd = document.getElementById("strictIndicator");
var strictMode = false;
var soundArray = document.getElementsByTagName("audio");
var buttons = document.querySelectorAll(".bigButton");
var buttonArray = [].slice.call(buttons, 0);
checkOn.addEventListener("change", function() {
if (checkOn.checked) {
gameCount.innerHTML = "--";
} else {
gameCount.innerHTML = "";
}
});
strictButton.addEventListener("click", function() {
if (checkOn.checked) {
strictMode = !strictMode;
strictMode ? strictInd.style.backgroundColor = "#FF0000" :
strictInd.style.backgroundColor = "#850000";
}
});
function getRandArray() {
var array = [];
for (var i = 0; i < 22; i++) {
array[i] = Math.floor(Math.random() * 4);
}
return array;
}
startButton.addEventListener("click", function() {
if (checkOn.checked) {
var level = 0;
var randIndexArr = getRandArray();
sleep(700).then(function() {
playGame(randIndexArr, level);
});
}
});
function sleep(time) {
return new Promise(resolve => {
setTimeout(resolve, time)
})
}
function checkButton(randIndexArr, counter) {
var indexButton = 0;
var checker = function checker(e) {
var clickedButtonId = e.target.dataset.sound;
lightenButton(clickedButtonId);
if (+(clickedButtonId) === randIndexArr[indexButton]) {
if (indexButton === counter) {
counter++;
for (let i = 0; i < 4; i++) {
buttonArray[i].removeEventListener("click", checker, false)
}
sleep(2000).then(function() {
playGame(randIndexArr, counter);
});
}
indexButton++;
} else {
gameCount.innerHTML = "--";
if (strictMode) {
indexButton = 0;
counter = 0;
} else {
indexButton = 0;
}
for (let i = 0; i < 4; i++) {
buttonArray[i].removeEventListener("click", checker, false)
}
sleep(2000).then(function() {
playGame(randIndexArr, counter);
});
}
};
for (var i = 0; i < 4; i++) {
buttonArray[i].addEventListener("click", checker, false)
}
}
function playGame(randIndexArr, counter) {
if (counter === 22) {
return;
}
//Show the level of the Game
gameCount.innerHTML = counter + 1;
//Light and play user's input then check if input is correct
randIndexArr.slice(0, counter + 1).reduce(function(promise, div, index) {
return promise.then(function() {
lightenButton(div);
return new Promise(function(resolve, reject) {
setTimeout(function() {
resolve();
}, 1000);
})
})
}, Promise.resolve()).then(function() {
checkButton(randIndexArr, counter);
});
}
function lightenButton(id) {
var lightColorsArr = ["liteGreen", "liteRed", "liteYell", "liteBlue"];
soundArray[id].play();
buttonArray[id].classList.add(lightColorsArr[id]);
sleep(500).then(function() {
buttonArray[id].classList.remove(lightColorsArr[id])
});
}
});
#font-face {
font-family: myDirector;
src: url('https://raw.githubusercontent.com/Y-Taras/FreeCodeCamp/master/Simon/fonts/myDirector-Bold.otf');
}
body {
background-color: #5f5f5f;
}
#outerCircle {
display: flex;
flex-wrap: wrap;
margin: 0 auto;
width: 560px;
border: 2px dotted grey;
position: relative;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.bigButton {
height: 250px;
width: 250px;
border: solid #464646;
transition: all 1s;
-webkit-transition: all 1s;
-moz-transition: all 1s;
-o-transition: background-color 0.5s ease;
}
#greenButton {
background-color: rgb(9, 174, 37);
border-radius: 100% 0 0 0;
border-width: 20px 10px 10px 20px;
}
.liteGreen#greenButton {
background-color: #86f999;
}
#redButton {
background-color: rgb(174, 9, 15);
border-radius: 0 100% 0 0;
border-width: 20px 20px 10px 10px;
}
.liteRed#redButton {
background-color: #f9868a;
}
#yellowButton {
background-color: rgb(174, 174, 9);
border-radius: 0 0 0 100%;
border-width: 10px 10px 20px 20px;
}
.liteYell#yellowButton {
background-color: #f9f986;
}
#blueButton {
background-color: rgb(9, 37, 174);
border-radius: 0 0 100% 0;
border-width: 10px 20px 20px 10px;
}
.liteBlue#blueButton {
background-color: #8699f9;
}
div#innerCircle {
border: 15px solid #464646;
border-radius: 50%;
position: absolute;
top: 25%;
right: 25%;
background-color: #c4c7ce;
}
div.additionalBorder {
margin: 4px;
border-radius: 50%;
height: 242px;
width: 242px;
overflow: hidden;
}
p#tradeMark {
margin: auto;
height: 104px;
text-align: center;
font-size: 68px;
font-family: myDirector;
color: #c4c7ce;
background-color: black;
border-color: antiquewhite;
line-height: 162px;
}
span#reg {
font-size: 12px;
}
.partition {
height: 6px;
}
.buttons {
height: 128px;
border-radius: 0 0 128px 128px;
border: 2px solid black;
}
/* Start and Strict buttons*/
table {
margin-left: 5px;
}
td {
text-align: center;
width: auto;
padding: 2px 10px;
vertical-align: bottom;
}
div.innerCount {
width: 54px;
height: 40px;
background-color: #34000e;
color: crimson;
border-radius: 11px;
font-size: 28px;
line-height: 42px;
text-align: center;
font-family: 'Segment7Standard', italic;
}
button#innerStart {
width: 27px;
height: 27px;
border: 4px solid #404241;
border-radius: 50%;
background: #a50005;
box-shadow: 0 0 3px gray;
cursor: pointer;
}
div.strict {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
button#strictButton {
width: 27px;
height: 27px;
border: 4px solid #404241;
border-radius: 50%;
background: yellow;
box-shadow: 0 0 3px gray;
cursor: pointer;
}
div#strictIndicator {
width: 6px;
height: 6px;
margin-bottom: 2px;
background-color: #850000;
border-radius: 50%;
border: 1px solid #5f5f5f;
}
#switcher {
display: flex;
justify-content: center;
align-items: center;
}
.labels {
font-family: 'Roboto', sans-serif;
margin: 4px;
}
/* toggle switch */
.checkbox > input[type=checkbox] {
visibility: hidden;
}
.checkbox {
display: inline-block;
position: relative;
width: 60px;
height: 30px;
border: 2px solid #424242;
}
.checkbox > label {
position: absolute;
width: 30px;
height: 26px;
top: 2px;
right: 2px;
background-color: #a50005;
cursor: pointer;
}
.checkbox > input[type=checkbox]:checked + label {
right: 28px;
}
<div id="outerCircle">
<div class="bigButton" id="greenButton" data-sound="0">
<audio src="https://s3.amazonaws.com/freecodecamp/simonSound1.mp3"></audio>
</div>
<div class="bigButton" id="redButton" data-sound="1">
<audio src="https://s3.amazonaws.com/freecodecamp/simonSound2.mp3"></audio>
</div>
<div class="bigButton" id="yellowButton" data-sound="2">
<audio src="https://s3.amazonaws.com/freecodecamp/simonSound3.mp3"></audio>
</div>
<div class="bigButton" id="blueButton" data-sound="3">
<audio src="https://s3.amazonaws.com/freecodecamp/simonSound4.mp3"></audio>
</div>
<div id="innerCircle">
<div class="additionalBorder">
<p id="tradeMark">simon<span id="reg">®</span>
</p>
<div class="partition"></div>
<div class="buttons">
<table>
<tr class="firstRow">
<td>
<div class="innerCount"></div>
</td>
<td>
<button type="button" id="innerStart"></button>
</td>
<td>
<div class="strict">
<div id="strictIndicator"></div>
<button type="button" id="strictButton"></button>
</div>
</td>
</tr>
<tr class="labels">
<td>
<div id="countLabel">COUNT</div>
</td>
<td>
<div id="startLabel">START</div>
</td>
<td>
<div id="strictLabel">STRICT</div>
</td>
</tr>
</table>
<div id="switcher">
<span class="labels">ON</span>
<div class="checkbox">
<input id="checkMe" type="checkbox">
<label for="checkMe"></label>
</div>
<span class="labels">OFF</span>
</div>
</div>
</div>
</div>
</div>

I didn't dig super deep into your code, but it looks like the crux of it is you're using setTimeout(), and that timeout may still be running when you restart.
What you need to do is store the return value of setTimeout() which is actually an id you can then pass to clearTimeout(), which will stop that timeout.
So, on your sleep() function, store the id:
function sleep(time) {
return new Promise(resolve => {
this.timeoutId = setTimeout(resolve, time)
});
}
And when you go to restart your game:
// ...
if (this.timeoutId) {
clearTimeout(this.timeoutId);
this.timeoutId = null;
}
//...
And then also just make sure you don't have any other code that will get more than two timeouts running at the same time (or you'll lose one of the ids).

jQuery animate position using calc as value (subtract px from percentage)

Bit of a confusing title but the question is can we take pixels away from a percentage inside .animate? I have created an example below.
$(document).ready(function() {
// Set the percentage off
loading();
});
function loading() {
var num = 0;
for (i = 0; i <= 100; i++) {
setTimeout(function() {
$('.follower').animate({
left: num + "%"
}, 40, "linear");
num++;
}, i * 50);
};
}
.track {
width: 90%;
height: 40px;
background: #999;
border-radius: 10px;
margin: 0 auto;
position: relative;
}
.follower {
width: 60px;
height: 20px;
border: 1px solid;
border-radius: 10px;
background: #222;
position: absolute;
top: 54px;
left: 100%;
}
.follower:after {
content: "";
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 8px solid #222;
position: absolute;
top: -8px;
left: 0;
right: 0;
margin: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="track">
<div class="follower"></div>
</div>
You can see .follower is working as intended but I need that little point above it to start where .track starts and to finish where .track ends.
So I have to take half of .follower width of the percentage it has moved in the jQuery but I cannot find a way to do this. I have looked around and there are ways using .css etc but nothing when using .animate.
How how we take pixels from a percentage in jQuery when using .animate?

Nice answer from #chipChocolate.py ....
Now to add just to your code the only thing you need is substract the width of the follower:
$(document).ready(function() {
// Set the percentage off
loading();
});
function loading() {
//Create a var to set the value percentage to dismiss
var rest = ($('.follower').width()*100) / $('.track').width(),
//Then rest it from the initial value
num = 0 - (rest/2);
console.log(rest);
for (i = 0; i <= 100; i++) {
setTimeout(function() {
$('.follower').animate({
left: num + "%"
}, 40, "linear");
num++;
}, i * 50);
};
}
.track {
width: 90%;
height: 40px;
background: #999;
border-radius: 10px;
margin: 0 auto;
position: relative;
}
.follower {
width: 60px;
height: 20px;
border: 1px solid;
border-radius: 10px;
background: #222;
position: absolute;
top: 54px;
left: 0;
}
.follower:after {
content: "";
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 8px solid #222;
position: absolute;
top: -8px;
left: 0;
right: 0;
margin: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="track">
<div class="follower"></div>
</div>

Instead of using a for loop and a setTimeout(), you could simply use a setInterval.
Using .offsetWidth you could get the width of .track in pixels, subtract .follower's width from it and animate to the new value.
var follower = document.getElementsByClassName('follower')[0];
var track = document.getElementsByClassName('track')[0];
var tW;
var num = 0;
var percentage = 50;
function loading() {
var num = 0;
tW = (percentage * (track.offsetWidth - follower.offsetWidth)) / 100;
var anim = setInterval(function() {
follower.style.left = num++ + 'px';
if (num > tW) {
clearInterval(anim);
}
}, 10);
}
function resizeHandler() {
tW = (percentage * (track.offsetWidth - follower.offsetWidth)) / 100;
follower.style.left = tW + 'px';
}
window.onresize = resizeHandler;
loading()
.track {
width: 90%;
height: 40px;
background: #999;
border-radius: 10px;
margin: 0 auto;
position: relative;
}
.follower {
width: 60px;
height: 20px;
border: 1px solid;
border-radius: 10px;
background: #222;
position: absolute;
top: 54px;
left: 100%;
}
.follower:after {
content: "";
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 8px solid #222;
position: absolute;
top: -8px;
left: 0;
right: 0;
margin: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="track">
<div class="follower"></div>
</div>

We Keep Coding

JavaScript is the programming language of the Web.

Play sound if div pass a offset while in animation? - javascript

Related

How to make a toggle onclick to hide and show video player's UI?

CSS, express and bootstrap : overflow and margin error

Increase z-index on custom controls when video is fullscreen

Restart Simon Game in javascript

jQuery animate position using calc as value (subtract px from percentage)

Categories

Resources