Autoplay and stop on opening and closing modal - javascript

I'm new to javascript and am facing issues with auto-playing video and stopping video upon opening and closing the modal.
Currently this script allows me to close the modal if I click outside of the video control and has to be fixed as well. It is intended to be able to play/pause the video on click of the video body, and modal to be closed when clicked out of the video.
At the same time, upon opening the modal, the video should be able to play automatically, likewise while closing the modal, video stop.
I am not familiar with the functions and if anyone could possibly suggest any improvement on the current script?
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<style>
.trailer{
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
background: rgba(0, 0, 0, 0.7);
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
visibility: hidden;
opacity: 0;
}
.trailer.active{
visibility: visible;
opacity: 1;
}
.trailer #mainvid{
position: relative;
max-width: 1200px;
outline: none;
}
.trailer-close{
position: absolute;
top: 30px;
right: 30px;
cursor: pointer;
filter: invert(1);
max-width: 32px;
}
#media (max-width: 991px) {
.trailer #mainvid{
max-width: 90%;
}
}
</style>
</head>
<body>
<div class="banner">
<div class="content">
<p>Testing Testing 1 2 3</p>
<a href="#" onclick="toggle();">
<button>Play Video</button>
</a>
</div>
</div>
<div class="trailer" id="main">
<video id="mainvid" src="/video/products/container accomodation/main/main video.mp4" controls="true"></video>
</div>
<script type="text/javascript">
function toggle(){
var trailer = document.querySelector(".trailer")
trailer.classList.toggle("active");
video.pause();
video.currentTime = 0;
}
window.addEventListener('mouseup',function(){
var traileractive = document.querySelector(".trailer.active")
traileractive.classList.toggle("active");
})
</script>
</body>
</html>

To handle states of the video player, we can simply use the play pause functions of HTMLMediaElement. Use this code, it handles all the desired functionalities.
var videoElem = document.querySelector(".trailer video");
var trailerElem = document.querySelector(".trailer")
function toggle() {
trailerElem.classList.add("active");
videoElem.play();
videoElem.currentTime = 0;
}
function handleTrailerClick(event) {
if (event && event.target && event.target.nodeName !== "VIDEO") {
videoElem.pause();
trailerElem.classList.remove('active');
}
}
function handleVideoClick(event) {
event.preventDefault();
videoElem.paused ? videoElem.play() : videoElem.pause();
}
document.querySelector("#playButton").addEventListener('click', toggle)
document.querySelector(".trailer").addEventListener('click', handleTrailerClick);
document.querySelector(".trailer video").addEventListener('click', handleVideoClick);
.trailer {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
background: rgba(0, 0, 0, 0.7);
width: 100%;
height: 100%;
display: none;
justify-content: center;
align-items: center;
}
.trailer.active {
display: flex;
}
.trailer #mainvid {
position: relative;
max-width: 1200px;
outline: none;
}
.trailer-close {
position: absolute;
top: 30px;
right: 30px;
cursor: pointer;
filter: invert(1);
max-width: 32px;
}
#media (max-width: 991px) {
.trailer #mainvid {
max-width: 90%;
}
}
<div class="banner">
<div class="content">
<p>Testing Testing 1 2 3</p>
<button id="playButton">Play Video</button>
</div>
</div>
<div class="trailer" id="main">
<video id="mainvid" src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4" controls="true"></video>
</div>

Related

'Zoom in' transition effect from image to content - switching content on click

