How can I trigger jQuery events when entering or exiting fullscreen? - javascript

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()}}

Related

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.

Margin when in fullscreen

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.");
}

Don't quit fullscreen on click

I want an iframe to go fullscreen when i click a button. But i don't want to exit fullscreen on click. How to achieve this?
To enter fullscreen mode i use this code:
var elem = document.getElementById('gameiframe');
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.msRequestFullscreen) {
elem.msRequestFullscreen();
} else if (elem.mozRequestFullScreen) {
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
elem.webkitRequestFullscreen();
}
Update: seems like only Firefox quits fullscreen on click. How to turn it off ?

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();
}
}

Categories

Resources