I built a simple pop-up that can open inline content and it is based on add and remove class. I want to use this pop-up two times on the same page, one as classic onclick pop-up and second should be triggered by mousemove (top of the page).
To done this I changed pop-up IDs, but I cannot get through one conflict: When mouse move pop-up is opened it cant be closed.
// Pop-up
if (document.querySelector(".fl-pop-up")) {
window.addEventListener("load", function() {
var btn = document.getElementById("btn_fl-pop-up");
var modal = document.getElementById("fl-pop-up__init");
// Open if exist
if (btn) {
btn.onclick = function() {
modal.classList.add("fl-pop-up__active");
};
}
var modal__overlay = document.querySelector(".fl-pop-up__overlay");
var close = document.querySelector(".fl-pop-up__overlay--close");
// Close on close click
close.onclick = function() {
modal__overlay.classList.remove("fl-pop-up__active");
};
// Close on window click
window.onclick = function(event) {
if (event.target == modal__overlay) {
modal__overlay.classList.remove("fl-pop-up__active");
}
};
// Close on ESC
document.onkeydown = function(evt) {
evt = evt || window.event;
if (evt.keyCode == 27) {
modal__overlay.classList.remove("fl-pop-up__active");
}
};
});
}
// Abandoning visitor
var mouseX = 0;
var mouseY = 0;
var popupCounter = 0;
document.addEventListener("mousemove", function(e) {
mouseX = e.clientX;
mouseY = e.clientY;
// document.getElementById("coordinates").innerHTML = "<br />X: " + e.clientX + "px<br />Y: " + e.clientY + "px";
//});
//jQuery(document).mouseleave(function () {
var modal = document.getElementById("fl-pop-up__ab");
//var modal = document.querySelector(".fl-ab-pop-up");
if (mouseY < 50) {
if (popupCounter < 1) {
modal.classList.add("fl-pop-up__active");
}
popupCounter++;
}
});
.more-link {
position: absolute;
top: 50%;
left: 45%;
}
/* FL POP UP */
.fl-pop-up {
position: relative;
z-index: 1000000;
}
.fl-pop-up__overlay {
opacity: 0;
visibility: hidden;
transition: opacity 0.3s 0s, visibility 0s 0.3s;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(23, 23, 23, 0.85);
height: 100vh;
}
.fl-pop-up__active {
opacity: 1;
visibility: visible;
transition: opacity 0.3s 0s, visibility 0s 0s;
}
.fl-pop-up__overlay--pop-up {
/*padding: 20px;*/
background: #fff;
width: 79%;
height: 70vh;
overflow: auto;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-box-shadow: 0 0 12px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
box-shadow: 0 0 12px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}
.fl-pop-up__overlay--close {
position: absolute;
cursor: pointer;
top: 0;
right: 0;
overflow: hidden;
font-size: 34px;
line-height: 1.1;
text-align: center;
z-index: 1050;
color: rgb(210, 210, 210);
background-color: rgb(22, 22, 23);
width: 40px;
height: 40px;
padding: 10px;
display: block;
background-position: 10px center;
}
.fl-pop-up__overlay--close:hover {
color: #fff;
}
<div id="btn_fl-pop-up" class="btn_fl-pop-up more-link">Open POP UP 1 - onclick</div>
<!--Onclick - POP UP 1-->
<div class="fl-pop-up">
<div id="fl-pop-up__init" class="fl-pop-up__overlay">
<div class="fl-pop-up__overlay--pop-up">
<div class="fl-pop-up__overlay--close">×</div>
<div style="margin: 0 0 0 -15px;">
<div class="col-xs-12" style="text-align: center; the padding-top:3em;">
<h1 style="font-size: 2.2rem;">POP UP 1 (click)</h1>
</div>
</div>
</div>
</div>
</div>
<!--Mousemove - POP UP 2-->
<div class="fl-pop-up">
<div id="fl-pop-up__ab" class="fl-pop-up__overlay">
<div class="fl-pop-up__overlay--pop-up">
<div class="fl-pop-up__overlay--close">×</div>
<div style="margin: 0 0 0 -15px;">
<div class="col-xs-12" style="text-align: center; padding-top:3em;">
<h1 style="font-size: 2.2rem;">POP UP 2 (mousemove)</h1>
</div>
</div>
</div>
</div>
</div>
Thank you
Related
The aside element is a modal popup with multiple a href links inside, none of which are working. I can right click and go to the link but clicking on it does nothing. The open modal is triggered by Javascript. There are no external libraries, plugins etc that could be causing conflict.
What am I missing here?
const overlay = document.querySelector(".overlay");
const card = document.querySelectorAll(".card");
card.forEach((card) => {
card.addEventListener("click", () => {
const cardId = card.getAttribute("data-card");
const modal = document.getElementById(`${cardId}`);
modal.classList.remove("hidden");
overlay.classList.remove("hidden");
const vScrollPos = window.scrollY;
document.body.style.position = "fixed";
document.body.style.top = `-${vScrollPos}px`;
const closeModal = function() {
modal.classList.add("hidden");
overlay.classList.add("hidden");
const scrollY = document.body.style.top;
document.body.style.position = "";
document.body.style.top = "";
window.scrollTo(0, parseInt(scrollY || "0") * -1);
};
const modalCloseBtn = modal.querySelector(".close-modal");
modalCloseBtn.addEventListener("click", () => {
closeModal();
});
overlay.addEventListener("click", closeModal);
document.addEventListener("keydown", function(e) {
if (e.key === "Escape" && !modal.classList.contains("hidden")) {
closeModal();
}
});
});
});
.hidden {
display: none;
}
.modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: calc(100vw - 16rem);
overflow-y: scroll;
max-height: calc(100vh - 16rem);
background-color: white;
padding: 6rem;
border-radius: 5px;
box-shadow: 0 3rem 5rem rgba(0, 0, 0, 0.3);
z-index: 10;
pointer-events: all;
cursor: pointer;
}
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(3px);
overflow-y: scroll;
z-index: 5;
}
.modal-title {
font-size: 2.4rem;
margin-bottom: 3rem;
}
.close-modal {
position: absolute;
top: 1.2rem;
right: 2rem;
font-size: 5rem;
color: #333;
cursor: pointer;
border: none;
background: none;
}
<article class="card" data-card="modal1">
<img class="card-img" src="img/card-thumb/cardImg.jpg" alt="card image">
<p class="card-title">open card modal</p>
</article>
<aside class="modal hidden" id="modal1">
<button class="close-modal">×</button>
<h5 class="modal-title">
<a href='https://www.google.com/' target='_blank' rel='noreferrer noopener nofollow'>WHY IS THIS LINK NOT OPENING?</a>
<h5>
</aside>
Ok. issue has been found and fixed.
I was using scrollIntoView to handle page nav and smooth scrolling and I imprecisely targeted all "a" elements before I wrote the code for this current section with "a" elements inside of modal containers. Solved issue by giving the page nav a's an additional class then targeting that class only for that section of JS code! Doooooh.
I am currently trying to create a music app based on the following video: https://youtu.be/OafpiyPa63I?t=13127
I am at the linked timestamp, and I have written the code exactly as shown in the video, but for some reason, when I try to seek, the input is set back to 0 and therefore so is the song. My code for this part:
let currentStart = document.getElementById('currentStart');
let currentEnd = document.getElementById('currentEnd');
let seek = document.getElementById('seek');
let bar2 = document.getElementById('bar2');
let dot = document.getElementsByClassName('dot')[0];
music.addEventListener('timeupdate', () => {
let music_curr = music.currentTime;
let music_dur = music.duration;
let min1 = Math.floor(music_dur / 60);
let sec1 = Math.floor(music_dur % 60);
if (sec1 < 10) {
sec1 = `0${sec1}`;
};
currentEnd.innerText = `${min1}:${sec1}`;
let min2 = Math.floor(music_curr / 60);
let sec2 = Math.floor(music_curr % 60);
if (sec2 < 10) {
sec2 = `0${sec2}`;
};
currentStart.innerText = `${min2}:${sec2}`;
let progressBar = parseInt((music_curr / music_dur) * 100);
seek.value = progressBar;
let seekbar = seek.value;
bar2.style.width = `${seekbar}%`;
dot.style.left = `${seekbar}%`;
});
seek.addEventListener('change', () => {
music.currentTime = seek.value * music.duration / 100;
});
<div class="bar">
<input type="range" id="seek" min="0" max="100">
<div class="bar2" id="bar2"></div>
<div class="dot"></div>
</div>
header .master_play .bar {
position: relative;
width: 43%;
height: 2px;
background: rgb(105,105,170,.1);
margin: 0px 15px 0px 10px;
}
header .master_play .bar .bar2 {
position: absolute;
background: #36e2ec;
width: 0%;
height: 100%;
top: 0;
transition: 1s linear;
}
header .master_play .bar .dot {
position: absolute;
width: 5px;
height: 5px;
background: #36e2ec;
border-radius: 50%;
left: 0%;
top: -1.5px;
transition: 1s linear;
}
header .master_play .bar .dot::before {
content: '';
position: absolute;
width: 15px;
height: 15px;
border: 1px solid #36e2ec;
border-radius: 50%;
left: -6.5px;
top: -6.5px;
box-shadow: inset 0px 0px 3px #36e2ec;
}
header .master_play .bar input {
position: absolute;
width: 100%;
top: -7px;
left: 0;
cursor: pointer;
z-index: 999999999999;
opacity: .5;
}
I'm not sure if I am in the wrong, or if the tutorial is outdated.
I figured out it was the platform I was running the code on. Somewhere it had clashed, so I was able to move it to a new host and it worked.
I have an HTML page that should display two different videos in two different modals.
I want the video to start playing automatically whenever the play-video icon is clicked and the modal is opened.I did this with this code(video.forEach(video => video.play());) but both videos start playing.
And when the modal is open and the video is playing, the video is cut and the modal is closed by the user clicking on the window or modal-closed screen.I did this with this code:( video.forEach(video => video.pause());).
I just have to do this with JavaScript
Thank you in advance for your cooperation.
// modal and video
var modal = document.getElementsByClassName("modal");
var playVideo = document.getElementsByClassName("play-video");
var modalClose = document.getElementsByClassName("modal--close");
var video = document.querySelectorAll('video');
function setDataIndex() {
for (i = 0; i < playVideo.length; i++){
playVideo[i].setAttribute('data-index', i);
modal[i].setAttribute('data-index', i);
modalClose[i].setAttribute('data-index', i);
video.forEach(video => video.play());
}
}
for (i = 0; i < playVideo.length; i++){
playVideo[i].onclick = function() {
var ElementIndex = this.getAttribute('data-index');
modal[ElementIndex].style.display = "block";
};
modalClose[i].onclick = function() {
var ElementIndex = this.getAttribute('data-index');
modal[ElementIndex].style.display = "none";
video.forEach(video => video.pause());
};
}
window.onload = function() {
setDataIndex();
};
window.onclick = function(event) {
if (event.target === modal[event.target.getAttribute('data-index')]) {
modal[event.target.getAttribute('data-index')].style.display = "none";
video.forEach(video => video.pause());
}
};
// modal and video
:root{
/* colors */
--cws: #121214; /*color name: Woodsmoke RGB: 18, 18, 20 */
--clo: #2A827c; /*color name: Lochinvar RGB: 42, 130, 124 */
--cpr: #3CBBB0; /*color name: Puerto Rico RGB: 60, 187, 176 */
--cwa: #7C809B; /*color name: Waterloo RGB: 124, 128, 155 */
--csp: #F5EDF0; /*color name: Soft Peach RGB: 245, 237, 240 */
--cwh: #FFFFFF; /*color name: White RGB: 255, 255, 255 */
}
.play-video{
width: 20px;
height: 20px;
border-radius: 50%;
background-color: green;
}
/* modal */
.modal{
display: none;
position: fixed;
z-index:13;
left: 0;
top: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
overflow-y: hidden;
background: rgba(124, 128, 155,.8);
}
.modal.active{
display: flex;
align-items: center;
justify-content: center;
}
.modal--content {
margin: auto;
width: 50%;
height: auto;
border-radius: 20px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
-ms-border-radius: 20px;
-o-border-radius: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
}
.modal--header{
text-align: right;
position: absolute;
top: 20px;
right: 30px;
}
.modal--close{
color: var(--cws);
font-size: 3rem;
transition: all .5s;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-ms-transition: all .5s;
-o-transition: all .5s;
}
.modal--close:hover,
.modal--close:focus {
color: var(--csp);
cursor: pointer;
}
.modal--body{
width: 100%;
height: 100%;
}
.modal--body video{
width: 100%;
height: 100%;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
border: 15px solid var(--csp);
}
/* modal */
<!-- icon play -->
<div class="play-video"></div>
<div class="play-video"></div>
<!-- icon play -->
<!-- The Modal -->
<div class="modal">
<div class="modal--header">
<span class="modal--close">×</span>
</div>
<div class="modal--content">
<div class="modal--body">
<video controls class="inlineVideo" autoplay="autoplay">
<source src="https://www.youtube.com/watch?v=sgNkCrAhTGc" >
</video>
</div>
</div>
</div>
<!-- The Modal -->
<!-- The Modal -->
<div class="modal">
<div class="modal--header">
<span class="modal--close">×</span>
</div>
<div class="modal--content">
<div class="modal--body">
<video controls class="inlineVideo" autoplay="autoplay">
<source src="https://www.youtube.com/watch?v=YZ0cJiVr2-w" >
</video>
</div>
</div>
</div>
<!-- The Modal -->
// modal and video
var modal = document.getElementsByClassName("modal");
var playVideo = document.getElementsByClassName("play-video");
var modalClose = document.getElementsByClassName("modal--close");
var video = document.querySelectorAll('video');
function setDataIndex() {
for (i = 0; i < playVideo.length; i++){
playVideo[i].setAttribute('data-index', i);
modal[i].setAttribute('data-index', i);
modalClose[i].setAttribute('data-index', i);
video[i].setAttribute('data-index', i);
}
}
for (i = 0; i < playVideo.length; i++){
playVideo[i].onclick = function() {
var ElementIndex = this.getAttribute('data-index');
modal[ElementIndex].style.display = "block";
};
modalClose[i].onclick = function() {
var ElementIndex = this.getAttribute('data-index');
modal[ElementIndex].style.display = "none";
video.forEach(video => video.pause());
};
}
window.onload = function() {
setDataIndex();
};
window.onclick = function(event) {
if (event.target === modal[event.target.getAttribute('data-index')]) {
modal[event.target.getAttribute('data-index')].style.display = "none";
video[ElementIndex].play();
}
};
// modal and video
When I click the button at the bottom of the screen with the mouse and drag it upwards, I want the lock screen to close and the new page to come.
The name of the page that will open immediately after this process Page to open
I tried to do it with mouseup and mousedown but without success
Here is the full example video of the function I want to do
Streamable
.container {
position: absolute;
display: flex;
right: 40px;
bottom: 40px;
}
.Phone-container {
position: absolute;
width: 285px;
height: 580px;
border-radius: 30px;
overflow: hidden;
}
.Phone-Background {
background-image: url('https://firebasestorage.googleapis.com/v0/b/fotos-3cba1.appspot.com/o/wallpaper.jpg?alt=media&token=059229cc-3823-4d27-834a-7b62cabd69d2');
background-size: cover;
background-repeat: no-repeat;
right: 0;
bottom: 0;
}
.unlockBar {
position: absolute;
width: 40%;
height: 4px;
border-radius: 20px;
right: 30%;
top: 565px;
background-color: rgba(255, 255, 255, .7);
opacity: 0;
transition: ease all 0.2s;
cursor: grab;
}
.Phone-container:hover .unlockBar {
opacity: 1;
}
.Phone-container .unlockBar:hover:before {
opacity: 1;
transform: none;
}
.Phone-container .unlockBar::before {
content: attr(data-msj);
position: absolute;
bottom: 100%;
left: 0;
right: 0;
max-width: 100px;
margin: 0 auto;
padding-bottom: 10px;
color: #fff;
font-size: 12px;
text-align: center;
opacity: 0;
transform: translateY(0px);
transition: ease all .8s;
}
<div class="container">
<div class="Phone-container Phone-Background">
<div class="unlockBar" data-msj="Swipe Up to Open"></div>
<div class="Page to open">
</div>
</div>
</div>
You actually need to detect a swipe, scroll won't work in this case.
The question has been answered here:
Detect a finger swipe through JavaScript on the iPhone and Android
document.addEventListener('touchstart', handleTouchStart, false);
document.addEventListener('touchmove', handleTouchMove, false);
var xDown = null;
var yDown = null;
function handleTouchStart(evt) {
xDown = evt.originalEvent.touches[0].clientX;
yDown = evt.originalEvent.touches[0].clientY;
};
function handleTouchMove(evt) {
if ( ! xDown || ! yDown ) {
return;
}
var xUp = evt.originalEvent.touches[0].clientX;
var yUp = evt.originalEvent.touches[0].clientY;
var xDiff = xDown - xUp;
var yDiff = yDown - yUp;
if ( Math.abs( xDiff ) > Math.abs( yDiff ) ) {/*most significant*/
if ( xDiff > 0 ) {
/* left swipe */
} else {
/* right swipe */
}
} else {
if ( yDiff > 0 ) {
/* up swipe */
} else {
/* down swipe */
}
}
/* reset values */
xDown = null;
yDown = null;
};
Against all reason, I'm trying to create a vanilla JavaScript carousel.
I am having two problems:
1. The images move left at widths of -680px as they should but when I tried to create the same function for the right button, the left value goes to 1370px making the picture off the screen.
2. I would like for it to slide left rather jump left (same for right), I managed to get it to do this but it doesn't work on the first slide, only from the second slide.
Here is the HTML code just for the carousel:
<div id = "container">
<div id = "carousel">
<div class = "slide"><img class = "slideImage" class = "active" src = "sithCover.png"></div>
<div class = "slide"><img class = "slideImage" src = "darthVader.png"></div>
<div class = "slide"><img class = "slideImage" src = "darthSidious.png"></div>
<div class = "slide"><img class = "slideImage" src = "kyloRen.png"></div>
</div>
</div>
<div id = "left" class = "button"></div>
<div id = "right" class = "button"></div>
Here is the CSS code:
#container {
position: absolute;
top: 200px;
left: 100px;
width: 680px;
height: 360px;
white-space: nowrap;
overflow:hidden;
}
#carousel {
position: absolute;
width: 2740px;
height: 360px;
white-space: nowrap;
overflow: hidden;
transition: left 300ms linear;
}
.slide {
display: inline-block;
height: 360px;
width: 680px;
padding: 0;
margin: 0;
transition: left 300ms linear;
}
.slideImage {
position:relative;
height: 360px;
width: 680px;
float: left;
}
.button {
position: absolute;
top: 340px;
height: 60px;
width: 60px;
border-bottom: 12px solid red;
}
#left {
left: 115px;
border-left: 12px solid red;
transform: rotate(45deg);
}
#right {
left: 693px;
border-right: 12px solid red;
transform: rotate(-45deg);
}
Here is the JavaScript:
var carousel = document.querySelector('#carousel');
var firstVal = 0;
document.querySelector('#left').addEventListener("click", moveLeft);
function moveLeft (){
firstVal +=685;
carousel.style.left = "-"+firstVal+"px";
};
document.querySelector('#right').addEventListener("click", moveRight);
function moveRight() {
firstVal +=685;
carousel.style.left = "+"+firstVal+"px";
};
Here is a JSFiddle so that you can see what I mean:
"https://jsfiddle.net/way81/8to1kkyj/"
I appreciate your time in reading my question and any help would be much appreciated.
Ofcourse it goes from -685px on left click and then to +1370pxthe next right click; You are always adding 685 to your firstVal variable.
firstVal = 0
//firstVal is worth 0
moveLeft()
//firstVal is now worth 685
moveRight()
//firstVal is now worth 1370.
The problem is that when you apply the firstVal to your CSS thing in the javascript, you create a string to get your negative value (where you apply the "-" sign infront of firstVal)
Instead, write them like this
function moveLeft (){
firstVal -=685; //note we now subtract, the "-" should appear when the number becomes negative
carousel.style.left = firstVal + "px";
};
function moveRight() {
firstVal +=685;
carousel.style.left = firstVal + "px";
};
var left = document.getElementById("left");
left.addEventListener("click", moveLeft, false);
var right = document.getElementById("right");
right.addEventListener("click", moveRight, false);
var carousel = document.getElementById("carousel");
var images = document.getElementsByTagName("img");
var position = 0;
var interval = 685;
var minPos = ("-" + interval) * images.length;
var maxPos = interval * images.length;
//slide image to the left side <--
function moveRight() {
if (position > (minPos + interval)) {
position -= interval;
carousel.style.left = position + "px";
}
if (position === (minPos + interval)) {
right.style.display = "none";
}
left.style.display = "block";
}
//slide image to the right side -->
function moveLeft() {
if (position < (maxPos - interval) && position < 0) {
position += interval;
carousel.style.left = position + "px";
}
if (position === 0) {
left.style.display = "none";
}
right.style.display = "block";
}
#container {
position: absolute;
top: 200px;
left: 100px;
width: 680px;
height: 360px;
white-space: nowrap;
overflow: hidden;
}
#carousel {
position: absolute;
width: 2740px;
height: 360px;
white-space: nowrap;
overflow: hidden;
transition: left 300ms linear;
}
.slide {
display: inline-block;
height: 360px;
width: 680px;
padding: 0;
margin: 0;
transition: left 300ms linear;
}
.slideImage {
position: relative;
height: 360px;
width: 680px;
float: left;
}
.button {
position: absolute;
top: 340px;
height: 60px;
width: 60px;
border-bottom: 12px solid red;
}
#left {
left: 115px;
border-left: 12px solid red;
transform: rotate(45deg);
display: none;
}
#right {
left: 693px;
border-right: 12px solid red;
transform: rotate(-45deg);
}
<div id="container">
<div id="carousel">
<div class="slide">
<img class="slideImage" class="active" src="sithCover.png" alt="slide1">
</div>
<div class="slide">
<img class="slideImage" src="darthVader.png" alt="slide2">
</div>
<div class="slide">
<img class="slideImage" src="darthSidious.png" alt="slide3">
</div>
<div class="slide">
<img class="slideImage" src="kyloRen.png" alt="slide4">
</div>
</div>
</div>
<div id="left" class="button"></div>
<div id="right" class="button"></div>