I'm trying to create a transition between content and this is the idea for now:
I have two divs:
The first contains an image that occupies the width and height of the browser, plus a single button, these are the introduction to the web page;
The second contains the actual content of the website;
The idea is that when I click the button, the image zoom in, and after the transition I get the web page content.
My code so far:
const btnEl = document.querySelector(".btn");
const trailerContainerEl = document.querySelector(".trailer-container");
const introContainerEl = document.querySelector(".intro-container");
btnEl.addEventListener("click", () => {
trailerContainerEl.classList.remove("active");
});
btnEl.addEventListener("click", () => {
introContainerEl.classList.add("disappear");
});
body {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
overflow: hidden;
}
.intro-container {
width: 100%;
}
.intro-container img {
width: 100%;
height: 100vh;
object-fit: fill;
object-position: center;
}
.intro-container.disappear {
width: 200%;
height: 200%;
transition: transform 1s;
-ms-transform: scale(2.5);
/* IE 9 */
-webkit-transform: scale(2.5);
/* Safari 3-8 */
transform: scale(2.5);
display: flex;
justify-content: center;
align-items: center;
}
button.btn {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
padding: 15px 20px;
background: #2a78d7;
font-size: 18px;
font-weight: 700;
border-radius: 12px;
cursor: pointer;
color: white;
text-transform: uppercase;
border: 3px solid #20323e;
text-shadow: 1px 1px 4px black;
}
.trailer-container {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: rgb(228, 223, 224);
opacity: 1;
transition: opacity 2s;
}
.trailer-container.active {
visibility: hidden;
opacity: 0;
}
form {
margin: 250px;
}
<body>
<div class="intro-container">
<img src="https://www.hoganbakery.com.my/wp-content/uploads/2019/09/lion-office-tower.jpg" alt="">
<button class="btn">Click to choose items</button>
</div>
<div class="trailer-container active">
<form action="" name="myForm">
<section class="first-section">
<h3>Choose Item:</h3>
<div>
<input type="number" name="bread" id="bread" placeholder="How many?">
<label for="">Bread</label>
</div>
<div>
<input type="number" name="croissant" id="croissant" placeholder="How many?">
<label for="">Croissant</label>
</div>
</section>
<section class="third-section">
<h3>Do you have account</h3>
<div>
<input type="radio" name="" id="yes">
<label for="">I have account</label>
</div>
<div>
<input type="radio" name="" id="no">
<label for="">I don't have account</label>
</div>
</section>
<section class="commands">
<input type="button" id="submit" value="Submit">
</section>
</form>
</div>
</body>
My code 'sort of' does this, but what I'm trying to achieve is a bit more complex.
I found a great video that describes my vision, here is the link, from the 21st second https://youtu.be/lRVEOoSA5EI?t=21 .
As shown in the video, I would like to have a similar transition after clicking the button: hold for a second or two, 'zoom in' in a smooth way(almost to look like it's going through the door of the image, like it enters the shop), then my content would appear.
Another problem I have with this code(that I didn't solve by now): because I have overflow:hidden on body element, and position: fixed on .trailer-container class, I can't scroll down my web page.
I hope this is not too much, I realize it is not that easy to achieve.
I'm learning JavaScript, vanilla, and this is some little project I need to make.
you need to scale, and add opacity of your image, with css animation, and start this animation and opacity when we click on it, test this code
/** style.css :*/
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: green;
height: 100vh;
}
p{
text-align: center;
font-size: 70px;
}
#overflow-hide-transition{
width: 100%;
height: 100%;
overflow: hidden;
position: absolute;
top: 0;
}
#img-transition {
width: 100%;
height: 100%;
background-color: red;
display: flex;
justify-content: center;
align-items: center;
font-size: 70px;
flex-direction: column;
}
button {
width: 250px;
height: 50px;
font-size: 30px;
}
#keyframes presentationTransition{
to{
transform: scale(5);
opacity: 0;
}
}
<!-- index.html --> :
<!DOCTYPE html>
<html lang="FR-fr">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./style.css">
</head>
<body >
<p>This is the body</p>
<div id="overflow-hide-transition">
<div id="img-transition" >
test for zoom
<button id="boutton-transition"> clique</button>
</div>
</div>
<script src="./script.js"></script>
</body>
</html>
/** script.js: */
const overflowHide = document.getElementById('overflow-hide-transition')
const imgTransition = document.getElementById('img-transition')
const buttonTransition = document.getElementById('boutton-transition')
const seconde = 3;
document.addEventListener('click', ()=>{
imgTransition.style.cssText = `animation: presentationTransition ${seconde}s linear `
setTimeout(() => {
overflowHide.style.display= "none"
}, seconde *1000);
})

Opening a new screen by clicking the button on the existing screen in HTML

I'm working on make a twitter website. But I can't solve the this problem. When I want to click this button:
I expect a result like this:
Its background will look like this and it will pop a form on the screen. What should I use to solve this problem? I'm not bad with HTML DOM, but I couldn't figure out the algorithm in my head.
An other way for achieving that, would be with a modal box (div) that already exists but will only be displayed after clicking a certain button.
Here's a quick example, I've also added an overlay, which will appear behind the div. If you click on the overlay while the modal box is visible, it will disappear again.
$('#button').click(() => {
var display = $('#popup').css('display');
if (display === "none") {
$('#popup').show();
$('#overlay').fadeIn();
}
else {
$('#popup').hide();
$('#overlay').fadeOut();
}
});
$('#overlay').click(() => {
$('#popup').hide();
$('#overlay').fadeOut();
});
* {
margin: 0;
padding: 0;
}
#popup {
position: absolute;
background-color: #fff;
padding: 6%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 30%;
height: 30%;
border-radius: 30px;
z-index: 10;
display: none;
}
#overlay {
position: fixed;
background-color: rgba(0,0,0,0.5);
width: 100%;
height: 100%;
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
</head>
<body>
<div id="overlay"></div>
<div id="button">Click me</div>
<div id="popup">Text</div>
</body>
</html>
To do that you can use JavaScript or jQuery.
Exemple:
$(".mybutton").click(() => {
$("body").append(`
<div class="modals">
Copy your code here
</div>
`)
})
.modals{
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
padding: 40px 30px;
background-color: #e2e2e2;
border-radius: 4px;
}
<button class="mybutton">Open</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
$('#button').click(() => {
var display = $('#popup').css('display');
if (display === "none") {
$('#popup').show();
$('#overlay').fadeIn();
}
else {
$('#popup').hide();
$('#overlay').fadeOut();
}
});
$('#overlay').click(() => {
$('#popup').hide();
$('#overlay').fadeOut();
});
* {
margin: 0;
padding: 0;
}
#popup {
position: absolute;
background-color: #fff;
padding: 6%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 30%;
height: 30%;
border-radius: 30px;
z-index: 10;
display: none;
}
#overlay {
position: fixed;
background-color: rgba(0,0,0,0.5);
width: 100%;
height: 100%;
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
</head>
<body>
<div id="overlay"></div>
<div id="button">Click me</div>
<div id="popup">Text</div>
</body>
</html>

