Develop Reference

fullscreen is not working after a breakpoint in firefox debugger or after a call to the alert function

Example of Javascript function:
function openFullscreen() {
alert ("Full Screen Active!");
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.mozRequestFullScreen) { /* Firefox */
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) { /* IE/Edge */
elem.msRequestFullscreen();
}
}
It works with the Edge browser or if the alert function is omitted. Same problem, if a breakpoint is set at the beginning of the routine.
Also noted that the following example works with Edge but not with Firefox:
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_fullscreen2
Can someone tell me why this is so or am I doing something wrong?

How can I start fullscreen in safari using javascript?

I am using this code to start and stop fullscreen:
function fullscreen() {
full = document.getElementById("full");
if (!document.fullscreenElement && !document.mozFullScreen && !document.webkitIsFullScreen && !document.msFullscreenElement) {
elem = document.getElementById("body");
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.mozRequestFullScreen) {
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) {
elem.msRequestFullscreen();
}
} else {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
}
}
It works in every browser but Safari. I read that elem.webkitRequestFullscreen(); is for Safari. So how get I this to work in Safari? Whole Website: jnnx.de/sia.html

Fullscreen is not supported in Safari for iOS. Thanks to #GenericUser

You could make a simple app and use Apple’s WebKit framework. (If it is for internal use..)

If you're using Safari with iOS 12.1+ on an iPad, the fullscreen api has been enabled but hidden behind the "webkit" prefix (webkitRequestFullscreen, webkitExitFullscreen, etc).
To enter fullscreen in this way, you must (usually) make several interactions before it activate.
This API (as far as I can tell) has not been finalised, and has some odd behaviour and quirks. Given a few months it may change or be opened up to other devices and/or browsers, but for now only works on the iOS 12.1+ version of Safari on an iPad.
On devices running iOS 12.1+, this API can be disabled/enabled through the Safari settings page under "Settings > Safari > Advanced > Experimental Features > Toggle Fullscreen API".

Fullscreen toggle doesn't work on iOS mobile/tablet (Safari, Chrome and Firefox)

I have a problem for a fullscreen mode in a webapp on iOS mobile device (iPhone and IPad, all versions).
I have a button which call a toggle fullscreen function. This function work on all devices other than iOS.
My function :
function toggleFullScreen(e) {
if (!document.fullscreenElement && !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement && !window.navigator.standalone) { // 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);
}
$('body').css({'height': screen.height});
fullSreen = true;
} else {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}else if(document.cancelFullScreen){
document.cancelFullScreen();
}
$('body').css({'height': 'auto'});
fullSreen = false;
}
}
It does not work on Safari, Chrome and Firefox on iOS mobile/iPad, but the function is call (i try it with some alert message). I do not understand why, thx in advance !

Please try the below code. It's working fine in my system in all browsers of the iPhone.
HTML
<div class="video-banner-div">
<video class="video-bg" id="home_banner_video" playsinline="" autoplay="true" preload="">
<source src="url_of_your_video.mp4" type="video/mp4">
</video>
</div>
JS
vid = $('.video-banner-div video').get(0); // get the element of video tag
$(".full-screen-icon").on("click", function () {
// on click of the button call the toggle function
toggleFullScreen();
});
function toggleFullScreen() {
if (vid.requestFullScreen) {
vid.requestFullScreen();
} else if (vid.webkitRequestFullScreen) {
vid.webkitRequestFullScreen();
} else if (vid.mozRequestFullScreen) {
vid.mozRequestFullScreen();
} else if (vid.msRequestFullscreen) {
vid.msRequestFullscreen();
} else if (vid.webkitEnterFullscreen) {
vid.webkitEnterFullscreen(); //for iphone this code worked
}
}

You can verify at http://caniuse.com/fullscreen that iOS Safari does not offer a API for fullscreen, check this asnwer for more information
Full screen api HTML5 and Safari (iOS 6) . But html video elements can go fullscreen.
Take a look at https://brad.is/coding/BigScreen/ , is a good lib to handle fullscreen events.

Full Screen (F11 mode not ESC mode) in IE 11 using jquery or javascript

Please look at my following code for full-screen
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();
}
}
}
This code is working fine. But problem is that when i press "Esc" it is going in normal mode.
Basically what i want is when we press "F11" then it is going full screen and it is not going back in normal mode even after pressing "Esc".
So, i want to know how to press "F11" using jQuery ?

Finally got solution,
I have added this condition in starting of my function:
var hasAX = "ActiveXObject" in window;
if (hasAX)
var wscript = new ActiveXObject("WScript.Shell");
if (wscript !== null) {
wscript.SendKeys("{F11}");
}
}

call html5 fullscreen api from pixi.js

I would like to build a site using pixi.js
Using native html5 code I can call the fullscreen api of the browser by calling the below function onclick
var elem = document.getElementById("myvideo");
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.msRequestFullscreen) {
elem.msRequestFullscreen();
} else if (elem.mozRequestFullScreen) {
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
elem.webkitRequestFullscreen();
}
How can I make the screen fullscreen via pixi? Can anyone give me a sample?

Not sure if you're asking how to add click listeners in PIXI, or how to request full screen from a non-DOM element, such as a PIXI Sprite.
For the former, see this example: http://www.goodboydigital.com/pixi-js-gets-interactive/
Then you can do fullscreen the same way as you did above:
mySprite.click = function(e){
if(document.documentElement.requestFullscreen) {
document.documentElement.requestFullscreen();
} else if(document.documentElement.mozRequestFullScreen) {
document.documentElement.mozRequestFullScreen();
} else if(document.documentElement.webkitRequestFullscreen) {
document.documentElement.webkitRequestFullscreen();
} else if(document.documentElement.msRequestFullscreen) {
document.documentElement.msRequestFullscreen();
}
}