Fullscreen not working in IE - javascript

So I have my slider module up and running but Internet Explorer 11 is not responding to the fullscreen button. Firefox and Chrome are working just fine. I found this code on Stack but still no difference. Any thoughts?
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 (elem.msRequestFullscreen) {
elem.msRequestFullscreen();
}
} else {
if (document.cancelFullScreen) {
document.cancelFullScreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
}
}
</script>
Sorry if this question has been answered. I haven't found the solution.

According to this site the fullscreen API is not supported in IE. There seem to be no information on whether this is something that will be supported by IE11 either.
According to MDN's article on fullscreen it seems that this technique is still be very much experimental for most browsers.
You could also try this
Internet Explorer full screen mode?
Set window to fullscreen (REAL fullscreen; F11 functionality) by javascript
<script type="text/javascript">
function max() {
var wscript = new ActiveXObject("Wscript.shell");
wscript.SendKeys("{F11}");
}
</script>
if you really want to have the full screen in internet explorer.... Try giving the slider wiidth and height 100% in jquery.

Related

How to use jQuery fullScreen in mobile? [duplicate]

I'm trying to make a div go fullscreen, when a user clicks a button on a website.
Only thing is, every browser seems to want to work except for Safari on IOS.
What will I need to do to be able to make it fullscreen? I've tried researching, but unable to find anything.
Heres my current code:
<script type="text/javascript">
function goFullscreen(id) {
var element = document.getElementById(id);
var isInFullScreen = (document.fullscreenElement && document.fullscreenElement !== null) ||
(document.webkitFullscreenElement && document.webkitFullscreenElement !== null) ||
(document.mozFullScreenElement && document.mozFullScreenElement !== null) ||
(document.msFullscreenElement && document.msFullscreenElement !== null);
var docElm = document.documentElement;
if (!isInFullScreen) {
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.webkitRequestFullScreen) {
element.webkitRequestFullScreen();
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen();
}
} else {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
}
}
</script>
As mentioned on many posts, there is no way to switch to fullscreen on IOS >=10 in Safari and Chrome. It is because the Fullscreen API is not supported:
Can I Use Full Screen API
open webpage in fullscreen in Safari on iOS
Full screen api HTML5 and Safari (iOS 6)
You have two possible tricks:
Inform the user to switch to landscape mode. Indeed, you can't hardcode this and iOS Chrome can't do this too (Prevent orientation change in iOS Safari).
if your webpage is exported in a web app and you configure the meta balizes correctly (Optimizing Full Screen Mobile Web App for iOS).

How can I display the entire web page in fullscreen and disable f11 and ESC buttons?

I'm doing an online quiz with PHP, HTML and Javascript. When the user clicks the "Start Quiz" button, the page must be shown in fullscreen, and the f11 and ESC buttons must be disabled to prevent users from exiting the fullscreen mode. How can I do that?
Here is the code for the fullscreen mode:
var elem = document.documentElement;
function openFullscreen() {
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();
}
}
function closeFullscreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
}
In a regular browser setting this is usually not possible due to the security implications.
You can use things like electron though: With electron you can create an application with "kiosk" mode, which basically does that.

Javascript fullscreen closes on changing page

I have a button that helps me to open a page in full screen. But when I leave the page the script closes the fullscreen.
Does someone know how I can stay fullscreen when I go to another page?
Here is my full script:
<script type="text/javascript">
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>
It cannot be done.
From - https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API
In addition, navigating to another page, changing tabs, or switching
to another application (using, for example, Alt-Tab) while in
fullscreen mode exits fullscreen mode as well.
Update -
F11 - makes browser into full screen mode which does not utilize Fullscreen API

Transitioning the browser to fullscreen revert to normal when clicking on a link

I'm building a web based management software, and want to add the option to enlarge it to fullscreen for just having as much space as possible.
To do this I've tried some jquery plugin and the following code
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();
}
}
}
The problem is that when I click on any link and the page reloads, it revert to normal mode.
This doesn't happen when clicking F11 on the keyboard.
It's an api's limit or there's a way to perfectly emulate the F11 mode?

fullscreen on click - Ext JS

How can I make my browser switch to fullscreen mode by clicking on a button, I'm looking for any type of solution, I mean based on Ext JS, Javascript, HTML5 or other tricks if you have one
Not widely supported but there’s https://developer.mozilla.org/en/DOM/Using_full-screen_mode
I have found this solution
var docElm = document.documentElement;
if (docElm.requestFullscreen) {
docElm.requestFullscreen();
}
else if (docElm.mozRequestFullScreen) {
docElm.mozRequestFullScreen();
}
else if (docElm.webkitRequestFullScreen) {
docElm.webkitRequestFullScreen();
}
and for cancelling fullscreen :
if (document.exitFullscreen) {
document.exitFullscreen();
}
else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
}
else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}
this work for me using ExtJS 4.0.7 with chrome
full explanation here.

Categories