We Keep Coding

Animate CC HTML5 - toggle fullscreen

I have this code (below) on a buton to force my HTML5 game to fullscreen, but I'd like to have it turn back also with the button - right now it only works using ESC key. Is it possbile?
this.fsbtn.addEventListener("click", doFullscreen);
function doFullscreen() {
var i;
var elem = document.getElementById("animation_container");
var fs = ["requestFullscreen", "webkitRequestFullscreen", "mozRequestFullScreen", "msRequestFullscreen"];
for (i = 0; i < 4; i++) {
if (elem[fs[i]]) {
elem[fs[i]]();
break;
}
}
}

Sure it's possible. Change your doFullscreen function to a toggle one that checks if it's fullscreen or not:
function toggleFullscreen(event) {
var element = document.body;
if (event instanceof HTMLElement) {
element = event;
}
var isFullscreen = document.webkitIsFullScreen || document.mozFullScreen || false;
element.requestFullScreen = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || function () {
return false;
};
document.cancelFullScreen = document.cancelFullScreen || document.webkitCancelFullScreen || document.mozCancelFullScreen || function () {
return false;
};
isFullscreen ? document.cancelFullScreen() : element.requestFullScreen();
}

Read the documentation here for fullscreen API
You can exit from fullscreen mode using functions listed below(for more read documentation)
In JS/HTML code you can add button with absolute position and high z-index. Write new click listener for added button and run cancelFullscreen function, that's all.
Example JS function for FullScreen mode:
function toggleFullScreen() {
if (!document.mozFullScreen && !document.webkitFullScreen) {
if (videoElement.mozRequestFullScreen) {
videoElement.mozRequestFullScreen();
} else {
videoElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
}
} else {
if (document.mozCancelFullScreen) {
videoElement.mozCancelFullScreen();
} else {
videoElement.webkitCancelFullScreen();
}
}
}
Working example you can see here: https://developer.mozilla.org/samples/domref/fullscreen.html

Fullscreen browser script

I have got a problem with my script making browser 's window to fullscreen. It's working for a single document ("document.body") but after click link to another site, browser closes fullscreen mode. Is it possible to change:
document.body
to something like this:
window.[...]
to make fullscreen mode pernamently like it is after press F11.
My script looking like that:
function toggleFullScreen() {
// ## The below if statement seems to work better ##
if((document.fullScreenElement && document.fullScreenElement !== null) || (document.msfullscreenElement && document.msfullscreenElement !== null) || (!document.mozFullScreen && !document.webkitIsFullScreen)) {
if ((document.fullScreenElement !== undefined && document.fullScreenElement === null) || (document.msFullscreenElement !== undefined && document.msFullscreenElement === null) || (document.mozFullScreen !== undefined && !document.mozFullScreen) || (document.webkitIsFullScreen !== undefined && !document.webkitIsFullScreen)) {
if (document.body.requestFullScreen) {
document.body.requestFullScreen();
} else if (document.body.mozRequestFullScreen) {
document.body.mozRequestFullScreen();
} else if (document.body.webkitRequestFullScreen) {
document.body.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
} else if (document.body.msRequestFullscreen) {
document.body.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();
}
}
}

How to hide the address bar of my site in small service

I am trying to hide the addressbar of my website in all small device browsers. How can I make it possible. Please refer to the image. Following is my code:
<meta name="ap[![enter image description here][1]][1]ple-mobile-web-app-capable" content="yes" />
if((Browser.Platform.ios) || (Browser.Platform.webos) && (Browser.safari)) {
window.addEventListener("load",function() {
setTimeout(function(){
window.scrollTo(0, 1);
}, 0);
});
}

<input type="button" value="click to toggle fullscreen" onclick="toggleFullScreen()">
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();
}
}
}

you can try media query in css.
ist of all
#media(max-width:768px){
div.class_name{
display:none;
}
}
try this code.

How to change to Fullscreen the entire webpage with confirm()?

I want that when click in "OK" in the confirm box the entire webpage go to fullscreen, but with this only get error TypeError: docelem.requestFullscreen is not a function. I tried of all but nothing...
var conf = confirm("Fullscreen mode?");
var docelem = document.documentElement;
if (conf == true) {
docelem.requestFullscreen();
}
else if (conf == true) {
docelem.mozRequestFullScreen();
}
else if (conf == true) {
docelem.webkitRequestFullScreen();
}
else if (conf == true) {
docelem.msRequestFullscreen();
}
Some solution? or is it not possible with confirm()? Because with a button works:
(function () {
var fullscreenon = document.getElementById("fullscreenbutton");//button Id
if (fullscreenon) {
fullscreenon.addEventListener("click", function () {
var docelem = document.documentElement;
if (docelem.requestFullscreen) {
docelem.requestFullscreen();
}
else if (docelem.msRequestFullscreen) {
docelem.msRequestFullscreen();
}
else if (docelem.mozRequestFullScreen) {
docelem.mozRequestFullScreen();
}
else if (docelem.webkitRequestFullScreen) {
docelem.webkitRequestFullScreen();
}
}, false);
}
})();

