Starting fullscreen with Chrome by using onInputDown event for Text objects in Phaser enables fullscreen with margin on all sides. I found in Phaser examples that the same thing is happening with onDown event for game.input. http://phaser.io/examples/v2/display/fullscreen
I suspected my computer might be at fault but after asking a friend to try the example above he experienced something similar. The only difference was the background created by the margins.
Oddly enough if I were to call the same function that the onInputDown event from the Text object was calling but from a Button object instead there will be no margins. A proper fullscreen. Calling said function from an event listener added to html tags <p>, <label> and <button> etc. also works properly.
My question is: Why are margins created when enabling fullscreen in the way I explained in my first paragraph? Is there a way to remove those margins except for calling the function from a different source? If you get a proper fulllscreen from the example link using Chrome please add that in your answer.
//My fullscreen function
function ToggleFullScreen()
{
var elem = document.documentElement;
//Check if document is already in full screen or not.
if (document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement)
{
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
} //If document is not already in full screen: Check if the document has the ability to go fullscreen.
else if(document.fullscreenEnabled || document.webkitFullscreenEnabled || document.mozFullScreenEnabled ||document.msFullscreenEnabled)
{
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.msRequestFullscreen) {
elem.msRequestFullscreen();
} else if (elem.mozRequestFullScreen) {
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
elem.webkitRequestFullscreen();
}
}//If the document can not go full screen: Alert the user.
else
window.alert("Sorry. Your device or brower does not support full screen.");
}
Related
I'm experiencing an error when trying to make an SVG tag fullscreen using Javascript on my site. I've been told by others on the team that this used to work correctly, but has broken at some point in the past. On Firefox, the code works perfectly, and the SVG image becomes fullscreen, but on Chrome, the whole page goes fullscreen, and the SVG gets moved to the bottom left corner of the screen and seems to be placed on top of some of the other elements of the page.
I'm using the following code to handle the fullscreen action, which is hooked up to a button event listener:
function fullscreen() {
var element = document.getElementById("myFullscreenSVG");
var isFullScreen = (document.fullscreenElement && document.fullscreenElement !== null) ||
(document.webkitFullscreenElement && document.webkitFullscreenElement !== null) ||
(document.mozFullScreenElement && document.mozFullScreenElement !== null) ||
(document.msFullscreenElement && document.msFullscreenElement !== null);
if (!isFullScreen) {
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.mozRequestFullScreen) { /* Firefox */
element.mozRequestFullScreen();
} else if (element.webkitRequestFullScreen) { /* Chrome, Safari & Opera */
element.webkitRequestFullScreen();
} else if (element.msRequestFullscreen) { /* IE/Edge */
element.msRequestFullscreen();
} else {
console.log('Failed to enter fullscreen mode on dependency visualization SVG');
}
} else {
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();
} else {
showAlert("Exit fullscreen failed; Press [ESC] to exit");
console.log('Failed to exit fullscreen mode on dependency visualization SVG');
}
}
}
I've tried everything I could think of, such as adding CSS for webkit-fullscreen elements to make width and height 100%, position fixed, and top 0, as this seems to be what others have done, but so far nothing has worked. What might be causing this to work incorrectly on Chrome? Any ideas would be greatly appreciated.
I am using this javascript to make a website go fullscreen and exit fullscreen:
function ToggleFullscreen() {
elem = document.documentElement;
if (!document.fullscreenElement && !document.mozFullScreenElement &&
!document.webkitFullscreenElement && !document.msFullscreenElement) {
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.msRequestFullscreen) {
elem.msRequestFullscreen();
} else if (elem.mozRequestFullScreen) {
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
elem.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();
}
}
}
The problem is if the user has rotated their phone from landscape to portait at all during the pageview when you exit fullscreen the address bar doesn't reappear. This seems to be a bug as it works perfectly if they have not rotated the device prior. To get it back the user can ussually scroll up on page. However the content on the site I am currently making requires that scrolling is disabled so the user can't do that. So to them it just seems like the site has messed up and lost their address bar.
Can anybody think of a way to get the address bar back? I tried using "scrollTop = 0" and that didn't help. I even tried "scrollTop = 20" then after a delay "scrollTop = 0" and still no good. One thing that does bring it back is using "alert('message');". As you can imagine I don't want to make a message pop up every time somebody exits fullscreen though just incase they are in this state. Are there any other javascript functions that could potentially bring the address bar back just like an alert does? Or anything I could try to avoid this problem in the first place?
The only solution I found is to exit full screen mode after a delay after screen rotation:
screen.orientation.addEventListener('change', () => {
if (screen.orientation.type.startsWith('landscape')) {
document.documentElement.requestFullscreen();
}
else if (document.fullscreen) {
setTimeout(() => document.exitFullscreen(), 500);
}
});
I've Google my butt off and I haven't found a solution or a similar problem yet. (Maybe it's my Google Skills today) but I'm having a full-screen problem.
I'm using the code below to let my website go full screen.
function toggleFullscreen(elem) {
elem = elem || document.documentElement;
if (!document.fullscreenElement && !document.mozFullScreenElement &&
!document.webkitFullscreenElement && !document.msFullscreenElement) {
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.msRequestFullscreen) {
elem.msRequestFullscreen();
} else if (elem.mozRequestFullScreen) {
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
elem.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();
}
}
}
But when you go full screen, you get a white bar on top, and a white bar below the actual website, like this.
I've tried different ways of solving it, using :full-screen in the css and using different methods: html5 or JavaScript.
Check out the website and problem on CodePen right here.
Thank you for your time, hopefully somebody has an answer to this very annoying problem.
Add the below to your css
:-webkit-full-screen
{
background-color: red;
}
Similarly you can add for moz and ms.
Please check this link for more details
Full Screen API Tutorial
I am writing a widget for Adobe Captivate, which has to work in HTML5. This widget contains a button to toggle the full screen mode. Basically, the plugin looks like that:
function toggleFullscreen(elem) {
elem = elem || document.documentElement;
if (!document.fullscreenElement && !document.mozFullScreenElement &&
!document.webkitFullscreenElement && !document.msFullscreenElement) {
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.msRequestFullscreen) {
elem.msRequestFullscreen();
} else if (elem.mozRequestFullScreen) {
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
elem.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.getElementById("fullscreen").addEventListener("click", toggleFullscreen);
<button id="fullscren">Toggle full screen</button>
But the widget is inserted in an iframe, and this iframe does not have the allowfullscreen attribute, and therefore prevents the button to toggle the full screen mode.
I am looking for a way either to add the allowfullscreen attribute to the iframe by executing some Javascript from the inside of the iframe, either to publish the project with the correct configuration to automatically add this attribute.
I tried to use the Javascript accessor parent.document, but I get an error :
Uncaught DOMException: Blocked a frame with origin "null" from accessing a cross-origin frame.
Using the parent attribute in Javascript is enough. You can then add the allowfullscreen attribute with this line :
parent.document.getElementsByTagName('iframe')[0].setAttribute('allowFullScreen', 'true');
However, this does not work when displaying the published project from a local source (Cross-origin protection). It works fine when displayed from a webserver (even localhost).
I have a Fullscreen button on my page. I want to use it to make a target element fullscreen. I would like specific jQuery events (fullscreenOn/fullscreenOff) when fullscreen is entered and exited. I would also like the fullscreen button to be removed if the browser doesn't support fullscreen.
The only code I have is from the MDN article:
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();
}
But this doesn't provide on/off-specific events. How can I do that?
I wrote a jQuery function:
$.fn.fullscreen = function(target){
var elem = $(target)[0]; $d = $(document);
if(elem.requestFullscreen || elem.msRequestFullscreen || elem.mozRequestFullScreen || elem.webkitRequestFullscreen){
function FSon(){ $d.trigger('fullscreen').trigger('fullscreenOn').data('fullscreen',true); }
function FSoff(){ $d.trigger('fullscreen').trigger('fullscreenOff').data('fullscreen',false); }
$d.data('fullscreen',false)
.on('fullscreenchange',function(){
if(document.fullscreen) FSon();
else FSoff();
}).on('mozfullscreenchange',function(){
if(document.mozFullScreen) FSon();
else FSoff();
}).on('webkitfullscreenchange',function(){
if(document.webkitIsFullScreen) FSon();
else FSoff();
}).on('MSFullscreenChange',function(){
if(document.msFullscreenElement) FSon();
else FSoff();
});
this.click(function(){
if(elem.requestFullscreen){
elem.requestFullscreen();
}else if(elem.mozRequestFullScreen){
elem.mozRequestFullScreen();
}else if(elem.webkitRequestFullscreen){
elem.webkitRequestFullscreen();
}else if(elem.msRequestFullscreen){
elem.msRequestFullscreen();
}
});
}else{
this.remove();
}
};
It provides the following features:
Cross-browser (Unless the browser doesn't support requestFullscreen or its prefixed methods)
Issues events on $(document): fullscreen for on/off and fullscreenOn/fullscreenOff.
Adds jQuery .data to $(document): fullscreen is a boolean value.
You can call it like so:
$("#myButton").fullscreen("#elementToMakeFullscreen");
Here is the function compressed:
function n(){$d.trigger("fullscreen").trigger("fullscreenOn").data("fullscreen",true)}function r(){$d.trigger("fullscreen").trigger("fullscreenOff").data("fullscreen",false)}$d.data("fullscreen",false).on("fullscreenchange",function(){if(document.fullscreen)n();else r()}).on("mozfullscreenchange",function(){if(document.mozFullScreen)n();else r()}).on("webkitfullscreenchange",function(){if(document.webkitIsFullScreen)n();else r()}).on("MSFullscreenChange",function(){if(document.msFullscreenElement)n();else r()});this.click(function(){if(t.requestFullscreen){t.requestFullscreen()}else if(t.mozRequestFullScreen){t.mozRequestFullScreen()}else if(t.webkitRequestFullscreen){t.webkitRequestFullscreen()}else if(t.msRequestFullscreen){t.msRequestFullscreen()}})}else{this.remove()}}