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 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')

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");
}

How to centre <img> which has a z index?

I am having trouble centering an image, at the moment, it stays to the left. The concept is that when I click the image, the larger version of the image pops us.
HTML:
<div class="photoposition" style="cursor:pointer" onclick="showImage('imagesinsurgent/in21.jpg');">
<img src="imagesinsurgent/in21.jpg" class="scaledownlandscape"/>
<p class="photogalleryp"></p>
</div>
<div id="largeImgPanel" onclick="hideMe(this);">
<img id="largeImg" style="height: 100%; margin: 0; padding: 0;" />
</div>
CSS:
.photoposition{
width: 250px;
height: 250px;
margin-left: 53px;
float: left;
position: relative;
}
.scaledownlandscape{
width: 250px;
object-fit: scale-down;
display: block;
margin: 0 auto;
}
.divspan{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 1;
}
#largeImgPanel {
visibility: hidden;
position: fixed;
z-index: 100;
top: 0;
left: 0;
width: 500px;
height: 400px;
background-color: rgba(100,100,100, 0.5);
margin-top: 141px;
}
Javascript:
function showImage(imgName) {
document.getElementById('largeImg').src = imgName;
showLargeImagePanel();
unselectAll();
}
function showLargeImagePanel() {
document.getElementById('largeImgPanel').style.visibility = 'visible';
}
function unselectAll() {
if(document.selection) document.selection.empty();
if(window.getSelection) window.getSelection().removeAllRanges();
}
function hideMe(obj) {
obj.style.visibility = 'hidden';
}

Give #largeImgPanel 100% width and center align the content
#largeImgPanel {
visibility: hidden;
position: fixed;
z-index: 100;
top: 0;
left: 0;
right: 0;
width: 500px;
height: 400px;
background-color: rgba(100,100,100, 0.5);
margin-top: 141px;
text-align: center;
}
DEMO

Menu error caused by HTML or JS?

