I'm working on a custom video player using the HTML5 video element and I'm having trouble getting the full screen button to work with the Fullscreen API.
When I click it, I get the error message:
Failed to execute 'requestFullscreen' on 'Element': API can only be initiated by a user gesture.
However, I am initiating the call to requestFullscreen with a user gesture... Unless I'm misunderstanding what constitutes a user gesture. A click on an element is a user gesture, isn't it?
I realize that there are a lot of questions about the Fullscreen API on SO, but it looks like many people want to initiate full screen mode without user interaction.
What am I doing wrong?
There is a pen with this code, but I'm likely to change that when I find a solution. I won't change the code here.
Here's the code:
/* Get our elements. */
const player = document.querySelector('.player');
const video = player.querySelector('.viewer');
const progress = player.querySelector('.progress');
const progressBar = player.querySelector('.progress__filled');
const toggle = player.querySelector('.toggle');
const skipButtons = player.querySelectorAll('[data-skip]');
const ranges = player.querySelectorAll('.player__slider');
const fullscreen = player.querySelector('.fullscreen');
let isFullScreen = false;
/* Build our functions */
function togglePlay() {
const action = video.paused ? 'play' : 'pause';
video[action]();
}
function updatePlayIcon() {
toggle.classList.toggle('playing');
}
function skip() {
video.currentTime += parseFloat(this.dataset.skip);
}
function handleRangeUpdate() {
video[this.name] = this.value;
}
function handleProgress() {
const percent = (video.currentTime / video.duration) * 100;
progressBar.style.flexBasis = percent + '%';
}
function scrub(e) {
const seconds = (e.offsetX / progress.offsetWidth) * video.duration;
video.currentTime = seconds;
}
function toggleFullScreen() {
if (isFullScreen) {
console.log("exiting fullscreen");
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
console.log('removing fullscreen class');
player.classList.remove('fullscreen');
} else {
console.log("entering fullscreen");
if (player.requestFullscreen) {
console.log('requestFullScreen');
player.requestFullscreen(); // standard
} else if (player.webkitRequestFullscreen) {
console.log('webkitRequestFullscreen');
player.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
} else if (player.mozRequestFullScreen) {
console.log('mozRequestFullScreen');
player.mozRequestFullScreen();
} else if (player.msRequestFullscreen) {
console.log('msRequestFullscreen');
player.msRequestFullscreen();
} else {
console.error('Unable to find a fullscreen request method');
}
console.log('adding fullscreen class');
player.classList.add('fullscreen');
}
isFullScreen = !isFullScreen;
}
/* Hook up the event listeners */
video.addEventListener('click', togglePlay);
toggle.addEventListener('click', togglePlay);
video.addEventListener('play', updatePlayIcon);
video.addEventListener('pause', updatePlayIcon);
video.addEventListener('timeupdate', handleProgress);
skipButtons.forEach(button => button.addEventListener('click', skip));
ranges.forEach(range => range.addEventListener('change', handleRangeUpdate));
ranges.forEach(range => range.addEventListener('mousemove', handleRangeUpdate));
let mousedown = false;
progress.addEventListener('click', scrub);
progress.addEventListener('mousemove', (e) => mousedown && scrub(e));
progress.addEventListener('mousedown', () => mousedown = true);
progress.addEventListener('mouseup', () => mousedown = false);
fullscreen.addEventListener('click', toggleFullScreen);
document.addEventListener('fullscreenchange', toggleFullScreen);
document.addEventListener('mozfullscreenchange', toggleFullScreen);
document.addEventListener('webkitfullscreenchange', toggleFullScreen);
document.addEventListener('msfullscreenchange', toggleFullScreen);
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
html, body {
height: 100%;
}
body {
margin: 0;
display: flex;
background: #7A419B;
background: linear-gradient(135deg, #7c1599 0%, #921099 48%, #7e4ae8 100%);
background-size: cover;
align-items: center;
justify-content: center;
}
.player {
max-width: 750px;
max-height: 100%;
border: 5px solid rgba(0, 0, 0, 0.2);
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
position: relative;
font-size: 0;
overflow: hidden;
}
button.toggle.fullscreen::before {
font-family: "FontAwesome";
content: "\f065";
}
.player.fullscreen .player__controls .toggle.fullscreen::before {
content: "\f066";
}
/* This css is only applied when fullscreen is active. */
.player.fullscreen {
max-width: none;
max-height: none;
width: 100%;
height: 100%;
background-color: black;
}
.player.fullscreen video {
width: 100%;
}
.player__video {
max-width: 100%;
max-height: 100%;
}
.player__button {
background: none;
border: 0;
line-height: 1;
color: white;
text-align: center;
outline: 0;
padding: 0;
cursor: pointer;
max-width: 50px;
}
.player__button:focus {
border-color: #ffc600;
}
.toggle::before {
font-family: "FontAwesome";
content: "\f04b";
}
.toggle.playing::before {
font-family: "FontAwesome";
content: "\f04c";
}
.player__slider {
width: 10px;
height: 30px;
}
.player__controls {
display: flex;
position: absolute;
bottom: 0;
width: 100%;
transform: translateY(100%) translateY(-5px);
transition: all .3s;
flex-wrap: wrap;
background: rgba(0, 0, 0, 0.1);
}
.player:hover .player__controls {
transform: translateY(0);
}
.player:hover .progress {
height: 15px;
}
.player__controls > * {
flex: 1;
}
.progress {
flex: 10;
position: relative;
display: flex;
flex-basis: 100%;
height: 5px;
transition: height 0.3s;
background: rgba(0, 0, 0, 0.5);
cursor: ew-resize;
}
.progress__filled {
width: 50%;
background: #ffc600;
flex: 0;
flex-basis: 0%;
}
.player__slider {
position: relative;
}
.player__slider::after {
content: attr(name);
position: absolute;
top: -2px;
text-shadow: 1px 1px 1px 0 rgba(0,0,0,0.5);
font-size: 0.8em;
}
/* unholy css to style input type="range" */
input[type=range] {
-webkit-appearance: none;
background: transparent;
width: 100%;
margin: 0 5px;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 8.4px;
cursor: pointer;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0), 0 0 1px rgba(13, 13, 13, 0);
background: rgba(255, 255, 255, 0.8);
border-radius: 1.3px;
border: 0.2px solid rgba(1, 1, 1, 0);
}
input[type=range]::-webkit-slider-thumb {
box-shadow: 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(13, 13, 13, 0);
height: 15px;
width: 15px;
border-radius: 50px;
background: #ffc600;
cursor: pointer;
-webkit-appearance: none;
margin-top: -3.5px;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
}
input[type=range]:focus::-wefbkit-slider-runnable-track {
background: #bada55;
}
input[type=range]::-moz-range-track {
width: 100%;
height: 8.4px;
cursor: pointer;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0), 0 0 1px rgba(13, 13, 13, 0);
background: #ffffff;
border-radius: 1.3px;
border: 0.2px solid rgba(1, 1, 1, 0);
}
input[type=range]::-moz-range-thumb {
box-shadow: 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(13, 13, 13, 0);
height: 15px;
width: 15px;
border-radius: 50px;
background: #ffc600;
cursor: pointer;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="player">
<video class="player__video viewer" src="https://player.vimeo.com/external/194837908.sd.mp4?s=c350076905b78c67f74d7ee39fdb4fef01d12420&profile_id=164"></video>
<div class="player__controls">
<div class="progress">
<div class="progress__filled"></div>
</div>
<button class="player__button toggle" title="Toggle Play"></button>
<input type="range" name="volume" class="player__slider" min="0" max="1" step="0.05" value="1">
<input type="range" name="playbackRate" class="player__slider" min="0.5" max="2" step="0.1" value="1">
<button data-skip="-10" class="player__button"><i class="fa fa-step-backward"></i> 10s</button>
<button data-skip="25" class="player__button">25s <i class="fa fa-step-forward"></i></button>
<button class="player__button toggle fullscreen"></button>
</div>
</div>
The problem was that my toggleFullScreen function was being called twice when I clicked on the full screen button. I saw it while I was replying to Bibek Khadka's answer. The first time was when I clicked the button and the second time was when the full-screen mode actually changed because of these event listeners...
document.addEventListener('fullscreenchange', toggleFullScreen);
document.addEventListener('mozfullscreenchange', toggleFullScreen);
document.addEventListener('webkitfullscreenchange', toggleFullScreen);
document.addEventListener('msfullscreenchange', toggleFullScreen);
It would go to fullscreen mode, then back so quick that I didn't see the change. I believe the second time called the Fullscreen API method (technically) without a user gesture and that's why I got the error message.
The solution (for now at least) is to create a separate function for changing classes and the variable I'm using to track whether or not I'm in full screen mode ...
function toggleFullScreenClasses() {
player.classList.toggle('fullscreen');
isFullScreen = !isFullScreen;
}
... then I don't use that to handle the click on the button. I only use it to handle the actual fullscreenchange event...
document.addEventListener('fullscreenchange', toggleFullScreenClasses);
document.addEventListener('mozfullscreenchange', toggleFullScreenClasses);
document.addEventListener('webkitfullscreenchange', toggleFullScreenClasses);
document.addEventListener('msfullscreenchange', toggleFullScreenClasses);
I know this is sloppy, but it solves the problem for now. I previously tried using the :fullscreen pseudo-class, but I had some difficulty and I switched to the more familiar method of toggling classes and variables. I need to take another look at that.
I am no expert...just someone with free time :)
your const player = document.querySelector('.player'); is an element and trying to player.requestFullscreen(); gives you the errror. Modify your code so that the api call is made from something like player.onclick().requestFullscreen(); maybe. Sorry if I wasn't that helpful.
Related
I have a function that turns an array into modal window links as a template literal.
The code that creates the links works fine outside of the function
But once it gets rendered in the function it no longer works. I can't find any errors, but it does NOT work.
However, if I copy the HTML that the function renders and save that as actual HTML, that works fine on its own.
A good chunk of the JavaScript portion of the code is posted below. A full version is on Codepen.
There are two sections in the example on Codepen:
The first section has the code as it's rendered by the function.
The second section is copied from the Elements tab in Developer Tools and saved as actual HTML.
"use strict";
const modalBtns = document.querySelectorAll(".modal-button");
const modalWin = document.querySelector(".modal-window");
const closeBtn = document.querySelector(".close-modal");
const modal_iframe = document.getElementById("modal_iframe");
modalBtns.forEach((item) => {
item.addEventListener("click", function (e) {
let modal = e.currentTarget;
if (modal.dataset.target) {
let modalID = modal.dataset.target;
document.getElementById(modalID).style.display = "block";
}
if (modal.dataset.iframe) {
modal_iframe.src = modal.dataset.iframe;
document
.querySelector(".button-footer")
.addEventListener("click", function () {
window.open(modal.dataset.iframe, "_blank");
});
}
if (modal.dataset.header) {
document.querySelector(
".modal-header"
).innerHTML = `<h1>${modal.dataset.header}</h1>`;
}
if (modal.dataset.dimensions) {
document
.querySelector(".modal-window")
.setAttribute("style", modal.dataset.dimensions);
}
function loadIframe() {
let frame = document.getElementById("modal_window");
frame.style.height =
frame.contentWindow.document.body.scrollHeight + "px";
}
if (document.querySelector("#modal_window")) {
setTimeout(function () {
loadIframe;
}, 2000);
}
if (modal.dataset.reload && modal.dataset.reload === "1") {
document
.querySelector(".close-modal")
.addEventListener("click", function (e) {
console.log("parent.location.reload() pending...");
parent.location.reload();
});
}
/*======= All EventListeners Below Close Modal ================*/
closeBtn.addEventListener("click", function (e) {
document.querySelector(".modal-background").style.display = "none";
});
window.addEventListener("click", function (e) {
if (e.currentTarget === document.querySelector(".modal-background")) {
document.querySelector(".modal-background").style.display = "none";
}
});
document.body.addEventListener("keydown", (e) => {
if (e.key === "Escape") {
document.querySelector(".modal-background").style.display = "none";
}
});
});
});
const main = document.querySelector("main");
const modal_links = [
{
link: "https://notation.netcentrx.net/staff/",
header: "Musical Staff",
thb: "notation",
w_h: "min-width:60vw;max-width:600px;height:650px",
reload: 0
},
{
link: "https://wsl.netcentrx.net/",
header: "WSL Commands",
thb: "wsl",
w_h: "min-width:60vw;max-width:600px;height:650px",
reload: 0
}
];
let modalLink = "";
function createModalLinks(
link,
modalID,
header,
img,
w_h = "width:90vw;height:600px",
reload = "0"
) {
modalLink = `
<a href="javascript:void(0)" class="modal-button" onclick="console.log('onclick handler:${link}');" data-header="${header}" data-target="${modalID}" data-iframe="${link}" data-dimensions="${w_h};margin-top:20px" data-reload="${reload}">
<img src="https://resume.netcentrx.net/examples/${img}.jpg" title="${img}" width="50">
</a>
`;
return modalLink;
}
let theLinks = "";
modal_links.forEach((item) => {
theLinks += createModalLinks(
item.link,
"modal_window",
item.header,
item.thb,
item.w_h,
item.reload
);
});
main.innerHTML = theLinks;
My apologies in advance for it not being stripped down to just the bare minimum. But in order to replicate the problem, it required more code than it probably should have had. I've been reworking this for the better part of a day without any insight as to what the real problem is. I've been creating functions using template literals just like this for years now, usually with a high success rate. Whatever the problem is, I need to know so I can get past it. The only anomaly that I spotted is that–in the version on Codepen–the only thing that doesn't work in that version is once the modal is displayed clicking on the background does not dismiss the modal like it does elsewhere. If that's significant as to what the problem may be, I'm not sure what the connection is.
Usually when I take the time to painstakingly write everything out like this I typically either spot the problem or figure out an alternative solution so there's no need to actually post a question, but this does not appear to be one of those times. As always, your help is very much appreciated!
The issue appears to just be timing. Your code is executed in order, and the first part gets all of the modal buttons on the page and sets the appropriate event listeners. Then the second part of your code adds 2 modal buttons, which were not present earlier.
By simply wrapping the first part of your code in a function and calling it later (or swapping the order of those two parts of code), everything works as expected.
"use strict";
const _InitModal = () => {
const modalBtns = document.querySelectorAll(".modal-button");
const modalWin = document.querySelector(".modal-window");
const closeBtn = document.querySelector(".close-modal");
const modal_iframe = document.getElementById("modal_iframe");
modalBtns.forEach((item) => {
item.addEventListener("click", function (e) {
console.log("e.currentTarget = " + e.currentTarget);
let modal = e.currentTarget;
console.log("modal = " + modal);
if (modal.dataset.target) {
let modalID = modal.dataset.target;
console.log("modal.dataset.target = " + modal.dataset.target);
document.getElementById(modalID).style.display = "block";
}
if (modal.dataset.iframe) {
modal_iframe.src = modal.dataset.iframe;
document
.querySelector(".button-footer")
.addEventListener("click", function () {
window.open(modal.dataset.iframe, "_blank");
});
}
if (modal.dataset.header) {
document.querySelector(
".modal-header"
).innerHTML = `<h1>${modal.dataset.header}</h1>`;
console.log(`modal.dataset.header = ${modal.dataset.header}`);
}
if (modal.dataset.dimensions) {
document
.querySelector(".modal-window")
.setAttribute("style", modal.dataset.dimensions);
}
function loadIframe() {
let frame = document.getElementById("modal_window");
frame.style.height =
frame.contentWindow.document.body.scrollHeight + "px";
}
if (document.querySelector("#modal_window")) {
setTimeout(function () {
loadIframe;
}, 2000);
}
// e.preventDefault();
if (modal.dataset.reload && modal.dataset.reload === "1") {
document
.querySelector(".close-modal")
.addEventListener("click", function (e) {
console.log("parent.location.reload() pending...");
parent.location.reload();
});
}
/*======= All EventListeners Below Close Modal ================*/
closeBtn.addEventListener("click", function (e) {
document.querySelector(".modal-background").style.display = "none";
});
window.addEventListener("click", function (e) {
console.log("e.currentTarget = " + e.currentTarget);
if (e.currentTarget === document.querySelector(".modal-background")) {
document.querySelector(".modal-background").style.display = "none";
}
});
document.body.addEventListener("keydown", (e) => {
if (e.key === "Escape") {
console.log("e=" + e);
document.querySelector(".modal-background").style.display = "none";
}
});
});
});
}
const main = document.querySelector("main");
const modal_links = [
{
link: "https://notation.netcentrx.net/staff/",
header: "Musical Staff",
thb: "notation",
w_h: "min-width:60vw;max-width:600px;height:650px",
reload: 0
},
{
link: "https://wsl.netcentrx.net/",
header: "WSL Commands",
thb: "wsl",
w_h: "min-width:60vw;max-width:600px;height:650px",
reload: 0
}
];
function createModalLinks(
link,
modalID,
header,
img,
w_h = "width:90vw;height:600px",
reload = "0"
) {
let modalLink = "";
modalLink = `
<a href="javascript:void(0)" class="modal-button" onclick="console.log('onclick handler:${link}');" data-header="${header}" data-target="${modalID}" data-iframe="${link}" data-dimensions="${w_h};margin-top:20px" data-reload="${reload}">
<img src="https://resume.netcentrx.net/examples/${img}.jpg" title="${img}" width="50">
</a>`;
return modalLink;
}
let theLinks = "";
modal_links.forEach((item) => {
theLinks += createModalLinks(
item.link,
"modal_window",
item.header,
item.thb,
item.w_h,
item.reload
);
});
main.innerHTML = theLinks;
_InitModal();
.modal-background {
font-family: sans-serif;
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
display: none;
overflow: auto;
background-color: rgba(0, 0, 0, 0.9);
z-index: 9999;
background: rgba(55, 55, 55, 0.6);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.modal-window {
position: relative;
background-color: #ffffff;
width: 50%;
margin: 10% auto;
border-radius: 0.5rem;
padding: 0.75rem;
border: 1px groove #ccc;
/* box-shadow: 1px 1px 1px #999, 2px 2px 2px #000; */
}
.close-modal:hover,
.close-modal:focus {
color: rgba(255, 255, 255, 1);
cursor: pointer;
background: red;
transition: 1s;
text-shadow: 1px 1px 1px #999, 2px 2px 2px #000;
}
button.close-modal {
position: absolute;
top: -0.75rem;
right: -0.75rem;
padding: 0.05rem 0.75rem;
background: #999;
color: #ccc;
border-radius: 50%;
border: none;
outline: none;
-webkit-transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
-webkit-animation-name: animatebottom;
-webkit-animation-duration: 1.5s;
animation-name: animatebottom;
animation-duration: 1.5s;
}
button.close-modal::before {
content: "\D7";
font-size: 2rem;
}
.modal-window {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.5s;
animation-name: animatetop;
animation-duration: 0.5s;
}
.modal-header {
height: 30px;
text-align: center;
width: 100%;
background: #fff;
padding: 0.2rem;
}
.modal-header h1 {
font-size: 1.1rem;
}
.modal-footer {
height: 20px;
text-align: center;
width: 100%;
background: #fff;
padding: 0.2rem;
}
.modal-content {
background-color: #fff;
height: calc(100% - 70px);
border-radius: 0.5rem;
border: 0.1rem groove #ddd;
overflow: hidden;
}
.button-footer {
background: #fff;
border-radius: 0.5rem;
border: 1px outset #aaa;
padding: 0.2rem;
color: #999;
transition: 1s;
cursor: pointer;
}
.button-footer:hover {
background: #fdfdfd;
color: #555;
border: 1px inset #ddd;
text-shadow: 0.05rem 0.05rem 0.05rem #ccc, 0.055rem 0.055rem 0.055rem #999,
0.06rem 0.06rem 0.06rem #333;
transition: 1s;
}
.close-btn:hover {
color: white;
background: #f00;
cursor: pointer;
}
#modal_iframe {
width: 100%;
height: 100%;
}
button.modal-button {
border-radius: 0.5rem;
border: 0px solid #aaa;
padding: 0;
cursor: pointer;
}
.modal-button-img {
border-radius: 0.5rem;
border: 0.1rem groove #444;
cursor: pointer;
}
.sepia:hover {
filter: sepia(150%);
}
/*
.none {
display: none;
}
*/
#-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;
}
}
#-webkit-keyframes animatebottom {
from {
top: 0;
opacity: 1;
}
to {
bottom: -300px;
opacity: 0;
}
}
#keyframes animatebottom {
from {
top: 0;
opacity: 1;
}
to {
bottom: -300px;
opacity: 0;
}
}
.container {
border-radius: 0.5rem;
border: 1px solid #aaa;
max-width: 800px;
width: 500px;
margin: 0 auto;
text-align: center;
font-family: sans-serif;
}
main,
aside {
font-family: sans-serif;
max-width: 800px;
width: 500px;
margin: 0 auto;
text-align: center;
}
h2 {
text-align: center;
font-family: sans-serif;
font-weight: normal;
font-size: 1.2rem;
}
span {
font-size: 75%;
background: #ffff0055;
}
<div id="modal_window" class="modal-background">
<div class="modal-window">
<button class="close-modal" data-dismiss="modal"></button>
<div class="modal-header"></div>
<div class="modal-content">
<iframe src="#" id="modal_iframe" frameborder="0">If you'd have had a real browser, I wouldn't be boring you with this now...</iframe>
</div>
<div class="modal-footer"><button class="button-footer">Open In New Tab</button></div>
</div>
</div>
<div class="container">
<h2><code>main</code> Content Rendered By JavaScript</h2>
<main>
Main
</main>
<span>working now</span>
</div>
In my application, there are multiple cards and left/right paddles. For normal browsing(safari,firefox,chrome) in desktop/laptop, that left/right paddles are visible while hovering over those cards. Inside those cards all the link/hyperlink are working fine in desktop/laptop
I am using #mouseover to show those paddles to scroll those cards. In ipad(touch devices), that problem occurs. Because hover effect is not working in touch devices.
Problem
Those paddles are visible only after first click because hovering is not working for touch devices.
So, i want to disable the hover for touch devices and show the paddles on first rendering. I have checked media queries but it is not working. I am not using jquery. So, how can i show those paddles on initial loading for touch device using vue js.
Code snippet
<div
v-show="grid"
class="second-row"
#mouseover="showPaddle"
#scroll.passive="setScrolledLeft"
>
<div class="paddles">
<button
v-if="showRightPaddle"
tabindex="-1"
class="right-paddle paddle"
#click="scrollCards('right')"
>
<i class="el-icon-arrow-right-fill" />
</button>
<button
v-if="showLeftPaddle"
tabindex="-1"
class="left-paddle paddle"
#click="scrollCards('left')"
>
<i class="el-icon-arrow-left-fill" />
</button>
</div>
....card details html
</div>
Method Code snippet to show Paddles
showPaddle() {
const secondRowEl = this.$el.querySelector('.second-row');
const gridWidth = this.$el.querySelector('.grid').clientWidth;
const scrollMax = gridWidth - secondRowEl.clientWidth;
if (gridWidth > secondRowEl.clientWidth) {
if (secondRowEl.scrollLeft > 0 && secondRowEl.scrollLeft < scrollMax) {
this.showLeftPaddle = true;
this.showRightPaddle = true;
} else if (secondRowEl.scrollLeft >= scrollMax) {
this.showLeftPaddle = true;
this.showRightPaddle = false;
} else if (secondRowEl.scrollLeft <= 0) {
this.showLeftPaddle = false;
this.showRightPaddle = true;
}
} else {
this.showLeftPaddle = false;
this.showRightPaddle = false;
}
}
Css style
.second-row {
margin: 0 auto;
padding: 0 0 0 4px;
overflow-y: hidden;
background: var(--gray40);
-ms-overflow-style: none;
&::-webkit-scrollbar {
display: none;
}
scrollbar-width: none;
&:hover,
&:focus {
.paddles {
display: block;
}
}
.paddles {
display: none;
.paddle {
border: none;
padding: 0;
height: 100px;
width: 50px;
cursor: pointer;
position: fixed;
margin-top: 33vh;
z-index: 10;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
text-align: center;
font-size: 2.5em;
color: #333333;
background-color: rgba(204, 204, 204, 0.5);
&:hover {
background-color: rgba(204, 204, 204, 0.65);
}
&:focus {
background-color: rgba(204, 204, 204, 0.8);
}
border-radius: 50px;
}
.left-paddle {
&.paddle {
> i {
margin-left: -10px;
font-size: 44px;
position: relative;
top: 2px;
}
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
}
.right-paddle {
right: 0;
&.paddle {
> i {
margin-right: -10px;
font-size: 44px;
position: relative;
top: 2px;
}
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
}
}
.hidden {
display: none;
}
.grid {
display: block;
&.product-grid {
position: relative;
height: calc(100vh - 194px);
margin-bottom: 0;
.item {
position: absolute;
width: rem(442);
padding-right: rem(8);
margin: 0;
&.highlight {
border: 1px solid #66afe9;
border-radius: rem(4);
outline: 0;
box-shadow: 0 1px 1px 4px rgba(102, 175, 233, 0.6),
0 0 2px rgba(102, 175, 233, 0.6);
-moz-box-shadow: 0 1px 1px 4px rgba(102, 175, 233, 0.6),
0 0 2px rgba(102, 175, 233, 0.6);
-webkit-box-shadow: 0 1px 1px 4px rgba(102, 175, 233, 0.6),
0 0 2px rgba(102, 175, 233, 0.6);
}
.app-card {
.app-card__header {
padding: 0.25rem 0.75rem;
i {
position: relative;
top: rem(3);
}
.app-card__title {
&:first-child {
margin-left: 0;
}
}
.app-card__expand-icon {
margin-right: 0;
margin-top: 0.5rem;
height: 1rem;
right: 0.75rem;
i {
position: static;
color: var(--gray70);
}
}
}
}
}
}
}
}
Can you help on this to disable hover effect for touch devices and show paddles on initial rendering?
Unfortunately no perfect solution to this problem yet exists, and is unlikely to exists in the future. “The Web is meant to be accessible to everyone, regardless of which browser or device they're using.” This implies all content should be visible, and serving different content based on device type is frowned upon by the W3C WAI
However there is a difference between changing the way content appears vs. completely hiding content from users if they’re viewing on different devices. Your scenario falls into the first category, which in my opinion is fine.
Touchscreen devices - smartphone or tablet - cannot support hover events. Rendering the page differently depending on which user agent (device) your site is viewed in is possible, and you have a couple of options. However in general, using the user agent to detect the browser looks simple, but doing it well is, in fact, a very hard problem. Of the two options detailed below, if I had to, I’d go for option 2.
Detect the user agent using javascript.
NOT recommended— read more about the issues here.
let hasTouchScreen = false;
if ("maxTouchPoints" in navigator) {
hasTouchScreen = navigator.maxTouchPoints > 0;
} else if ("msMaxTouchPoints" in navigator) {
hasTouchScreen = navigator.msMaxTouchPoints > 0;
} else {
let mQ = window.matchMedia && matchMedia("(pointer:coarse)");
if (mQ && mQ.media === "(pointer:coarse)") {
hasTouchScreen = !!mQ.matches;
} else if ('orientation' in window) {
hasTouchScreen = true; // deprecated, but good fallback
} else {
// Only as a last resort, fall back to user agent sniffing
var UA = navigator.userAgent;
hasTouchScreen = (
/\b(BlackBerry|webOS|iPhone|IEMobile)\b/i.test(UA) ||
/\b(Android|Windows Phone|iPad|iPod)\b/i.test(UA)
);
}
}
if (hasTouchScreen) {
// do some stuff on devices with smaller screens
}
Detect screen-size with javascript (CSS media queries are also an option, but you mention you’ve tried them already).
NOT recommended. The iPad Pro 12 has a resolution comparable to a desktop devices, for example.
if (window.innerWidth < 768) {
// do some stuff on devices with screens smaller than
// 768px wide
window.addEventListener("resize", function() {
/*refresh screen size dependent things*/
})
}
Looking at this codepen, most of it I grok. But a couple of things I don't understand:
How does the <code> element stay perfectly on top of the <textarea>? I would expect it to be below the textarea looking at the HTML code.
How is the cursor staying so well-aligned with the text such that it functions like the type of cursor in a word document? The cursor even aligns well with the text when I copy and paste the text. Is it the emmet dependency that's helping?
Here is the code:
HTML
<div class="editor-holder">
<ul class="toolbar">
<li><i class="fa fa-indent"></i></li>
<li><i class="fa fa-expand"></i></li>
</ul>
<div class="scroller">
<textarea class="editor allow-tabs"><div class="Editable Textarea">
<h1>This is a fully editable textarea which auto highlights syntax.</h1>
<p>Type or paste any code in here...</p>
<div>
<?php
var simple = "coding";
?>
<script>
with = "Tab or double space functionality";
</script></textarea>
<pre><code class="syntax-highight html"></code></pre>
</div>
</div>
(S)CSS
html, body{
margin: 0;
padding: 0;
height: 100%;
width: 100%;
position: relative;
background: rgb(114, 195, 195);
}
.editor-holder{
width: 800px;
height: 500px;
margin-top: 50px;
border-radius: 3px;
position: relative;
top: 0;
margin-left: -400px;
left: 50%;
background: #1f1f1f !important;
overflow: auto;
box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.4);
transition: all 0.5s ease-in-out;
&.fullscreen{
width: 100%;
height: 100%;
margin: 0;
left: 0;
}
.toolbar{
width: 100%;
list-style: none;
position: absolute;
top: -2px;
margin: 0;
left: 0;
z-index: 3;
padding: 8px;
background: #afafaf;
li{
display: inline-block;
}
a{
line-height: 20px;
background: rgba(144, 144, 144, 0.6);
color: grey;
box-shadow: inset -1px -1px 1px 0px rgba(0,0,0,0.28);
display: block;
border-radius: 3px;
cursor: pointer;
&:hover{
background: rgba(144, 144, 144, 0.8);
}
&.active{
background: rgba(144, 144, 144, 0.8);
box-shadow: none;
}
}
i{
color: #565656;
padding: 8px;
}
}
textarea, code{
width: 100%;
height: auto;
min-height: 450px;
font-size: 14px;
border: 0;
margin: 0;
top: 46px;
left: 0;
padding: 20px !important;
line-height: 21px;
position: absolute;
font-family: Consolas,Liberation Mono,Courier,monospace;
overflow: visible;
transition: all 0.5s ease-in-out;
}
textarea{
background: transparent !important;
z-index: 2;
height: auto;
resize: none;
color: #fff;
text-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
text-fill-color: transparent;
-webkit-text-fill-color: transparent;
&::-webkit-input-placeholder{
color: rgba(255, 255, 255, 1);
}
&:focus{
outline: 0;
border: 0;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
}
code{
z-index: 1;
}
}
pre {
white-space: pre-wrap;
white-space: -moz-pre-wrap;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
word-wrap: break-word;
code{
background: #1f1f1f !important;
color: #adadad;
.hljs {
color: #a9b7c6;
background: #282b2e;
display: block;
overflow-x: auto;
padding: 0.5em
}
.hljs-number,
.hljs-literal,
.hljs-symbol,
.hljs-bullet {
color: #6897BB
}
.hljs-keyword,
.hljs-selector-tag,
.hljs-deletion {
color: #cc7832
}
.hljs-variable,
.hljs-template-variable,
.hljs-link {
color: #629755
}
.hljs-comment,
.hljs-quote {
color: #808080
}
.hljs-meta {
color: #bbb529
}
.hljs-string,
.hljs-attribute,
.hljs-addition {
color: #6A8759
}
.hljs-section,
.hljs-title,
.hljs-type {
color: #ffc66d
}
.hljs-name,
.hljs-selector-id,
.hljs-selector-class {
color: #e8bf6a
}
.hljs-emphasis {
font-style: italic
}
.hljs-strong {
font-weight: bold
}
}
}
JavaScript
var tabCharacter = " ";
var tabOffset = 2;
$(document).on('click', '#indent', function(e){
e.preventDefault();
var self = $(this);
self.toggleClass('active');
if(self.hasClass('active'))
{
tabCharacter = "\t";
tabOffset = 1;
}
else
{
tabCharacter = " ";
tabOffset = 2;
}
})
$(document).on('click', '#fullscreen', function(e){
e.preventDefault();
var self = $(this);
self.toggleClass('active');
self.parents('.editor-holder').toggleClass('fullscreen');
});
/*------------------------------------------
Render existing code
------------------------------------------*/
$(document).on('ready', function(){
hightlightSyntax();
emmet.require('textarea').setup({
pretty_break: true,
use_tab: true
});
});
/*------------------------------------------
Capture text updates
------------------------------------------*/
$(document).on('ready load keyup keydown change', '.editor', function(){
correctTextareaHight(this);
hightlightSyntax();
});
/*------------------------------------------
Resize textarea based on content
------------------------------------------*/
function correctTextareaHight(element)
{
var self = $(element),
outerHeight = self.outerHeight(),
innerHeight = self.prop('scrollHeight'),
borderTop = parseFloat(self.css("borderTopWidth")),
borderBottom = parseFloat(self.css("borderBottomWidth")),
combinedScrollHeight = innerHeight + borderTop + borderBottom;
if(outerHeight < combinedScrollHeight )
{
self.height(combinedScrollHeight);
}
}
// function correctTextareaHight(element){
// while($(element).outerHeight() < element.scrollHeight + parseFloat($(element).css("borderTopWidth")) + parseFloat($(element).css("borderBottomWidth"))) {
// $(element).height($(element).height()+1);
// };
// }
/*------------------------------------------
Run syntax hightlighter
------------------------------------------*/
function hightlightSyntax(){
var me = $('.editor');
var content = me.val();
var codeHolder = $('code');
var escaped = escapeHtml(content);
codeHolder.html(escaped);
$('.syntax-highight').each(function(i, block) {
hljs.highlightBlock(block);
});
}
/*------------------------------------------
String html characters
------------------------------------------*/
function escapeHtml(unsafe) {
return unsafe
.replace(/&/g, "&")
.replace(/</g, "<")
.replace(/>/g, ">")
.replace(/"/g, """)
.replace(/'/g, "'");
}
/*------------------------------------------
Enable tabs in textarea
------------------------------------------*/
$(document).delegate('.allow-tabs', 'keydown', function(e) {
var keyCode = e.keyCode || e.which;
if (keyCode == 9) {
e.preventDefault();
var start = $(this).get(0).selectionStart;
var end = $(this).get(0).selectionEnd;
// set textarea value to: text before caret + tab + text after caret
$(this).val($(this).val().substring(0, start)
+ tabCharacter
+ $(this).val().substring(end));
// put caret at right position again
$(this).get(0).selectionStart =
$(this).get(0).selectionEnd = start + tabOffset;
}
});
How does code and textarea elements stay aligned?
They are aligned because in the CSS they both use the same style which outlines the positioning of both elements. They both use position: absolute and the same top and left properties so stay in the same position.
See here https://www.w3schools.com/css/css_positioning.asp
In terms of the z-axis you can see that code has a z-index of 1 while textarea has 2 so text area stays on top.
How is the cursor staying aligned with the text?
There is no javascript acting on the cursor here. If you were to have any textarea in html the cursor would align with the text.
I'm trying to embed videos in my website with custom video players and when I embed more than one video when I press the play button on any of the videos it plays all of the videos at once instead of just the one I click play on. The code items are down below:
goto the jsfiddle below and run the code then press play on a video and you'll see it plays both videos at once instead of the one you click.
HTML
<html>
<head>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="script.js"></script>
<link rel="stylesheet" href="style.scss">
</head>
<body>
<!--Video 1-->
<section id="wrapper">
<div class="videoContainer">
<video id="myVideo" controls preload="auto" poster="http://s.cdpn.io/6035/vp_poster.jpg" width="380" >
<source src="http://html-testing.github.io/2/videos/mikethefrog.mp4" type="video/mp4" />
<p>Your browser does not support the video tag.</p>
</video>
<div class="caption">Video1</div>
<div class="control">
<div class="btmControl">
<div class="btnPlay btn" title="Play/Pause video"><span class="icon-play"></span></div>
<div class="progress-bar">
<div class="progress">
<span class="bufferBar"></span>
<span class="timeBar"></span>
</div>
</div>
<!--<div class="volume" title="Set volume">
<span class="volumeBar"></span>
</div>-->
<div class="sound sound2 btn" title="Mute/Unmute sound"><span class="icon-sound"></span></div>
<div class="btnFS btn" title="Switch to full screen"><span class="icon-fullscreen"></span></div>
</div>
</div>
</div>
</section>
<!--Video 2-->
<section id="wrapper">
<div class="videoContainer">
<video id="myVideo" controls preload="auto" poster="http://s.cdpn.io/6035/vp_poster.jpg" width="380" >
<source src="http://html-testing.github.io/2/videos/mikethefrog.mp4" type="video/mp4" />
<p>Your browser does not support the video tag.</p>
</video>
<div class="caption">Video2</div>
<div class="control">
<div class="btmControl">
<div class="btnPlay btn" title="Play/Pause video"><span class="icon-play"></span></div>
<div class="progress-bar">
<div class="progress">
<span class="bufferBar"></span>
<span class="timeBar"></span>
</div>
</div>
<!--<div class="volume" title="Set volume">
<span class="volumeBar"></span>
</div>-->
<div class="sound sound2 btn" title="Mute/Unmute sound"><span class="icon-sound"></span></div>
<div class="btnFS btn" title="Switch to full screen"><span class="icon-fullscreen"></span></div>
</div>
</div>
</div>
</section>
</body>
</html>
CSS
#import url(http://fonts.googleapis.com/css?family=Oswald:300);
* {
box-sizing: border-box;
}
html {
width: 100%;
height: 100%;
background: #1f323e;
background: radial-gradient(ellipse cover at 80% 0%, #426168 0%, rgba(49, 67, 74, 0.1) 100%), radial-gradient(ellipse cover at 20% 100%, #080d11 0%, #243a43 100%);
}
body {
font-family: 'Oswald', sans-serif;
}
video {
border-radius: 6px;
}
/* video container */
.videoContainer {
width: 380px;
height: 200px;
position: relative;
overflow: hidden;
background: #000;
color: #ccc;
border-radius: 6px;
border: 1px solid rgba(0, 0, 0, 0.8);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
margin: 50px auto 0;
}
.videoContainer:before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.3);
z-index: 6;
border-radius: 6px;
pointer-events: none;
}
/* video caption css */
.caption {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 5px 10px;
color: #ddd;
font-size: 14px;
font-weight: 300;
text-align: center;
background: rgba(0, 0, 0, 0.4);
text-transform: uppercase;
border-radius: 6px 6px 0 0;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
}
/*** VIDEO CONTROLS CSS ***/
/* control holder */
.control {
color: #ccc;
position: absolute;
bottom: 10px;
left: 10px;
width: 360px;
z-index: 5;
display: none;
}
/* control bottom part */
.btmControl {
clear: both;
}
.control .btnPlay {
float: left;
width: 34px;
height: 30px;
padding: 5px;
background: rgba(0, 0, 0, 0.5);
cursor: pointer;
border-radius: 6px 0 0 6px;
border: 1px solid rgba(0, 0, 0, 0.7);
box-shadow: inset 0 0 1px rgba(255, 255, 255, 0.5);
}
.control .icon-play {
background: url(http://s.cdpn.io/6035/vp_sprite.png) no-repeat -11px 0;
width: 6px;
height: 9px;
display: block;
margin: 4px 0 0 8px;
}
.control .icon-pause {
background: url(http://s.cdpn.io/6035/vp_sprite.png) no-repeat -34px -1px;
width: 8px;
height: 9px;
display: block;
margin: 4px 0 0 8px;
}
.control .selected {
font-size: 15px;
color: #ccc;
}
.control .sound {
width: 30px;
height: 30px;
float: left;
background: rgba(0, 0, 0, 0.5);
border: 1px solid rgba(0, 0, 0, 0.7);
border-left: none;
box-shadow: inset 0 0 1px rgba(255, 255, 255, 0.5);
cursor: pointer;
}
.control .icon-sound {
background: url(http://s.cdpn.io/6035/vp_sprite.png) no-repeat -19px 0;
width: 13px;
height: 10px;
display: block;
margin: 8px 0 0 8px;
}
.control .muted .icon-sound {
width: 7px !important;
}
.control .btnFS {
width: 30px;
height: 30px;
border-radius: 0 6px 6px 0;
float: left;
background: rgba(0, 0, 0, 0.5);
border: 1px solid rgba(0, 0, 0, 0.7);
border-left: none;
box-shadow: inset 0 0 1px rgba(255, 255, 255, 0.5);
}
.control .icon-fullscreen {
background: url(http://s.cdpn.io/6035/vp_sprite.png) no-repeat 0 0;
width: 10px;
height: 10px;
display: block;
margin: 8px 0 0 9px;
}
/* PROGRESS BAR CSS */
/* Progress bar */
.progress-bar {
height: 30px;
padding: 10px;
background: rgba(0, 0, 0, 0.6);
border: 1px solid rgba(0, 0, 0, 0.7);
border-left: none;
box-shadow: inset 0 0 1px rgba(255, 255, 255, 0.5);
float: left;
}
.progress {
width: 240px;
height: 7px;
position: relative;
cursor: pointer;
background: rgba(0, 0, 0, 0.4);
/* fallback */
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 1px 1px black;
border-radius: 10px;
}
.progress span {
height: 100%;
position: absolute;
top: 0;
left: 0;
display: block;
border-radius: 10px;
}
.timeBar {
z-index: 10;
width: 0;
background: -webkit-linear-gradient(top, #6bcce2 0%, #1da3d0 100%);
box-shadow: 0 0 7px rgba(107, 204, 226, 0.5);
}
.bufferBar {
z-index: 5;
width: 0;
background: rgba(255, 255, 255, 0.2);
}
/* VOLUME BAR CSS */
/* volume bar */
.volume {
position: relative;
cursor: pointer;
width: 70px;
height: 10px;
float: right;
margin-top: 10px;
margin-right: 10px;
}
.volumeBar {
display: block;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-color: #eee;
z-index: 10;
}
JavaScript
/*
JS Modified from a tutorial found here:
http://www.inwebson.com/html5/custom-html5...ls-with-jquery/
I really wanted to learn how to skin html5 video.
*/
$(document).ready(function(){
//INITIALIZE
var video = $('#myVideo');
//remove default control when JS loaded
video[0].removeAttribute("controls");
$('.control').fadeIn(500);
$('.caption').fadeIn(500);
//before everything get started
video.on('loadedmetadata', function() {
//set video properties
$('.current').text(timeFormat(0));
$('.duration').text(timeFormat(video[0].duration));
updateVolume(0, 0.7);
//start to get video buffering data
setTimeout(startBuffer, 150);
//bind video events
$('.videoContainer')
.hover(function() {
$('.control').stop().fadeIn();
$('.caption').stop().fadeIn();
}, function() {
if(!volumeDrag && !timeDrag){
$('.control').stop().fadeOut();
$('.caption').stop().fadeOut();
}
})
.on('click', function() {
$('.btnPlay').find('.icon-play').addClass('icon-pause').removeClass('icon-play');
$(this).unbind('click');
video[0].play();
});
});
//display video buffering bar
var startBuffer = function() {
var currentBuffer = video[0].buffered.end(0);
var maxduration = video[0].duration;
var perc = 100 * currentBuffer / maxduration;
$('.bufferBar').css('width',perc+'%');
if(currentBuffer < maxduration) {
setTimeout(startBuffer, 500);
}
};
//display current video play time
video.on('timeupdate', function() {
var currentPos = video[0].currentTime;
var maxduration = video[0].duration;
var perc = 100 * currentPos / maxduration;
$('.timeBar').css('width',perc+'%');
$('.current').text(timeFormat(currentPos));
});
//CONTROLS EVENTS
//video screen and play button clicked
video.on('click', function() { playpause(); } );
$('.btnPlay').on('click', function() { playpause(); } );
var playpause = function() {
if(video[0].paused || video[0].ended) {
$('.btnPlay').addClass('paused');
$('.btnPlay').find('.icon-play').addClass('icon-pause').removeClass('icon-play');
video[0].play();
} else {
$('.btnPlay').removeClass('paused');
$('.btnPlay').find('.icon-pause').removeClass('icon-pause').addClass('icon-play');
video[0].pause();
}
};
//fullscreen button clicked
$('.btnFS').on('click', function() {
if($.isFunction(video[0].webkitEnterFullscreen)) {
video[0].webkitEnterFullscreen();
}
else if ($.isFunction(video[0].mozRequestFullScreen)) {
video[0].mozRequestFullScreen();
} else {
alert('Your browsers doesn\'t support fullscreen');
}
});
//sound button clicked
$('.sound').click(function() {
video[0].muted = !video[0].muted;
$(this).toggleClass('muted');
if(video[0].muted) {
$('.volumeBar').css('width',0);
} else {
$('.volumeBar').css('width', video[0].volume*100+'%');
}
});
//VIDEO EVENTS
//video canplay event
video.on('canplay', function() {
$('.loading').fadeOut(100);
});
//video canplaythrough event
//solve Chrome cache issue
var completeloaded = false;
video.on('canplaythrough', function() {
completeloaded = true;
});
//video ended event
video.on('ended', function() {
$('.btnPlay').removeClass('paused');
video[0].pause();
});
//video seeking event
video.on('seeking', function() {
//if video fully loaded, ignore loading screen
if(!completeloaded) {
$('.loading').fadeIn(200);
}
});
//video seeked event
video.on('seeked', function() { });
//video waiting for more data event
video.on('waiting', function() {
$('.loading').fadeIn(200);
});
//VIDEO PROGRESS BAR
//when video timebar clicked
var timeDrag = false; /* check for drag event */
$('.progress').on('mousedown', function(e) {
timeDrag = true;
updatebar(e.pageX);
});
$(document).on('mouseup', function(e) {
if(timeDrag) {
timeDrag = false;
updatebar(e.pageX);
}
});
$(document).on('mousemove', function(e) {
if(timeDrag) {
updatebar(e.pageX);
}
});
var updatebar = function(x) {
var progress = $('.progress');
//calculate drag position
//and update video currenttime
//as well as progress bar
var maxduration = video[0].duration;
var position = x - progress.offset().left;
var percentage = 100 * position / progress.width();
if(percentage > 100) {
percentage = 100;
}
if(percentage < 0) {
percentage = 0;
}
$('.timeBar').css('width',percentage+'%');
video[0].currentTime = maxduration * percentage / 100;
};
//VOLUME BAR
//volume bar event
var volumeDrag = false;
$('.volume').on('mousedown', function(e) {
volumeDrag = true;
video[0].muted = false;
$('.sound').removeClass('muted');
updateVolume(e.pageX);
});
$(document).on('mouseup', function(e) {
if(volumeDrag) {
volumeDrag = false;
updateVolume(e.pageX);
}
});
$(document).on('mousemove', function(e) {
if(volumeDrag) {
updateVolume(e.pageX);
}
});
var updateVolume = function(x, vol) {
var volume = $('.volume');
var percentage;
//if only volume have specificed
//then direct update volume
if(vol) {
percentage = vol * 100;
} else {
var position = x - volume.offset().left;
percentage = 100 * position / volume.width();
}
if(percentage > 100) {
percentage = 100;
}
if(percentage < 0) {
percentage = 0;
}
//update volume bar and video volume
$('.volumeBar').css('width',percentage+'%');
video[0].volume = percentage / 100;
//change sound icon based on volume
if(video[0].volume === 0){
$('.sound').removeClass('sound2').addClass('muted');
}
else if(video[0].volume > 0.5){
$('.sound').removeClass('muted').addClass('sound2');
} else {
$('.sound').removeClass('muted').removeClass('sound2');
}
};
//Time format converter - 00:00
var timeFormat = function(seconds){
var m = Math.floor(seconds/60)<10 ? "0"+Math.floor(seconds/60) : Math.floor(seconds/60);
var s = Math.floor(seconds-(m*60))<10 ? "0"+Math.floor(seconds-(m*60)) : Math.floor(seconds-(m*60));
return m+":"+s;
};
});
Click Here for JS Fiddle.
You cannot have multiple ID's on one page. Change the video id's to classes. That is probably why you aren't getting the results you want.
After that, on click you can do:
$('.myVideo').each(function(){
this.play();
});
or
$('video').each(function(){
this.play();
});
EDIT
So upon re-reading the question I finally understand what you need to do. Your event selectors and everything should still be good.
1- change:
var video = $('#myVideo');
to
var video = $('.myVideo');
2- Pass the $(this).parents(.videoContainer) variable to your playpause() function. This will enable you to access the video container that is being clicked.
You can also consolidate your event function calls to one line:
$(document).on('click', 'video, .btnPlay', function(){
playPause($(this).parents('.videoContainer'));
});
var playPause = function($that){
var $playBtn = $that.find('.btnPlay');
var video = $that.find('video').get(0);
//video.pause() and video.play() is what you will you use to play/pause
//put your conditional statements and stuff here
}
I know CSS is "cascading", but in this case I want the effect to ascend. I'm open for either a JS or CSS solution, but honestly I'd prefer the solution with the least amount of code or overhead.
When I hover over a (child) letter, I want the entire background color to change for the ENTIRE WINDOW, not just the child element. Each letter is contained within the parent #word div which fills the whole window (or body).
It would be nice if something like the below existed in css:
#h:hover #word{
background-color: rgba(0, 102, 0, .5);
}
But it's not working. Anyone have any ideas??
HTML:
<div id="word">
<h1><a id="h" class= "letter" href=#>H</a></h1>
<h1><a class= "letter" href=#>E</a></h1>
<h1><a class= "letter" href=#>L</a></h1>
<h1><a class= "letter" href=#>L</a></h1>
<h1><a class= "letter" href=#>O</a></h1>
</div>
CSS:
body {
/*font-family: 'Sigmar One', cursive;*/
font-family: 'Chango', cursive;
font-size: 115px;
color: white;
text-shadow: 5px 5px 5px #000;
/* background-color: #0047b2 */
width: 100%;
height: 100%;
margin: 0px;
background: url(img/texture.png) repeat;
}
#word {
position:absolute;
height:100%;
width: 70%;
display: table;
padding: 0 15% 0 15%;
background: rgba(0, 71, 178, .5);
}
h1 {
display: table-cell;
vertical-align: middle;
text-align:center;
height: 1em;
}
a {
/*border: 1px solid black;*/
display: inline-block;
line-height: 100%;
overflow: hidden;
}
a:visited, a:active {
text-decoration: none;
color: white;
/*color: #E8E8E8;*/
}
a:link {
text-decoration: none;
color: white;
text-shadow: 3px -3px 0px black, -2px 2px 5px #0056b2;
}
a:hover {
text-shadow: 5px 5px 5px #000;
color: white;
}
#h:hover #word{
background-color: rgba(0, 102, 0, .5);
}
#media (max-width: 1330px){
#word {
width: 100%;
padding: 0px;
}
}
Fiddle: http://jsfiddle.net/SZ9ku/1/
The solution would probably be JS:
$(".letter").hover(function() {
$(this).closest("#word").toggleClass("hovered")
});
Here is a fiddle: http://jsfiddle.net/zT9AS/2
True;
#word #h:hover {
background-color: rgba(0, 102, 0, .5);
}
False;
#h:hover #word{
background-color: rgba(0, 102, 0, .5);
}
A without jquery solution:
onload = function()
{
var links = document.getElementsByTagName('a');
for (var i = 0; i < links.length; ++i)
{
if (links[i].className == 'letter')
{
links[i].onmouseover = function() {
document.getElementById('word').style.backgroundColor="#0000FF";
};
links[i].onmouseout = function() {
document.getElementById('word').style.backgroundColor="#FFFFFF";
};
}
}
}
It can be done in pure JS, no jQuery (I assume you don't want that since it wouldn't be that light in code), this is the best I could came out with:
var word = document.getElementsByClassName("letter");
for (i=0; i<word.length; i++) {
word[i].addEventListener("mouseenter", function( event ) {
parent = event.target.parentNode.parentNode;
//whenever the mouse hovers over a letter this will be evaluated once
parent.style.backgroundColor = "green";
});
word[i].addEventListener("mouseout", function( event ) {
parent = event.target.parentNode.parentNode;
//whenever the mouse hovers over a letter this will be evaluated once
parent.style.backgroundColor = "";
});
}
Try it in this fiddle: http://jsfiddle.net/SZ9ku/17/
In POJS, add the following
CSS
.wordBg {
background: rgba(0, 102, 0, .5) !important;
}
Javascript
var changeWordBg = (function (word) {
return function (evt) {
if (evt.target.classList.contains("letter")) {
switch (evt.type) {
case "mouseover":
word.classList.add("wordBg");
break;
case "mouseout":
word.classList.remove("wordBg");
break;
default:
}
}
};
}(document.getElementById("word")));
document.body.addEventListener("mouseover", changeWordBg, false);
document.body.addEventListener("mouseout", changeWordBg, false);
On jsfiddle