WebGL full screen button using HTML and JavaScript? - javascript

WebGL full screen button using HTML and JavaScript?
I have searched this topic up many times, and could not find something that would work, however I did find a button that works for putting my page in full screen
<input type="button" value="click to toggle fullscreen" onclick="toggleFullScreen()">
<script>function toggleFullScreen() {
if ((document.fullScreenElement && document.fullScreenElement !== null) ||
(!document.mozFullScreen && !document.webkitIsFullScreen)) {
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();
}
}
}</script>
This does work, but not for WebGL content.
Here is my iframe that I use for loading WebGL content on my site.
<!DOCTYPE html>
<html>
<body>
<iframe src="WEBGL CONTENT IS HERE"></iframe>
</body>
</html>
If anyone could help that would be great!

Have you tried calling requestFullscreen to the iframe element?
I just wrote this quick test and it works:
<div>
<iframe src="https://bbc.com"></iframe>
</div>
<button onclick="toggle()">Make that iframe full screen</button>
<script>
function toggle() {
document.querySelector('iframe').requestFullscreen();
}
</script>
Hope this solves your issue.

Here is a Better Way to do this that work across all browser including safari also
Create a Function that make window full screen
const fullScreen = (invoker) => {
const fullscreenElement = document.fullscreenElement || document.webkitFullscreenElement;
if (!fullscreenElement) {
if (invoker.requestFullscreen) { invoker.requestFullscreen() }
else if (invoker.webkitRequestFullscreen) { invoker.webkitRequestFullscreen() }
} else {
if (document.exitFullscreen) { document.exitFullscreen() }
else if (document.webkitExitFullscreen) { document.webkitExitFullscreen()}
}
}
Now You can call on any event listener
const webgl = document.querySelector("canvas.webgl");
webgl.addEventListener('dblclick', () => {
// calling our fullscreen function here webgl is invoker
fullScreen(webgl);
})

Related

How to get out of fullscreen which is activated by pressing F11

