I made an element take full screen by using the below method:
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
} else {
return;
}
It works well but I want to show another element when on the fullscreen mode.
The other element has position: fixed and z-index: 999999999 but it's not visible when on fullscreen mode.
Could anyone help me, please?
Below is the link to the example
https://stackblitz.com/edit/web-platform-z1phjd?file=index.html
So I want to show the blue element when the red element is full screen sized.
It seems it was once possible to solve this issue with z-index but its since been patched by newer browser releases - See this thread
I believe Tushar Vaghela's answer is your best chance of achieving your desired result, which is to include the elements you wish to overlay within the fullscreened element - See this thread.
Maybe a div surrounding all the fullscreen elements will work and then you can position the elements inside as you wish. See fiddle: https://jsfiddle.net/840urcsf/6/
The snippet doesn't enable the fullscreen, but here it goes:
(() => {
const btn = document.querySelector(".make-fullscreen");
btn.addEventListener("click", () => {
const element = document.querySelector(".fullscreen-container");
console.log(element);
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
} else {
return;
}
});
})();
body {
background: orange;
}
.fullscreen-element {
width: 400px;
height: 400px;
background: red;
}
.other-element {
width: 100px;
height: 100px;
padding: 24px;
background: blue;
position: fixed;
top: 60px;
left: 60px;
color: white;
}
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="fullscreen-container">
<div class="fullscreen-element">
<button class="make-fullscreen">Fullscreen</button>
</div>
<div class="other-element">
other element
</div>
</div>
<script src="script.js"></script>
</body>
</html>
Here is jsfiddle demo,
You can do it through dom manipulation by listening to fullscreenchange event and following these steps:
1-add the other-element element as child of fullscreen-element in full screen mode.
2-bring other-element back to its original location in the normal mode.
(() => {
const btn = document.querySelector(".make-fullscreen");
const element = document.querySelector(".fullscreen-element");
const other = document.querySelector(".other-element");
element.addEventListener("fullscreenchange", event => {
if (document.fullscreenElement) {
element.appendChild(other);
} else {
element.parentNode.insertBefore(other,element.nextSibling)
}
});
btn.addEventListener("click", () => {
if (element.requestFullscreen) {
element.requestFullscreen().catch(err => {
console.log(err);
});
});
})();
The full screen works here: https://jsfiddle.net/trentHarlem/7861L0ph/
(() => {
const element = document.querySelector('.fullscreen-element');
const other = document.querySelector('.other-element');
const btn = document.querySelector('.make-fullscreen');
btn.addEventListener('click', (event) => {
//event.preventDefault();
if (document.fullscreenElement) {
document.exitFullscreen();
} else {
element.requestFullscreen();
}
});
})();
body {
background: orange;
}
.fullscreen-element {
width: 400px;
height: 400px;
background: red;
}
.other-element {
width: 100px;
height: 100px;
padding: 24px;
z-index: 999999999999;
background: blue;
position: fixed;
top: 60px;
left: 60px;
color: white;
}
<div class="fullscreen-element">
<button class="make-fullscreen">TOGGLE Fullscreen</button>
<div class="other-element">other element</div>
</div>
how about simply move "other-element" to inside "fullscreen-element"? And change "fullscreen-element" position to relative.
(() => {
const btn = document.querySelector(".make-fullscreen");
btn.addEventListener("click", () => {
const element = document.querySelector(".fullscreen-element");
console.log(element);
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
} else {
return;
}
});
})();
body {
background: orange;
}
.fullscreen-element {
width: 400px;
height: 400px;
background: red;
position:relative;
}
.other-element {
width: 100px;
height: 100px;
padding: 24px;
z-index: 999999999999;
background: blue;
position: fixed;
top: 60px;
left: 60px;
color: white;
}
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="fullscreen-element">
<button class="make-fullscreen">Fullscreen</button>
<div class="other-element">
other element
</div>
</div>
<script src="script.js"></script>
</body>
</html>
Related
I'm trying to make slide-show website using intersectionObserver. Basically, i grep elements and listen for intersection event, then i want to set window.srollTo to element's offsetTop. I have tried window.scrollTo(0, 10), elem.scrollIntoView(), window.scrollBy(), but nothing is working at all.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title></title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body,
html {
position: ablolute;
-ms-overflow-style: none;
display: block;
height: 100vh;
width: 100%;
}
body::-webkit-scrollbar {
width: 0 !important;
}
.page {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="page">one</div>
<div class="page">two</div>
<div class="page">three</div>
<div class="page">four</div>
<script>
const pages = document.querySelectorAll('.page');
const observer = new IntersectionObserver(
entries => {
entries.forEach(entry => {
if (entry.isIntersecting == true) {
console.log(entry.target.offsetTop);
entry.target.scrollIntoView(top);
}
});
},
{threshold: 0.01},
);
pages.forEach(page => {
observer.observe(page);
});
</script>
</body>
</html>
Firstly scrollIntoView takes a Boolean or an options Object. I don't know what top is supposed to be since it's not in your code, but it's not correct.
Your scroll event is firing constantly and overriding your scrollIntoView. In order to stop this you can set the container's overflow property so that it no longer allows scrolling, disabling the event, and then re-enable it with a timer just before calling scrollIntoView.
entries.forEach(entry => {
if (entry.isIntersecting == true) {
console.log(entry.target.offsetTop);
document.body.setAttribute('style','overflow:hidden;');
setTimeout(function(){
document.body.setAttribute('style','overflow:visible;');
entry.target.scrollIntoView(true);
}, 250);
}
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title></title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body,
html {
position: absolute;
-ms-overflow-style: none;
display: block;
height: 100vh;
width: 100%;
}
body::-webkit-scrollbar {
width: 0 !important;
}
.page {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="page">one</div>
<div class="page">two</div>
<div class="page">three</div>
<div class="page">four</div>
<script>
const pages = document.querySelectorAll('.page');
const observer = new IntersectionObserver(
entries => {
entries.forEach(entry => {
if (entry.isIntersecting == true) {
console.log(entry.target.offsetTop);
document.body.setAttribute('style','overflow:hidden;');
setTimeout(function(){
document.body.setAttribute('style','overflow:visible;');
entry.target.scrollIntoView(true);
}, 250);
}
});
},
{threshold: 0.10},
);
pages.forEach(page => {
observer.observe(page);
});
</script>
</body>
</html>
Note There are likely better ways to do this without a timer - for instance a flag within a closure, etc, but this should give you an idea of what's causing the issue and how to get around it.
I have an issue with the backgroundColor property in JavaScript but my function keeps working, regardless of the error.
Can somebody explain, how this is happening?
Fiddle link
Thank you
JavaScript Code with error:
function surligne(champ, erreur)
{
if(erreur)
{
champ.style.backgroundColor = "#fba";
document.getElementById("messageErreur").style.display ="block";
}
else
{
champ.style.backgroundColor = "";
document.getElementById("messageErreur").style.display ="none";
}
Here is your error:
champ.addEventListener("blur", verifMail);
function verifMail(champ) {
change it to this:
champ.addEventListener("blur", verifMail);
function verifMail() {
Champ is already defined at the top of the file, by adding a parameter on the verifyMail function, you make it so that the function can no longer view the the champ variable at the top of the file and instead it sees the blur event.
The reason it does change color is because you call verifMail from the verifForm function, passing the champ parameter.
The loss of focus triggers the blur. It is odd that the blur comes first.that's why on focus out your function again is calling so your error happened. I've correct it with variable value hope it'll help you
If you change the alerts to console.log (or something that does not steal focus), you will see that the events fire correctly.
var modal = document.getElementById('maPopin');
var btn = document.getElementById("monBouton");
var span = document.getElementsByClassName("fermer")[0];
var champ = document.getElementById("mail");
var erreur = true;
btn.addEventListener("click", function() {
modal.style.display = "block";
});
span.addEventListener("click", function() {
modal.style.display = "none";
});
window.addEventListener("click", function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
});
champ.addEventListener("blur", verifMail);
champ.addEventListener("focus", verifMail);
function verifMail(champ)
{
var regex = /^[a-zA-Z0-9._-]+#[a-z0-9._-]{2,}\.[a-z]{2,4}$/;
if(!regex.test(champ.value))
{
surligne(champ, true);
return false;
}
else
{
surligne(champ, false);
return true;
}
}
function surligne(champ, erreur)
{ if(champ.type !="focus" && champ.type !=="blur"){
if(erreur)
{
champ.style.backgroundColor = "#fba";
document.getElementById("messageErreur").style.display ="block";
}
else
{
champ.style.backgroundColor = "";
}
}
document.getElementById("messageErreur").style.display ="none";
}
/* } */
champ.addEventListener("keyup", verifForm);
function verifForm()
{
var mailOk = verifMail(champ);
if(mailOk)
{
document.getElementById('submit1').disabled=0;
return true;
}
else
{
document.getElementById('submit1').disabled=1;
return false;
document.getElementById("messageErreur").style.display ="none";
}
}
body {font-family: Arial, Helvetica, sans-serif;}
/* Background pop-in */
.popin {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
}
/* Style de la pop-in */
.popin-style {
background-color: #FFFFFF;
margin: auto;
padding: 20px;
border: 1px solid #529D93;
width: 35%;
}
/* Bouton fermer */
.fermer {
color: #3f3f3f;
float: right;
font-size: 40px;
font-weight: bold;
}
.bob-style
{
width: 50%;
height: auto;
display: block;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.fermer:hover,
.fermer:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
#messageErreur
{
display: none;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
</head>
<body>
<h2>Exemple de Pop-in</h2>
<button id="monBouton">Qui sommes nous ?</button>
<div id="maPopin" class="popin">
<div class="popin-style">
<span class="fermer">×</span>
<p>Cet objectif a été réalisé par Guillaume et Nicolas... Alias Bob et Patrick </p>
<img src="http://www.chamalow-shop.com/images/t/tds/TDS-bob-patrick-geek-vert-g.gif" class="bob-style">
<form>
<label for="email">Veuillez saisir votre email :</label>
<input type="text" name="email" id="mail" placeholder="Email...">
<button type="submit" id="submit1" disabled="disabled">Envoyer</button>
<p id="messageErreur">Adresse email incorrecte</p>
</form>
</div>
</div>
<script src="myscripts.js"></script>
</body>
</html>
champ.style.backgroundColor = "";
the background color should be set to some value, how can it be blank ?
i need a draggable div not to go outside of second div frame, so far i managed to make a "collision" basically returning true or false if draggable div is inside the frame of other div. So the thing now is that i cant get this to work, i was trying to get it to a x = 90(example) when it hits the frame and few more examples , but i just can't get this to work. The draggable div doesn't want to go back to position.
Here is a JSFiddle: https://jsfiddle.net/kojaa/x80wL1mj/2/
<!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>Catch a ball</title>
</head>
<body>
<div class="catcherMovableArea" id="catcherMovableArea">
<div id="catcher" class="catcher"></div>
</div>
<script src="script.js"></script>
</body>
</html>
.catcherMovableArea {
position: absolute;
border: 1px solid black;
width: 1900px;
top: 90%;
height: 50px;
}
.catcher {
position: absolute;
width: 250px;
height: 30px;
border-radius: 10px;
background-color: black;
top: 20%;
}
let catcher = $("#catcher");
$(document).mousemove(function(e) {
catcher.position({
my: "left-50% bottom+50%",
of: e,
collision: "fit"
});
let catcherOffset = $(catcher).offset();
let CxPos = catcherOffset.left;
let CyPos = catcherOffset.top;
let catcherYInMovableArea, catcherXInMovableArea = true;
while(!isCatcherYinMovableArea(CyPos)){
catcherYInMovableArea = false;
break;
}
while(!isCatcherXinMovableArea(CxPos)){
catcherXInMovableArea = false;
break;
}
});
function isCatcherYinMovableArea(ypos){
if(ypos < 849.5999755859375 || ypos > 870.5999755859375) {
return false;
} else {
return true;
}
}
function isCatcherXinMovableArea(xpos){
if(xpos < 8 || xpos > 1655 ) {
return false;
} else {
return true;
}
}
By default, the collision option will prevent the element from being placed outside of the window. You want to prevent it from moving outside of a specific element.
To do this, use the within option to select which element should be used for containment.
Example:
let draggable = $("#draggable");
$(document).mousemove(function(e) {
draggable.position({
my: "left-50% bottom+50%",
of: e,
collision: "fit",
within: "#container"
});
});
#container { width: 200px; height: 100px; border-style: solid }
#draggable { width: 50px; height: 50px; background-color: black }
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://code.jquery.com/ui/1.12.0-rc.1/jquery-ui.js"></script>
<div id="container">
<div id="draggable"></div>
</div>
I tried to test changing backgroundColor and marginLeft on this simple example: https://jsfiddle.net/ntqLo6v0/2/
and couldn't make it work.
var collapsed = 0;
$('[data-toggle=collapse-button]').click(function() {
if (collapsed == 0) {
close();
} else {
open();
}
});
function close() {
document.getElementById("button").style.backgroundColor = "blue";
(document.getElementsByClassName("content")[0]).style.marginLeft = "20px";
collapsed = 1;
}
function open() {
document.getElementById("button").style.backgroundColor = "red";
(document.getElementsByClassName("content")[0]).style.marginLeft = "120px";
collapsed = 0;
}
.content {
background-color: green;
width: 200px;
height: 100px;
}
#button {
background-color: red;
width: 100px;
height: 50px;
margin: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="button" data-toggle="collapse-button">
button
</div>
<div class="content">
some content here
</div>
There is just a little issue: $('[data-toggle=collapse-button]').
You are using jQuery but do not define it. That's why you get a Uncaught ReferenceError: $ is not defined in the console.
Here is your updated fiddle where I added jQuery (in the resources left) in order to make your example running.
I'm trying to make the header fade out, then slide back in when you scroll past 100px, but the function fires every time you scroll anywhere past that point.
I don't want that to happen, I want it so that the function fires only once when you scroll past it and if you scroll again, even if you're past that point, nothing happens.
Check out my fiddle: http://jsfiddle.net/bazzle/6ykyjm0p/2/
Thanks in advance.
<header>
<div class="top">
This is the header
</div>
This is the point function should work.
</header>
html {
height: 200%;
}
header {
background-color: blue;
color: white;
width: 100%;
height: 300px;
}
.top{
height: 100px;
width: 100%;
border-bottom: 1px solid white;
display: block;
}
var stickyheader = function(){
if ($(window).scrollTop() > 100) {
$('header').hide(50, function(){
$(this).slideDown(1000);
});
}
else {
}
};
$(window).on('scroll',function(){
stickyheader();
});
Hi you can use a global variable as a flag to prevent the script from firing.
var flag = 0;
var stickyheader = function() {
if ($(window).scrollTop() > 100) {
if (flag == 0) {
$('header').hide(50, function() {
$(this).slideDown(1000);
flag = 1;
});
}
} else {
}
};
$(window).on('scroll', function() {
stickyheader();
});
html {
height:200%;
}
header {
background-color:blue;
color:white;
width:100%;
height:300px;
}
.top {
height:100px;
width:100%;
border-bottom:1px solid white;
display:block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<div class="top">This is the header</div>This is the point function should work.</header>
You can also reset flag = 0; in the else case if you want the code to execute everytime the user scroll beyond the point.
Hope this help.