Firsty, your conditions are different between 2 samples. Right code is:
var conf = confirm("Fullscreen mode?");
var docelem = document.documentElement;
if (conf == true) {
if (docelem.requestFullscreen) {
docelem.requestFullscreen();
}
else if (docelem.mozRequestFullScreen) {
docelem.mozRequestFullScreen();
}
else if (docelem.webkitRequestFullscreen) {
docelem.webkitRequestFullscreen();
}
else if (docelem.msRequestFullscreen) {
docelem.msRequestFullscreen();
}
}
Secondly and importantly, you can't make fullscreen your page without a user interaction. This is a security restriction. If you trigger code above by a user click, it'll be work. For example:
document.onclick = function (argument) {
var conf = confirm("Fullscreen mode?");
var docelem = document.documentElement;
if (conf == true) {
if (docelem.requestFullscreen) {
docelem.requestFullscreen();
}
else if (docelem.mozRequestFullScreen) {
docelem.mozRequestFullScreen();
}
else if (docelem.webkitRequestFullScreen) {
docelem.webkitRequestFullScreen();
}
else if (docelem.msRequestFullscreen) {
docelem.msRequestFullscreen();
}
}
}
If you click anywhere on the page, fullscreen mode will be activated. More detail: https://stackoverflow.com/a/20533579/198062

Cross Browser fullscreen mode

In my app, I want users to be able to press a button or F11 to go full screen. However the call to browser to go full screen should go through my custom function as there is additional code which recalculates some variables.
The updated code & link demonstrate that the browser ignores our wrapper function & calls its own fullscreen function immediately with F11 press.
David Walsh has an intro but I cannot seem to be able to pull it off our custom function bit.
The demo works on Chrome but not on Firefox...
David Walsh article on Full screen API
document.addEventListener('keydown', keyInput, false);
var fullscreen_flag = false;
function keyInput(event) {
event.preventDefault();
console.log('user press key');
var code = event.keyCode || event.which;
if (code === 122) { // F11 pressed
requestFullScreen('key request');
}
}
function requestFullScreen(text) {
if (fullscreen_flag) {
exitFullscreen(text);
}
else {
triggerFullScreen(text);
}
}
function triggerFullScreen(text){
fullscreen_flag=true;
//alert('Fullscreen Enabled!');
console.log(text);
var elementDom = document.getElementsByTagName('body')[0];
elementDom.requestFullscreen = elementDom.requestFullscreen ||
elementDom.mozRequestFullScreen || elementDom.webkitRequestFullscreen ||
elementDom.msRequestFullscreen;
elementDom.requestFullscreen();
}
function exitFullscreen(text) {
console.log(text);
fullscreen_flag = false;
//alert('Exiting Fullsreen!');
document.exitFullscreen = document.exitFullscreen || document.mozCancelFullScreen || document.webkitExitFullscreen || document.msExitFullscreen;
document.exitFullscreen();
}

Now it should work.
<div onclick="exitFullScreen()" style='cursor: pointer'>Exit Full Screen</div>
<div onclick="triggerFullScreen()" style='cursor: pointer'>Enter Full Screen</div>
document.addEventListener('keydown', keyInput, false);
var fullscreen_flag = false;
function keyInput(event) {
var code = event.keyCode || event.which;
if (code === 122) { // F11 pressed
event.preventDefault();
requestFullScreen();
}
}
function requestFullScreen {
if (fullscreen_flag) {
exitFullscreen();
}
else {
triggerFullScreen();
fullscreen_flag = true;
}
}
document.triggerFullScreen=function(){
alert('Fullscreen Enabled!');
var elementDom = document.getElementsByTagName('body')[0];
elementDom.requestFullscreen = elementDom.requestFullscreen ||
elementDom.mozRequestFullScreen || elementDom.webkitRequestFullscreen ||
elementDom.msRequestFullscreen;
elementDom.requestFullscreen();
}
document.exitFullScreen=function() {
alert('Exiting Fullsreen!');
document.exitFullscreen = document.exitFullscreen || document.mozCancelFullScreen || document.webkitExitFullscreen || document.msExitFullscreen;
document.exitFullscreen();
}