I want to hide cursor when my window get full width and once I click on esc key button my mouse cursor start appearing.
I am using following code to show/ hide cursor and to show window full width.
function toggleFullScreen(elem) {
if ((document.fullScreenElement !== undefined && document.fullScreenElement === null) || (document.msFullscreenElement !== undefined && document.msFullscreenElement === null) || (document.mozFullScreen !== undefined && !document.mozFullScreen) || (document.webkitIsFullScreen !== undefined && !document.webkitIsFullScreen)) {
if (elem.requestFullScreen) {
elem.requestFullScreen();
document.body.style.cursor = 'none'; // to hide cursor
} else if (elem.mozRequestFullScreen) {
elem.mozRequestFullScreen();
document.body.style.cursor = 'none'; // to hide cursor
} else if (elem.webkitRequestFullScreen) {
elem.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
document.body.style.cursor = 'none'; // to hide cursor
} else if (elem.msRequestFullscreen) {
elem.msRequestFullscreen();
document.body.style.cursor = 'none'; // to hide cursor
}
} else{
document.body.style.cursor = 'default'; // to show cursor
console.log('test');
}
}
HTML:
<body oncontextmenu="return false;" onkeydown="return false;" onmousedown="return false;" onclick="toggleFullScreen(document.body)">
</body>
CSS:
body {
BACKGROUND: #000080;
color: #fff;
font-family: 'Yantramanav', sans-serif;
margin: 0 auto;
width: 100%;
padding: 0;
overflow:hidden;
}
The best way to do this would be to hook onto the fullscreenchange event, then check the document.fullscreenElement.
The basic idea is that checkFullscreen will run no matter how the user gets into or out of fullscreen mode, so this will allow you to hide/show the cursor whenever that changes.
There are a few ways of hooking into events, but I'll stick with the method you're using in your code already, for simplicity.
<body onclick="toggleFullScreen(document.body)" onfullscreenchange="checkFullscreen"></body>
function toggleFullscreen(elem) { // simplified
if (document.fullscreenElement) {
elem.requestFullscreen();
}
else {
document.exitFullscreen(); // changed
}
}
function checkFullscreen() { // added
if (document.fullScreenElement) {
document.body.style.cursor = 'none';
}
else {
document.body.style.cursor = 'default';
}
}
You'll have to add in the browser prefix stuff, but this should point you in the right direction. You can find out more on the MDN page for fullscreen mode.
Related
I have the follow code, for make a IFRAME go to FullScreen with button click,
var button = document.querySelector('#container .button');
button.addEventListener('click', fullscreen);
// when you are in fullscreen, ESC and F11 may not be trigger by keydown listener.
// so don't use it to detect exit fullscreen
document.addEventListener('keydown', function (e) {
console.log('key press' + e.keyCode);
});
// detect enter or exit fullscreen mode
document.addEventListener('webkitfullscreenchange', fullscreenChange);
document.addEventListener('mozfullscreenchange', fullscreenChange);
document.addEventListener('fullscreenchange', fullscreenChange);
document.addEventListener('MSFullscreenChange', fullscreenChange);
function fullscreen() {
// check if fullscreen mode is available
if (document.fullscreenEnabled ||
document.webkitFullscreenEnabled ||
document.mozFullScreenEnabled ||
document.msFullscreenEnabled) {
// which element will be fullscreen
var iframe = document.querySelector('#container iframe');
// Do fullscreen
if (iframe.requestFullscreen) {
iframe.requestFullscreen();
} else if (iframe.webkitRequestFullscreen) {
iframe.webkitRequestFullscreen();
} else if (iframe.mozRequestFullScreen) {
iframe.mozRequestFullScreen();
} else if (iframe.msRequestFullscreen) {
iframe.msRequestFullscreen();
}
}
else {
document.querySelector('.error').innerHTML = 'Your browser is not supported';
}
}
function fullscreenChange() {
if (document.fullscreenEnabled ||
document.webkitIsFullScreen ||
document.mozFullScreen ||
document.msFullscreenElement) {
console.log('enter fullscreen');
}
else {
console.log('exit fullscreen');
}
}
<div id="container">
<div class="top-left">
<button class="button">Ver Ecrã Completo</button>
</div>
<iframe src="http://google.pt" Title="google" frameborder="0"></iframe>
<div class="error"></div>
</div>
I pretend disable refreshing/reload when I go to fullscreen and vice versa, how I missing and how can I make it?
ps: I have added google as example.
note: The Iframe to be added as SWF and JavaScript.
Solved!
I forget remove the follow code on primary code:
var iframe = document.querySelector('iframe');
iframe.src = iframe.src;
I'm working with chrome and I want a simple task. exiting fullscreen using code, not F11 key press.
Here are some documentations about how to implement it:
https://www.w3schools.com/jsref/met_element_exitfullscreen.asp
https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API
None of the above methods work. And also lots of non-working answers on Stackoverflow. Please help I really need to solve this.
Here is CodePen.
Here is the code I'm trying:
const button = document.getElementById('exitId');
button.addEventListener("click", function(){
// Javascript Code To Exit Fullscreen Goes Here
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) { /* Firefox */
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) { /* Chrome, Safari and Opera */
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) { /* IE/Edge */
document.msExitFullscreen();
}
});
<button id="exitId">Exit Fullscreen</button>
A simple function to toggle fullscreen in JavaScript. It work well on Firefox and Webkit browsers.
JavaScript Function
/**
* Toggle fullscreen function who work with webkit and firefox.
* #function toggleFullscreen
* #param {Object} event
*/
function toggleFullscreen(event) {
var element = document.body;
if (event instanceof HTMLElement) {
element = event;
}
var isFullscreen = document.webkitIsFullScreen || document.mozFullScreen || false;
element.requestFullScreen = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || function() {
return false;
};
document.cancelFullScreen = document.cancelFullScreen || document.webkitCancelFullScreen || document.mozCancelFullScreen || function() {
return false;
};
isFullscreen ? document.cancelFullScreen() : element.requestFullScreen();
}
<button onclick="toggleFullscreen();">Full Screen</button>
Note that in order to exit full screen using javascript - you have to also enter the fullscreen mode using javascript. If fullscreen was based on F11 - it will not be possible to exit it using javascript.
The reason is that when you enter fullscreen using javascript you actually moving specific part of your document into fullscreen (and not the entire application), while when you are in application-full screen mode - the entire application is in fullscreen.
If you are in fullscreen (application-wise) you still see other tabs. If you are in document/element fullscreen mode - there are no tabs/url/bookmarks bar etc.
Check the following code:
<div id="container">
<button id="toggle">Toggle Fullscreen</button>
</div>
====
button.addEventListener("click", function() {
if (document.fullscreenElement) {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
} else {
if (!document.mozFullScreen && !document.webkitFullScreen) {
if (container.requestFullscreen) {
container.requestFullscreen();
}
else if (container.mozRequestFullScreen) {
container.mozRequestFullScreen();
}
else if (container.webkitRequestFullScreen) {
container.webkitRequestFullScreen();
}
else if (container.msRequestFullscreen) {
container.msRequestFullscreen();
}
}
}
});
You can see a working solution here: https://jsfiddle.net/zpdwL8gt/4/
Checked on firefox & chrome # MacOS
It's not working fullscreen when triggering a click. It opens the new page when I clicked the Icon or image. The new page shows fullscreen without any click, but it's not changed the full screen.
<button id="test" onclick="launchFullscreen(document.documentElement);">Click Me</button>
var ele = document.getElementById('test');
ele.click();
function launchFullscreen(element) {
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen();
}
}
In newer versions of browsers, you can use this script.
Here's how to do it:
function requestFullScreen(element) {
// Supports most browsers and their versions.
var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen;
if (requestMethod) { // Native full screen.
requestMethod.call(element);
} else if (typeof window.ActiveXObject !== "undefined") { // Older IE.
var wscript = new ActiveXObject("WScript.Shell");
if (wscript !== null) {
wscript.SendKeys("{F11}");
}
} }
HTML Button:
<button onclick="requestFullScreen(document.body)">Go Fullscreen</button>
The user obviously needs to accept the fullscreen request first, and there is not possible to trigger this automatically on pageload, it needs to be triggered by a user (eg. a button)
I have this function tied to an onclick event of a button. It should check to see if the documentElement it should toggle full screen mode and swap the button image.
function toggleFS() {
var fsmode = (document.fullScreenElement && document.fullScreenElement !== null) || // alternative standard method
(document.mozFullScreen || document.webkitIsFullScreen);
var page = document.documentElement;
if(!fsmode) {
if(page.requestFullscreen) {
page.requestFullscreen();
} else if (page.mozRequestFullScreen) {
page.mozRequestFullScreen();
} else if (page.webkitRequestFullScreen) {
page.webkitRequestFullScreen();
}
document.getElementById("toggle-fs").innerHTML = '<img src="/images/nofs.png">';
} else {
if (page.exitFullscreen) {
page.exitFullscreen();
} else if (page.msExitFullscreen) {
page.msExitFullscreen();
} else if (page.mozCancelFullScreen) {
page.mozCancelFullScreen();
} else if (page.webkitExitFullscreen) {
page.webkitExitFullscreen();
}
document.getElementById("toggle-fs").innerHTML = '<img src="/images/fs.png">';
}
}
On the first click after page load, it works correctly and puts the page in fullscreen and switches the button to the exit fullscreen image.
On the second click, it replaces the image for the button but does not exit fullscreen. (Hitting 'ESC' still works.)
Any following clicks do nothing at all. So it is stuck in fullscreen with the go to fullscreen button.
This behavior is in Chrome 56.
Can anyone see where I've gone wrong here?
The functions to request full screen, such as webkitRequestFullScreen, are on document.documentElement, but the ones to exit full screen, such as webkitExitFullscreen, are just on document. The snippet below works properly on Chrome, Edge, and IE.
document.getElementById("toggle-fs").addEventListener("click", function() {
toggleFS()
});
function isFullScreen() {
return (document.fullScreenElement && document.fullScreenElement !== null) ||
(document.msFullscreenElement && document.msFullscreenElement !== null) ||
(document.mozFullScreen || document.webkitIsFullScreen);
}
function enterFS() {
var page = document.documentElement
if (page.requestFullscreen) page.requestFullscreen();
else if (page.mozRequestFullScreen) page.mozRequestFullScreen();
else if (page.msRequestFullscreen) page.msRequestFullscreen();
else if (page.webkitRequestFullScreen) page.webkitRequestFullScreen();
}
function exitFS() {
if (document.exitFullScreen) return document.exitFullScreen();
else if (document.webkitExitFullscreen) return document.webkitExitFullscreen();
else if (document.msExitFullscreen) return document.msExitFullscreen();
else if (document.mozCancelFullScreen) return document.mozCancelFullScreen();
}
function toggleFS() {
if (!isFullScreen()) {
enterFS();
document.getElementById("toggle-fs").innerHTML = '<img src="/images/nofs.png">';
} else {
exitFS();
document.getElementById("toggle-fs").innerHTML = '<img src="/images/fs.png">';
}
}
JsFiddle
Try this one
<button id="toggle-fs" onclick="toggleFullScreen()"><img src="/images/nofs.png"></button>
with...
document.getElementById("toggle-fs").style.display = "block";
Good luck!
I have following JS which used to make a page fullscreen after clicking on link:
// mozfullscreenerror event handler
function errorHandler() {
alert('mozfullscreenerror');
}
document.documentElement.addEventListener('mozfullscreenerror', errorHandler, false);
// toggle full screen
function toggleFullScreen() {
if (!document.fullscreenElement && // alternative standard method
!document.mozFullScreenElement && !document.webkitFullscreenElement) { // current working methods
if (document.documentElement.requestFullscreen) {
document.documentElement.requestFullscreen();
} else if (document.documentElement.mozRequestFullScreen) {
document.documentElement.mozRequestFullScreen();
} else if (document.documentElement.webkitRequestFullscreen) {
document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
}
} else {
if (document.cancelFullScreen) {
document.cancelFullScreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}
}
}
// keydown event handler
document.addEventListener('keydown', function(e) {
if (e.keyCode == 13 || e.keyCode == 70) { // F or Enter key
toggleFullScreen();
}
}, false);
Is there a way to make page scroll (overflow) be visible only in fullscreen mode, and when user cancel full screen by clicking same link again or by another way, overflow becomes hidden?
You could just use a class to represent "no overflow" or vice versa. And then just work it into your function, like so:
if (!document.fullscreenElement && !document.mozFullScreenElement && !document.webkitFullscreenElement) { // current working methods
document.body.className = document.body.className.replace(' no-scroll', '');
...
} else {
document.body.className += " no-scroll";
See this working example using the following method for "toggling" the class to turn scroll "on/off"
// add/remove no scroll class to body
function toggleNoScroll(off) {
// test if already exist:
var a = Array.prototype.indexOf.call(document.body.classList, 'no-scroll') + 1;
// remove if does exist, so as not to double up
document.body.className = document.body.className.replace(' no-scroll', '');
// add only if off IS False OR off is empty & it did not previously exist (thus "toggle")
if (off === false || (off !== true && !a)) document.body.className += " no-scroll";
return document.body.classList;
}
So then I have:
if (!document.fullscreenElement && !document.mozFullScreenElement && !document.webkitFullscreenElement) {
toggleNoScroll(true);
...
else {
toggleNoScroll(false);
You can add a class to your body element when you run the toggleFullscreen() function like this:
document.body.className += ' ' + 'fullScreened'
then add a css rule like this:
.fullScreened {
overflow:hidden;
}
Let me know if it works :)