I need feature of activating fullscreen and deactivating fullscreen and every thing works great when i use document.requestFullScreen and document.cancelFullScreen API. But when user activate fullscreen using F11 then document.cancelFullScreen API doesn't work as i wants.
I tried finding and testing many stackoverflow answers but none of those helped me. I wants to reverse/cancel the fullscreen effect of F11 key press done by user.
Here is demo i created where you can see that issue code sand box ,in this sandbox just open output in new separate window/tab, then press F11 which will activate fullscreen, now try to press 'Go Fullscreen' i provided which is not able to exit fullscreen effect.
I have tried this method it is working fine as on my try, I have add code bellow, also I have create new file in your code sand box called "test.html", and also here is the result link. Hope it will be the solution for your trouble.
<!DOCTYPE html>
<html>
<head>
<style>
.full-container {
background-color: yellow;
}
</style>
</head>
<body>
<div id="full-container" class="full-container">
Open this page in New Window to see effect of button
<button onclick="goFullscreen()">go FullScreen</button>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
var fullScreenMod = false;
$(document).on("keydown", function (ev) {
if (ev.keyCode === 27 || ev.keyCode === 122) {
goFullscreen();
return false;
}
});
/* Standard syntax */
document.addEventListener("fullscreenchange", function () {
fullScreenMod = !fullScreenMod;
});
/* Firefox */
document.addEventListener("mozfullscreenchange", function () {
fullScreenMod = !fullScreenMod;
});
/* Chrome, Safari and Opera */
document.addEventListener("webkitfullscreenchange", function () {
fullScreenMod = !fullScreenMod;
});
/* IE / Edge */
document.addEventListener("msfullscreenchange", function () {
fullScreenMod = !fullScreenMod;
});
function goFullscreen() {
console.log("fullscreen called");
let topContainer = document.getElementById("full-container");
let isWholeFullScreen = fullScreenMod;
if (isWholeFullScreen == false) {
isWholeFullScreen = !isWholeFullScreen;
if (topContainer.requestFullScreen) {
topContainer.requestFullScreen();
} else if (topContainer.mozRequestFullScreen) {
topContainer.mozRequestFullScreen();
} else if (topContainer.webkitRequestFullScreen) {
topContainer.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
} else if (topContainer.msRequestFullscreen) {
topContainer.msRequestFullscreen();
}
} else {
isWholeFullScreen = !isWholeFullScreen;
if (document.exitFullScreen) {
document.exitFullScreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
}
}
</script>
</html>

Firefox sometimes doesn't display image completely in fullscreen

At the moment I am trying to display an image in fullscreen via javascript. (Fullscreen API - https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API)
Javascript code:
var enterFullscreen = function(el) {
if(el.requestFullscreen) {
el.requestFullscreen();
} else if(el.msRequestFullscreen) {
el.msRequestFullscreen();
} else if(el.mozRequestFullScreen) {
el.mozRequestFullScreen();
} else if(el.webkitRequestFullscreen) {
el.webkitRequestFullscreen();
} else {
noFullscreenSupport();
}
var exitFullscreen = function() {
if(document.exitFullscreen) {
document.exitFullscreen();
} else if(document.msExitFullscreen) {
document.msExitFullscreen();
} else if(document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if(document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else {
noFullscreenSupport();
}
var initFullScreenButtons = function() {
$('.fullScreenButton').each(function(e) {
$(this).bind('click', function() {
if((window.innerWidth === screen.width && window.innerHeight === screen.height) || (window.fullScreen)) {
exitFullscreen();
} else {
enterFullscreen(document.documentElement);
}
});
});
I get the fullscreen buttons and bind them to a click event which calls the function to enter the fullscreen.
Images:
Without fullscreen
Fullscreen
The result is that the image sometimes displays in fullscreen or in a semi-fullscreen, where the background of the page is displayed on the bottom of the page with the width/height of browser-taskbar and windows-taskbar.
Furthermore, as soon as I try to use the developer tool of the browser the visual bug dissappears.
I found the solution for my problem. Instead of passing document.documentElement (root-element) I have to pass document.body (body-element) to the function.

Display page in fullscreen using JS

I want to display my page in fullscreen when it opens (WITHOUT user input). How can I do that?
I tried this code, but it doesnt't really work
function fullScreen(element) {
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.webkitrequestFullscreen) {
element.webkitRequestFullscreen();
} else if (element.mozRequestFullscreen) {
element.mozRequestFullscreen();
}
}
var html = document.documentElement;
fullScreen(html);
Today (6/2018) it's not possible to call fullscreen methods without an event fired by user interaction. As doc said:
Fullscreen requests need to be called from within an event handler or
otherwise they will be denied.
https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API We can't emulate that interaction. This example shows that behavior:
<div id="somediv">
content
</div>
<script>
var div = document.getElementById("somediv");
function toggleFullScreen() {
if (!document.mozFullScreen && !document.webkitFullScreen) {
if (div.mozRequestFullScreen) {
div.mozRequestFullScreen();
} else {
div.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
}
} else {
if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else {
document.webkitCancelFullScreen();
}
}
}
document.addEventListener("click", function(e) {
console.log("click");
toggleFullScreen();
}, false);
div.click();
</script>
This example shows that console.log("click"); was executed without interaction but fullScreen is denied. If user perform a click (user event), fullScreen is allowed.

How to make the title bar, minimize button and maximize button invisible on a web page in javascript?

I am doing a project on an online examination site. I wanted to make the title bar, minimize button and windows taskbar of the browser invisible when a candidate is clicking to attend the exam. Does anyone know how to do this ?
This can work for Firefox, Google Chrome, Safari, Opera, and IE 11+.
The below code is implemented using fullscreen API. It also toggle the fullscreen using user interaction. You can also detect the current status of fullscreen.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script language="javascript" type="text/javascript">
function toggleFullScreen() {
if (!document.fullscreenElement && // alternative standard method
!document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement ) { // current working methods
if (document.documentElement.requestFullscreen) {
document.documentElement.requestFullscreen();
} else if (document.documentElement.msRequestFullscreen) {
document.documentElement.msRequestFullscreen();
} else if (document.documentElement.mozRequestFullScreen) {
document.documentElement.mozRequestFullScreen();
} else if (document.documentElement.webkitRequestFullscreen) {
document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
}
} else {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}
}
document.addEventListener("fullscreenchange", function () {
fullscreenState.innerHTML = (document.fullscreen)? "on" : "not ";
}, false);
document.addEventListener("mozfullscreenchange", function () {
fullscreenState.innerHTML = (document.mozFullScreen)? "on" : "not ";
}, false);
document.addEventListener("webkitfullscreenchange", function () {
fullscreenState.innerHTML = (document.webkitIsFullScreen)? "on" : "not ";
}, false);
document.addEventListener("msfullscreenchange", function () {
fullscreenState.innerHTML = (document.msFullscreenElement)? "on" : "not ";
}, false);
</script>
</head>
<body>
<a href="javascript:void(0);" onclick="toggleFullScreen();">
Open in Full Screen Window</a>
<p>Fullscreen state: I'm <b id="fullscreenState"> not </b> fullscreen</p>
</body>
</html>
As you are using this for online examination follow below steps
as by default status is 'no fullscreen'.
After making page to fullscreen start tracking user interaction with browser fullscreen using this status. If user changes back to normal, then discard user from giving exam/make as malpractice, etc.
All you have to do is check the request_access for fullscreen.
ref:- https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API

How to make auto click?

I want when my webpage is loading it will be auto fullscreen without clicking on the body.You can take a look at my website that I want to make a change: TV. When you click it anywhere, it will be fullscreen. But I want to make it automatically fullscreen without click anything. I was wondering if I could use auto click to change onClick on the body? Because using onload nothing happened. Can you help me?
I only use <body onclick="toggleFullScreen()"> in my html document.
And this is the javascript of toggleFullScreen:
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();
}
}
}
If you want to stick to javascript, then try this.
<script type="text/javascript">
window.onload = maxWindow;
function maxWindow() {
window.moveTo(0, 0);
if (document.all) {
top.window.resizeTo(screen.availWidth, screen.availHeight);
}
else if (document.layers || document.getElementById) {
if (top.window.outerHeight < screen.availHeight || top.window.outerWidth < screen.availWidth) {
top.window.outerHeight = screen.availHeight;
top.window.outerWidth = screen.availWidth;
}
}
}
</script>
put it like this before body tag,
<script>
$(document).ready(function(){
toggleFullScreen();
});
</script>

Categories

Resources