How to get scrolled value on horizontally-vertical scrolling

I created a web page that scrolls horizontally when you scroll vertical. And I want the scrolled value on scrolling. Here is what I have done
* {
padding: 0;
margin: 0;
}
#log {
position: fixed;
width: 500px;
height: 25px;
border: solid black 1px;
z-index: 999;
}
img{
position: fixed;
z-index: 999;
top: 50%;
left: 90vw;
transform: translate(0, -50%);
cursor: pointer;
user-select: none;
}
.outer-wrapper {
height: 100vw;
width: 100vh;
transform: rotate(-90deg) translateX(-100vh);
transform-origin: top left;
overflow-x: hidden;
overflow-y: scroll;
position: absolute;
scrollbar-width: none; /*---Firefox property---*/
-ms-overflow-style: none; /*---i.e. family---*/
}
::-webkit-scrollbar {
display: none; /*---Chrome and Safari*/
}
.wrapper {
display: flex;
flex-direction: row;
height: 100vh;
width: 400vw;
transform: rotate(90deg) translateY(-100vh);
transform-origin: top left;
}
.slide {
height: 100vh;
width: 100vw;
}
.slide1 {
background-color: teal;
}
.slide2 {
background-color: tomato;
}
.slide3 {
background-color: slateblue;
}
.slide4 {
background-color: palevioletred;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<title>Horizonral scroll</title>
</head>
<body>
<img draggable="false" src="https://cdn3.iconfinder.com/data/icons/iconic-1/32/arrow_right_alt1-512.png" alt="arrow_right" width="70px" height="70px">
<div class="outer-wrapper">
<div class="wrapper">
<div class="slide slide1"></div>
<div class="slide slide2"></div>
<div class="slide slide3"></div>
<div class="slide slide4"></div>
</div>
</div>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
I tried using window.addEventListener('scroll') but not getting any scrolled value. I tried debugging Js code in chrome but function is not even invoking on scrolling.
window.addEventListener('scroll', () => {
console.log(Scrolled);
});
You need to set addEventListener on scroll of div.outer-wrapper and get scrollTop
document.getElementsByClassName("outer-wrapper")[0].addEventListener('scroll', function(e) {
var div = document.getElementsByClassName("outer-wrapper")[0].scrollTop;
console.log(div);
});
* {
padding: 0;
margin: 0;
}
#log {
position: fixed;
width: 500px;
height: 25px;
border: solid black 1px;
z-index: 999;
}
img{
position: fixed;
z-index: 999;
top: 50%;
left: 90vw;
transform: translate(0, -50%);
cursor: pointer;
user-select: none;
}
.outer-wrapper {
height: 100vw;
width: 100vh;
transform: rotate(-90deg) translateX(-100vh);
transform-origin: top left;
overflow-x: hidden;
overflow-y: scroll;
position: absolute;
scrollbar-width: none; /*---Firefox property---*/
-ms-overflow-style: none; /*---i.e. family---*/
}
::-webkit-scrollbar {
display: none; /*---Chrome and Safari*/
}
.wrapper {
display: flex;
flex-direction: row;
height: 100vh;
width: 400vw;
transform: rotate(90deg) translateY(-100vh);
transform-origin: top left;
}
.slide {
height: 100vh;
width: 100vw;
}
.slide1 {
background-color: teal;
}
.slide2 {
background-color: tomato;
}
.slide3 {
background-color: slateblue;
}
.slide4 {
background-color: palevioletred;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<title>Horizonral scroll</title>
</head>
<body>
<img draggable="false" src="https://cdn3.iconfinder.com/data/icons/iconic-1/32/arrow_right_alt1-512.png" alt="arrow_right" width="70px" height="70px">
<div class="outer-wrapper">
<div class="wrapper">
<div class="slide slide1"></div>
<div class="slide slide2"></div>
<div class="slide slide3"></div>
<div class="slide slide4"></div>
</div>
</div>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
You can use element.scrollTop and element.scrollLeft to get the vertical and horizontal offset, respectively, that has been scrolled. element can be document.body if you care about the whole page. You can compare it to element.offsetHeight and element.offsetWidth (again, element may be the body) if you need percentages.

Split screen more than twice button

I want a button that splits the screen when clicked. The button is on a html page called PF1.1.html and when the button is click i want it to spilt the screen but the new screen created to be a page named PF1.html and so on. No matter how many times u click the button it keeps creating split screen pages with the PF1.html.
This is the split screen test: https://jsfiddle.net/v1p5h9g7/1/
/* Split the screen in half */
.split {
height: 100%;
width: 50%;
position: fixed;
z-index: 1;
top: 0;
overflow-x: hidden;
padding-top: 20px;
}
/* Control the left side */
.left {
left: 0;
background-color: white;
}
/* Control the right side */
.right {
right: 0;
background-color: red;
}
/* If you want the content centered horizontally and vertically */
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
/* Style the image inside the centered container, if needed */
.centered img {
width: 150px;
border-radius: 50%;
}
<div class="split left">
<div class="centered">
<h2>Don't know how to make it open PF1.HTML and how to resize it after</h2>
</div>
</div>
<div class="split right">
<div class="centered">
<p>Test</p>
</div>
</div>
Here it is, i think you want something like this - here is the code mentioned and also you can check out this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Split screen on click</title>
<!--added text to remove the answer-->
<style>
*{
margin: 0px;
padding: 0px;
}
#container{
width: 100%;
/* height: auto; */
height: auto;
display: flex;
flex-direction: row;
/* flex-wrap: wrap; */
}
#child{
width: 200px;
height: 200px;
border: 2px solid #000000;
border-radius: 3px;
}
#clicker{
margin-top: 20px;
}
</style>
</head>
<body>
<div id="container">
<div id="child"></div>
</div>
<button id='clicker' onclick="spliter()">Click me to create a new element</button>
<script>
function spliter(){
var sec = document.createElement("DIV");
sec.setAttribute("id", "child");
document.getElementById("container").appendChild(sec);
}
</script>
</body>
</html>

