I am making a styled HTML version of the typical JS 'alert()' box.
It is simply a nice that uses 'display: none;' and 'display: block;' to toggle the box.
However, this doesn't have the functionality of a JS 'alert()' box, as doing
for(var c = 0; c < 10; c++){ //like the joke? (c++)
cool.alert('You have seen '+c+' alerts');
}
will not create 10 successive alert boxes, but make the box's display 'block' 10 times.
Is there any way to pause the document until the alert box is closed so that the loop would be paused?
Here's all the relevant code:
<button onclick="cool.alert('Hi')">Alert box</button><div id='block'></div>
<div id='box'>
<p id='text'></p><hr id='hr'>
<div id='Ok' onclick='cool.alertclear()'>Ok</div>
</div>
<script>
var cover = document.getElementById('block');
var box = document.getElementById('box');
var text = document.getElementById('text');
var ok = document.getElementById('Ok');
var hr = document.getElementById('hr');
var cool = {
alert: function(input){
cover.style.display = 'block';
box.style.display = 'block';
ok.style.display = 'block';
text.innerHTML = input;
},
alertclear: function(){
cover.style.display = 'none';
box.style.display = 'none';
ok.style.display = 'none';
}
}
</script>
<style>
#block{
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: rgba(0,0,0,0.6);
display: none;
z-index: 100;
}
#box{
position: absolute;
top: 25%;
left: 35%;
height: 30%;
width: 30%;
border-radius: 10px;
background: rgba(255,255,255,0.8);
box-shadow: 0 0 50px rgba(0,0,0,0.2);
display: none;
z-index: 101;
color: #000;
padding: 10px;
cursor: default;
}
#text{
height: 60%;
word-break: break-all;
overflow-x: hidden;
overflow-y: auto;
}
#Yes{
position: absolute;
bottom: 5%;
right: 25%;
height: 15%;
width: 18%;
border-radius: 5px;
background: linear-gradient(left top, #00FF00, #00DD00);
background: -webkit-linear-gradient(left top, #00FF00, #00DD00);
cursor: hand;
text-align: center;
font-size: 1.5em;
color: white;
display: none;
}
#No{
position: absolute;
bottom: 5%;
right: 5%;
height: 15%;
width: 18%;
border-radius: 5px;
background: linear-gradient(left top, #ff6c6c, #ff4e4e);
background: -webkit-linear-gradient(left top, #ff6c6c, #ff4e4e);
cursor: hand;
text-align: center;
font-size: 1.5em;
color: white;
display: none;
}
#Ok, #Go{
position: absolute;
bottom: 5%;
right: 5%;
height: 15%;
width: 18%;
border-radius: 5px;
background: grey;
cursor: hand;
text-align: center;
font-size: 1.5em;
color: white;
display: none;
}
#Prompt{
position: absolute;
top: 30%;
left: 5%;
height: 40%;
width: 90%;
resize: none;
overflow-x: hidden;
overflow-y: auto;
word-break: break-all;
display: none;
}
#hr{
position: relative;
bottom: 0%;
}
</style>
You could keep track of the alerts like this:
var inputArr = [];
var showing = false;
var cool = {
alert: function(input){
if(!showing) {
cool.show(input);
showing = true;
} else {
inputArr.push(input);
}
},
alertclear: function(){
cover.style.display = 'none';
box.style.display = 'none';
ok.style.display = 'none';
if(inputArr.length>0) {
input = inputArr.shift();
cool.show(input);
} else {
showing = false;
}
},
show: function(input) {
cover.style.display = 'block';
box.style.display = 'block';
ok.style.display = 'block';
text.innerHTML = input;
}
}
Related
I have a div which acts like a button when I press it. I add classes to change color and the circle inside moves to the right when is clicked. What I would like to do, is to call a function and then change a global variable inside the function and pass it back. I am also testing the code using the document.getElementById("test").innerHTML and the 12th changes to 13th and vise versa successfully. However, the variable flag13th does not change. It always has a false value.
Any ideas folks on this? I would appreciate your help. Thank you.
document.getElementById("toggleButton").addEventListener("click", dekatosTritos);
var flag13th = false;
function dekatosTritos() {
var ThirteenthSalary = document.getElementById("toggleButton").classList;
if ((ThirteenthSalary.contains("toggle-btn")) && (ThirteenthSalary.contains("active"))) {
flag13th = false;
document.getElementById("test").innerHTML = "12th";
} else {
flag13th = true;
document.getElementById("test").innerHTML = "13th";
}
}
document.getElementById("test11").innerHTML = flag13th;
.toggle-btn {
display: inline-block;
position: relative;
top: 8px;
width: 60px;
height: 28px;
background: gray;
border-radius: 30px;
}
.toggle-btn .inner-circle {
position: absolute;
left: 4px;
top: 4px;
width: 20px;
height: 20px;
background: #fff;
border-radius: 80%;
}
.toggle-btn.active {
background: #4F94CD;
}
.toggle-btn.active>.inner-circle {
margin-left: 32px;
}
<div class="Question_13th">13th Month Salary</div>
<div id="toggleButton" class="toggle-btn">
<div class="inner-circle"></div>
</div>
<p id="test">12th</p>
<p id="test11"> </p>
Here's an example that uses no JavaScript, but rather an input type checkbox that can be submitted with your form:
.toggler {
position: absolute;
overflow: hidden;
width: 1px;
height: 1px;
margin: -1px;
clip: rect(0 0 0 0);
opacity: 0;
}
.toggler-btn {
display: inline-block;
position: relative;
width: 60px;
height: 28px;
border-radius: 28px;
cursor: pointer;
background: gray;
transition: background 0.3s;
}
.toggler-btn:after {
content: "";
position: absolute;
left: 4px;
top: 4px;
width: 20px;
height: 20px;
background: #fff;
border-radius: 100%;
transition: transform 0.3s;
}
.toggler-label::after {
content: attr(data-label);
}
/* CHECKED STATES */
.toggler:checked ~ .toggler-btn {
background: #0bf;
}
.toggler:checked ~ .toggler-btn:after {
transform: translateX(30px);
}
.toggler:checked ~ .toggler-label::after {
content: attr(data-labelchecked);
}
<div class="Question_13th">13th Month Salary?</div>
<input class="toggler" type="checkbox" id="13th" name="13th">
<label class="toggler-btn" for="13th"></label>
<div class="toggler-label" data-label="12th" data-labelchecked="13th"></div>
Here's an example that uses JavaScript, classList.toggle() and bool = !bool to toggle a boolean
const EL_btn = document.querySelector("#toggleButton");
const EL_test = document.querySelector("#test");
let is13 = false;
function dekatosTritos() {
is13 = !is13; // Toggle boolean
EL_btn.classList.toggle('active', is13);
EL_test.innerHTML = is13 ? "13th" : "12th";
}
EL_btn.addEventListener("click", dekatosTritos); // Do on btn click
dekatosTritos(); // and on init.
.toggle-btn {
display: inline-block;
position: relative;
top: 8px;
width: 60px;
height: 28px;
background: gray;
border-radius: 30px;
}
.toggle-btn.active {
background: #4F94CD;
}
.toggle-btn .inner-circle {
position: absolute;
left: 4px;
top: 4px;
width: 20px;
height: 20px;
background: #fff;
border-radius: 80%;
}
.toggle-btn.active>.inner-circle {
margin-left: 32px;
}
<div class="Question_13th">13th Month Salary</div>
<div id="toggleButton" class="toggle-btn">
<div class="inner-circle"></div>
</div>
<p id="test"></p>
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')
After 500 milliseconds from the text inserted into the input text, I'm opening a div under the input text which contains a div with the inserted text on it. When inserted text is clicked it should console.log the text, but it is not able to do so because the onblur event occurs before the click. I want to keep my onblur event. But with the onblur event I can't make the div clickable. Please help
index.html:
var input_timeout = undefined;
document.getElementById("navigation").querySelector("INPUT").onkeyup = function () {
clearTimeout(input_timeout);
var val = this.value;
input_timeout = setTimeout(function () {
var to_add_to = document.querySelector("#navigation div");
to_add_to.innerHTML = "";
to_add_to.style.visibility = "visible";
var div_to_put = document.createElement("div");
div_to_put.style.visibility = "visible";
div_to_put.id = val;
div_to_put.innerHTML += "<font>" + val + "</font";
div_to_put.onclick = function () {
console.log(this.id);
}
to_add_to.appendChild(div_to_put);
}, 500);
}
document.getElementById("navigation").querySelector("INPUT").onblur = function () {
this.value = "";
document.querySelector("#navigation div").style.visibility = "hidden";
document.querySelector("#navigation div").innerHTML = "";
}
body {
margin: 0;
}
#navigation {
min-width: 620px;
background-color: silver;
width: 100%;
height: 50px;
position: fixed;
top: 0;
}
#navigation input {
height: 30px;
width: 200px;
font-size: 15px;
color: orange;
border: 1px solid orange;
border-radius: 5px;
display: block;
margin: 10px 5% 0% auto;
padding: 0px 28px 0px 5px;
float: right;
}
#navigation div {
width: 200px;
height: 50px;
position: absolute;
top: 41px;
right: 5%;
color: orange;
background-color: white;
border: 1px solid orange;
border-radius: 5px;
visibility: hidden;
}
#navigation div div {
width: 100%;
height: 30px;
text-align: center;
font-size: 25px;
color: orange;
border: 1px solid orange;
border-radius: 5px;
overflow: hidden;
position: absolute;
top: 0;
right: 0;
}
<html>
<head>
<meta charset="utf-8" />
<title>Page Title</title>
</head>
<body>
<div id="navigation">
<input type="text" name="Search">
<div></div>
</div>
</body>
</html>
Unlike the onclick event, the onmousedown event is fired before the onblur event:
var input_timeout = undefined;
document.getElementById("navigation").querySelector("INPUT").onkeyup = function () {
clearTimeout(input_timeout);
var val = this.value;
input_timeout = setTimeout(function () {
var to_add_to = document.querySelector("#navigation div");
to_add_to.innerHTML = "";
to_add_to.style.visibility = "visible";
var div_to_put = document.createElement("div");
div_to_put.style.visibility = "visible";
div_to_put.id = val;
div_to_put.innerHTML += "<font>" + val + "</font";
div_to_put.onmousedown = function () {
console.log(this.id);
}
to_add_to.appendChild(div_to_put);
}, 500);
}
document.getElementById("navigation").querySelector("INPUT").onblur = function () {
this.value = "";
document.querySelector("#navigation div").style.visibility = "hidden";
document.querySelector("#navigation div").innerHTML = "";
}
body {
margin: 0;
}
#navigation {
min-width: 620px;
background-color: silver;
width: 100%;
height: 50px;
position: fixed;
top: 0;
}
#navigation input {
height: 30px;
width: 200px;
font-size: 15px;
color: orange;
border: 1px solid orange;
border-radius: 5px;
display: block;
margin: 10px 5% 0% auto;
padding: 0px 28px 0px 5px;
float: right;
}
#navigation div {
width: 200px;
height: 50px;
position: absolute;
top: 41px;
right: 5%;
color: orange;
background-color: white;
border: 1px solid orange;
border-radius: 5px;
visibility: hidden;
}
#navigation div div {
width: 100%;
height: 30px;
text-align: center;
font-size: 25px;
color: orange;
border: 1px solid orange;
border-radius: 5px;
overflow: hidden;
position: absolute;
top: 0;
right: 0;
}
<html>
<head>
<meta charset="utf-8" />
<title>Page Title</title>
</head>
<body>
<div id="navigation">
<input type="text" name="Search">
<div></div>
</div>
</body>
</html>
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.
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");
}