Im trying to get the menu to be horizontal and then the flags to be shown below the menu when you press the flag-name.
When doing changes to the menu in my code, which of my files should I be editing?
The flags location is correct right now, but the menu is missplaced.
What can be done to get the menu to be horizontal instead of a list?
JSFiddle: http://jsfiddle.net/528k9z8m/
HTML:
<body>
<h1>Kmom03 sandboxen</h1>
<div id="content">
<div id="menu">
<ul>
<li> Elfenbenskusten
<div id="flag-elfenbenskusten"></div>
</li>
<li> Sverige
<div id="flag-sverige"></div>
</li>
<li> Maruritius
<div id="flag-maruritius"></div>
</li>
<li> Japan
<div id="flag-japan"></div>
</li>
</ul>
</div>
</div>
<script type="text/javascript" src="js/main.js"></script>
CSS
body {
}
h1 {
text-align: center;
}
h3 {
color: green;
}
#menu {
width: 500px;
height: 50px;
border: 1px solid black;
}
#content {
border: 1px solid black;
background-color: #eee;
padding: 4em;
margin: 0 auto;
height: 800px;
width: 800px;
border-radius: 30px;
}
.flagga1 {
position: relative;
width: 800px;
height: 500px;
}
.sverige {
background-color: #FECC00;
}
.sverige .box1 {
position: absolute;
width: 250px;
height: 200px;
background-color: #006AA7;
}
.sverige .box2 {
position: absolute;
bottom: 0;
left: 0;
width: 250px;
height: 200px;
background-color: #006AA7;
}
.sverige .box3 {
position: absolute;
top: 0;
right: 0;
width: 425px;
height: 200px;
background-color: #006AA7;
}
.sverige .box4 {
position: absolute;
bottom: 0;
right: 0;
width: 425px;
height: 200px;
background-color: #006AA7;
}
.flag {
position: relative;
width: 300px;
height: 200px;
}
.elfenbenskusten {
background-color: #fff;
}
.elfenbenskusten .part1 {
width: 100px;
height: 200px;
background-color: #F77F00;
}
.elfenbenskusten .part2 {
position: absolute;
top: 0;
left: 200px;
width: 100px;
height: 200px;
background-color: #009e60;
}
.flagga2 {
position: relative;
width: 300px;
height: 200px;
}
.maruritius {
background-color: #EEE;
}
.maruritius .box1 {
position: absolute;
top: 0;
width: 300px;
height: 50px;
background-color: #EA2839;
}
.maruritius .box2 {
position: absolute;
top: 50px;
left: 0;
width: 300px;
height: 50px;
background-color: #1A206D;
}
.maruritius .box3 {
position: absolute;
top: 100px;
width: 300px;
height: 50px;
background-color: #FFD500;
}
.maruritius .box4 {
position: absolute;
bottom: 0;
right: 0;
width: 300px;
height: 50px;
background-color: #00A551;
}
.maruritius .box5 {
position: absolute;
bottom: 0;
right: 0;
background-color: #006AA7;
}
.flagga3 {
position: relative;
height: 200px;
width: 300px;
border-style: solid;
border-width: 1px;
border-color: black;
}
.japan .box1 {
background-color: #FFFFFF;
}
.japan .cirkel1 {
border-radius: 50%;
position: absolute;
top: 40px;
left: 90px;
width: 125px;
height: 125px;
background-color: #BC002D;
}
JS:
(function () {
'use strict';
//var myContent = document.getElementById('content');
//elfenbenskusten
var flagTarget = document.getElementById('flag-elfenbenskusten');
var flagLink = document.getElementById('draw-elfenbenskusten');
function drawFlagElfenbenskusten() {
var flagElfenbenskusten = '<div class="flag elfenbenskusten"><div class="part1"></div><div class="part2"></div></div>'
flagTarget.innerHTML = flagElfenbenskusten;
}
flagLink.addEventListener("click", function () {
console.log("event for clicking link elfenbenskusten.")
drawFlagElfenbenskusten();
});
//sverige
var flagTargetSverige = document.getElementById('flag-sverige');
var flagLinkSverige = document.getElementById('draw-sverige');
function drawFlagSverige() {
var flagSverige = '<div class="flagga1 sverige"><div class="box1"></div><div class="box2"></div><div class="box3"></div><div class="box4"></div></div>'
flagTarget.innerHTML = flagSverige;
}
flagLinkSverige.addEventListener("click", function () {
console.log("event for clicking link elfenbenskusten.")
drawFlagSverige();
});
//maruritius
var flagTargetMaruritius = document.getElementById('flag-maruritius');
var flagLinkMaruritius = document.getElementById('draw-maruritius');
function drawFlagMaruritius() {
var flagMaruritius = '<div class="flagga2 maruritius"><div class="box1"></div><div class="box2"></div><div class="box3"></div><div class="box4"></div><div class="box5"></div></div>'
flagTarget.innerHTML = flagMaruritius;
}
flagLinkMaruritius.addEventListener("click", function () {
console.log("event for clicking link elfenbenskusten.")
drawFlagMaruritius();
});
//japan
var flagTargetJapan = document.getElementById('flag-japan');
var flagLinkJapan = document.getElementById('draw-japan');
function drawFlagJapan() {
var flagJapan = '<div class="flagga3 japan"><div class="box1"></div><div class="cirkel1"></div></div>'
flagTarget.innerHTML = flagJapan;
}
flagLinkJapan.addEventListener("click", function () {
console.log("event for clicking link elfenbenskusten.")
drawFlagJapan();
});
})();

#menu li {
list-style-type: none;
float: left;
margin-right: 10px;
position: relative;
}
#menu ul li>div {
position: absolute;
top: 20px;
}
Fiddle
Guess it's what you want to achieve

you have to edit the css, try this:
ul {
float: left;
width: 100%;
}
a {
float: left;
width: 6em;
text-decoration: none;
padding: 0.2em 0.6em;
}
li {
display: inline;
}