how to save click event to local storage to hide popup from user. He need to click accept once. If he ll click cancel the popup should opens again

how to save click event to local storage to hide popup from user. He need to click accept once. If he ll click cancel the popup should opens again
https://jsfiddle.net/npdqq2dt/5/
<div id="overlay">
<div class="popup">
<div id="popup_terms">
blablabla
</div>
<button id="accept" type="button">accept</button>
<button id="cancel" type="button">cancel</button>
</div>
</div>
#overlay {
position: fixed;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.45);
z-index: 999;
-webkit-animation: fade .6s;
-moz-animation: fade .6s;
animation: fade .6s;
overflow: auto;
}
.popup {
color: #525252;
background: #0c2333;
top: 20%;
left: 0px;
right: 0;
font-size: 14px;
margin: auto;
width: 65%;
height: 600px;
min-width: 350px;
max-width: 100%;
position: absolute;
padding: 40px 65px;
z-index: 1000;
}
Can u provide the solution using JQuery ? thanks
You don't need jQuery to manipulate the local storage. Here a simple example:
$(function() {
if (localStorage.getItem('popup_accepted')) {
$('#overlay').remove();
} else {
$('#accept').click(function() {
localStorage.setItem('popup_accepted');
$('#overlay').remove();
});
$('#cancel').click(function() {
$('#overlay').remove();
});
}
});
I can't create a working snippet because we don't have access to localStorage in a snippet.
Using Javascript function to get and set cookie
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#overlay {
position: fixed;
top: 0;
left: 0;
display: none;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.45);
z-index: 999;
-webkit-animation: fade .6s;
-moz-animation: fade .6s;
animation: fade .6s;
overflow: auto;
}
.popup {
color: #525252;
background: #0c2333;
top: 20%;
left: 0px;
right: 0;
font-size: 14px;
margin: auto;
width: 65%;
height: 600px;
min-width: 350px;
max-width: 100%;
position: absolute;
padding: 40px 65px;
z-index: 1000;
}
</style>
</head>
<body>
<button id="btn">Open Overlay</button>
<div id="overlay">
<div class="popup">
<div id="popup_terms">
blablabla
</div>
<button id="accept" type="button">accept</button>
<button id="cancel" type="button">cancel</button>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script>
$(function () {
var storageName = 'rememberMe';
$('#btn').on('click', function () {
if (localStorage.getItem(storageName)) {
return false;
} else {
$('#overlay').show();
}
});
$('#accept').on('click', function () {
localStorage.setItem(storageName, true);
$('#overlay').hide();
});
$('#cancel').on('click', function () {
$('#overlay').hide();
});
});
</script>
</body>
</html>

Categories

Resources