We Keep Coding

Enter and exit fullscreen in browser using javascript

I'm working with chrome and I want a simple task. exiting fullscreen using code, not F11 key press.
Here are some documentations about how to implement it:
https://www.w3schools.com/jsref/met_element_exitfullscreen.asp
https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API
None of the above methods work. And also lots of non-working answers on Stackoverflow. Please help I really need to solve this.
Here is CodePen.
Here is the code I'm trying:
const button = document.getElementById('exitId');
button.addEventListener("click", function(){
// Javascript Code To Exit Fullscreen Goes Here
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();
}
});
<button id="exitId">Exit Fullscreen</button>

A simple function to toggle fullscreen in JavaScript. It work well on Firefox and Webkit browsers.
JavaScript Function
/**
* Toggle fullscreen function who work with webkit and firefox.
* #function toggleFullscreen
* #param {Object} event
*/
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();
}
<button onclick="toggleFullscreen();">Full Screen</button>

Note that in order to exit full screen using javascript - you have to also enter the fullscreen mode using javascript. If fullscreen was based on F11 - it will not be possible to exit it using javascript.
The reason is that when you enter fullscreen using javascript you actually moving specific part of your document into fullscreen (and not the entire application), while when you are in application-full screen mode - the entire application is in fullscreen.
If you are in fullscreen (application-wise) you still see other tabs. If you are in document/element fullscreen mode - there are no tabs/url/bookmarks bar etc.
Check the following code:
<div id="container">
<button id="toggle">Toggle Fullscreen</button>
</div>
====
button.addEventListener("click", function() {
if (document.fullscreenElement) {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
} else {
if (!document.mozFullScreen && !document.webkitFullScreen) {
if (container.requestFullscreen) {
container.requestFullscreen();
}
else if (container.mozRequestFullScreen) {
container.mozRequestFullScreen();
}
else if (container.webkitRequestFullScreen) {
container.webkitRequestFullScreen();
}
else if (container.msRequestFullscreen) {
container.msRequestFullscreen();
}
}
}
});
You can see a working solution here: https://jsfiddle.net/zpdwL8gt/4/
Checked on firefox & chrome # MacOS

js fullscreen toggle button goes to fullscreen but won't exit it

I have this function tied to an onclick event of a button. It should check to see if the documentElement it should toggle full screen mode and swap the button image.
function toggleFS() {
var fsmode = (document.fullScreenElement && document.fullScreenElement !== null) || // alternative standard method
(document.mozFullScreen || document.webkitIsFullScreen);
var page = document.documentElement;
if(!fsmode) {
if(page.requestFullscreen) {
page.requestFullscreen();
} else if (page.mozRequestFullScreen) {
page.mozRequestFullScreen();
} else if (page.webkitRequestFullScreen) {
page.webkitRequestFullScreen();
}
document.getElementById("toggle-fs").innerHTML = '<img src="/images/nofs.png">';
} else {
if (page.exitFullscreen) {
page.exitFullscreen();
} else if (page.msExitFullscreen) {
page.msExitFullscreen();
} else if (page.mozCancelFullScreen) {
page.mozCancelFullScreen();
} else if (page.webkitExitFullscreen) {
page.webkitExitFullscreen();
}
document.getElementById("toggle-fs").innerHTML = '<img src="/images/fs.png">';
}
}
On the first click after page load, it works correctly and puts the page in fullscreen and switches the button to the exit fullscreen image.
On the second click, it replaces the image for the button but does not exit fullscreen. (Hitting 'ESC' still works.)
Any following clicks do nothing at all. So it is stuck in fullscreen with the go to fullscreen button.
This behavior is in Chrome 56.
Can anyone see where I've gone wrong here?

The functions to request full screen, such as webkitRequestFullScreen, are on document.documentElement, but the ones to exit full screen, such as webkitExitFullscreen, are just on document. The snippet below works properly on Chrome, Edge, and IE.
document.getElementById("toggle-fs").addEventListener("click", function() {
toggleFS()
});
function isFullScreen() {
return (document.fullScreenElement && document.fullScreenElement !== null) ||
(document.msFullscreenElement && document.msFullscreenElement !== null) ||
(document.mozFullScreen || document.webkitIsFullScreen);
}
function enterFS() {
var page = document.documentElement
if (page.requestFullscreen) page.requestFullscreen();
else if (page.mozRequestFullScreen) page.mozRequestFullScreen();
else if (page.msRequestFullscreen) page.msRequestFullscreen();
else if (page.webkitRequestFullScreen) page.webkitRequestFullScreen();
}
function exitFS() {
if (document.exitFullScreen) return document.exitFullScreen();
else if (document.webkitExitFullscreen) return document.webkitExitFullscreen();
else if (document.msExitFullscreen) return document.msExitFullscreen();
else if (document.mozCancelFullScreen) return document.mozCancelFullScreen();
}
function toggleFS() {
if (!isFullScreen()) {
enterFS();
document.getElementById("toggle-fs").innerHTML = '<img src="/images/nofs.png">';
} else {
exitFS();
document.getElementById("toggle-fs").innerHTML = '<img src="/images/fs.png">';
}
}
JsFiddle

Try this one
<button id="toggle-fs" onclick="toggleFullScreen()"><img src="/images/nofs.png"></button>
with...
document.getElementById("toggle-fs").style.display = "block";
Good luck!

How to change onclick become onload?

I want to make the page fullscreen automatically without the need to click anything. I've tried to change this
<body onclick="toggleFullScreen()"> into <body onload="toggleFullScreen()">. but nothing happens; it doesn't work. :(
This is the javascript..
function errorHandler() {
alert('mozfullscreenerror');
}
document.documentElement.addEventListener('mozfullscreenerror', errorHandler, false);
// toggle full screen
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();
}
}
}

You can't execute any RequestFullScreen without a user gesture in any browser.
By the way your full screen function can be like this :
function fullScreen() {
var el = document.documentElement;
var rfs = el.requestFullScreen
|| el.webkitRequestFullScreen
|| el.mozRequestFullScreen;
rfs.call(el);
}

Javascript conflicts with Bootstrap functionality

I'm building a site that contains a Bootstrap Nav Tab section. The problem is my dev team is implementing an accessibility javascript that conflicts with Bootstrap. I am attaching a link to a codepen showing the problem. (See Below). Which its basically the nav tabs simply do not work. No click event is happening.
I don't have much experience with accessibility scripting but I am hoping someone here does and can tell me how to make bootstrap work without losing the functionality this accessibility script provides.
The script is designed to allow non-sighted users using screen readers (i.e. JAWS) to be able to tab around the menus and screen items based on what JAWS is telling them by reading the ARIAS and navigating through ROLES.
The Javascript is as follows:
$(function(){
$('.nav').setup_navigation();
});
var keyCodeMap = {
48:"0", 49:"1", 50:"2", 51:"3", 52:"4", 53:"5", 54:"6", 55:"7", 56:"8", 57:"9", 59:";",
65:"a", 66:"b", 67:"c", 68:"d", 69:"e", 70:"f", 71:"g", 72:"h", 73:"i", 74:"j", 75:"k", 76:"l",
77:"m", 78:"n", 79:"o", 80:"p", 81:"q", 82:"r", 83:"s", 84:"t", 85:"u", 86:"v", 87:"w", 88:"x", 89:"y", 90:"z",
96:"0", 97:"1", 98:"2", 99:"3", 100:"4", 101:"5", 102:"6", 103:"7", 104:"8", 105:"9"
}
$.fn.setup_navigation = function(settings) {
settings = jQuery.extend({
menuHoverClass: 'main-menu-item',
}, settings
);
// Add ARIA role to menubar and menu items
$(this).attr('role', 'menubar').find('li').attr('role', 'menuitem');
var top_level_links = $(this).find('> li > a');
//// Set tabIndex to -1 so that top_level_links can't receive focus until menu is open
//$(top_level_links).next('ul')
//.attr({ 'aria-hidden': 'true', 'role': 'menu' })
//.find('a');
// Adding aria-haspopup for appropriate items
$(top_level_links).each(function(){
if($(this).next('ul').length > 0)
$(this).parent('li').attr('aria-haspopup', 'true');
});
$(top_level_links).each(function(){
if($(this).next('ul').length > 0)
$(this).parent('ul').attr('aria-haspopup', 'true');
});
$(top_level_links).hover(function(){
$(this).closest('ul')
.attr('aria-hidden', 'false')
.find('.'+settings.menuHoverClass)
.attr('aria-hidden', 'true')
.removeClass(settings.menuHoverClass)
.find('a')
//.attr('tabIndex',-1);
$(this).next('ul')
.attr('aria-hidden', 'false')
.addClass(settings.menuHoverClass)
.find('a').attr('tabIndex',0);
});
$(top_level_links).focus(function(){
$(this).closest('ul')
.attr('aria-hidden', 'false')
.find('.'+settings.menuHoverClass)
.attr('aria-hidden', 'true')
.removeClass(settings.menuHoverClass)
.find('a')
//.attr('tabIndex',1);
$(this).next('ul')
.attr('aria-hidden', 'false')
.addClass(settings.menuHoverClass)
.find('a').attr('tabIndex',0);
});
// Bind arrow keys for navigation
$(top_level_links).keydown(function(e){
if(e.keyCode == 37) {
e.preventDefault();
// This is the first item
if($(this).parent('li').prev('li').length == 0) {
$(this).parents('ul').find('> li').last().find('a').first().focus();
} else {
$(this).parent('li').prev('li').find('a').first().focus();
}
} else if(e.keyCode == 38) {
e.preventDefault();
if($(this).parent('li').find('ul').length > 0) {
$(this).parent('li').find('ul')
.attr('aria-hidden', 'false')
.addClass(settings.menuHoverClass)
.find('a').attr('tabIndex',0)
.last().focus();
}
} else if(e.keyCode == 39) {
e.preventDefault();
// This is the last item
if($(this).parent('li').next('li').length == 0) {
$(this).parents('ul').find('> li').first().find('a').first().focus();
} else {
$(this).parent('li').next('li').find('a').first().focus();
}
} else if(e.keyCode == 40) {
e.preventDefault();
if($(this).parent('li').find('ul').length > 0) {
$(this).parent('li').find('ul')
.attr('aria-hidden', 'false')
.addClass(settings.menuHoverClass)
.find('a').attr('tabIndex',0)
.first().focus();
}
} else if(e.keyCode == 13 || e.keyCode == 32) {
// If submenu is hidden, open it
//e.preventDefault();
$(this).parent('li').find('ul[aria-hidden=true]')
.attr('aria-hidden', 'false')
.addClass(settings.menuHoverClass)
.find('a').attr('tabIndex',0)
.first().focus();
} else if(e.keyCode == 27) {
e.preventDefault();
$('.'+settings.menuHoverClass)
.attr('aria-hidden', 'true')
.removeClass(settings.menuHoverClass)
.find('a')
//.attr('tabIndex',-1);
} else {
$(this).parent('li').find('ul[aria-hidden=false] a').each(function(){
if($(this).text().substring(0,1).toLowerCase() == keyCodeMap[e.keyCode]) {
$(this).focus();
return false;
}
});
}
});
var links = $(top_level_links).parent('li').find('ul').find('a');
$(links).keydown(function(e){
if(e.keyCode == 38) {
e.preventDefault();
// This is the first item
if($(this).parent('li').prev('li').length == 0) {
$(this).parents('ul').parents('li').find('a').first().focus();
} else {
$(this).parent('li').prev('li').find('a').first().focus();
}
} else if(e.keyCode == 40) {
e.preventDefault();
if($(this).parent('li').next('li').length == 0) {
$(this).parents('ul').parents('li').find('a').first().focus();
} else {
$(this).parent('li').next('li').find('a').first().focus();
}
} else if(e.keyCode == 27 || e.keyCode == 37) {
e.preventDefault();
$(this)
.parents('ul').first()
.prev('a').focus()
.parents('ul').first().find('.'+settings.menuHoverClass)
.attr('aria-hidden', 'true')
.removeClass(settings.menuHoverClass)
.find('a')
//.attr('tabIndex',-1);
} else if(e.keyCode == 32) {
e.preventDefault();
window.location = $(this).attr('href');
} else {
var found = false;
$(this).parent('li').nextAll('li').find('a').each(function(){
if($(this).text().substring(0,1).toLowerCase() == keyCodeMap[e.keyCode]) {
$(this).focus();
found = true;
return false;
}
});
if(!found) {
$(this).parent('li').prevAll('li').find('a').each(function(){
if($(this).text().substring(0,1).toLowerCase() == keyCodeMap[e.keyCode]) {
$(this).focus();
return false;
}
});
}
}
});
//Hide menu if click or focus occurs outside of navigation
$(this).find('a').last().keydown(function(e){
if(e.keyCode == 9) {
// If the user tabs out of the navigation hide all menus
$('.'+settings.menuHoverClass)
.attr('aria-hidden', 'true')
.removeClass(settings.menuHoverClass)
.find('a')
//.attr('tabIndex',-1);
}
});
$(document).click(function () {
$('.' + settings.menuHoverClass).attr('aria-hidden', 'true').removeClass(settings.menuHoverClass).find('a').attr('tabIndex', 0);
});
$(this).click(function(e){
e.stopPropagation();
});
}
The HTML is in the pen link attached for the sake of not cluttering this question. Besides, you'll be able to test it there better.
CODEPEN DEMO HERE
p.s. Also, I am using a small Bootstrap accordion within one of the Tabs. (Not shown in the demo for simplicity purposes). So if you think of a fix that can globally fix all Bootstrap functionality rather than the navtabs only, I'll appreciate it even more, but I am not expecting it.
Thanks in advance

The problem is with this event handler at the very end of the code in the CodePen:
$(this).click(function(e){
e.stopPropagation();
});
That's explicitly preventing clicks on the menu tabs from bubbling up to any other event handler. Probably the Bootstrap tab code binds its event handlers at the top of the DOM.
It's not clear what the intention of that code is; it's not commented and it's not apparent from looking at the rest of the code. It may be just a gratuitous addition, in which case it's erroneous given the nature of that code.

iOS Spinning Wheel HTML5

I'm working on a webapp that will be used on iOS devices as well as Desktops (without touch).
We are using a bootstrap to make the site as responsive as possible.
We want to incoperate the spinning wheel known in iOS.
We will style it differently but not the functionality.
After some searching I came across this site:
http://cubiq.org/spinning-wheel
However this script only seems to work on touch capable devices. Would it be possible to edit the script so it will work on desktops too?
I found this in the script can I add a mouseClickHandler here?
handleEvent: function (e) {
console.log(e.type);
if (e.type == 'touchstart') {
this.lockScreen(e);
if (e.currentTarget.id == 'sw-cancel' || e.currentTarget.id == 'sw-done') {
this.tapDown(e);
} else if (e.currentTarget.id == 'sw-frame') {
this.scrollStart(e);
}
} else if (e.type == 'touchmove') {
this.lockScreen(e);
if (e.currentTarget.id == 'sw-cancel' || e.currentTarget.id == 'sw-done') {
this.tapCancel(e);
} else if (e.currentTarget.id == 'sw-frame') {
this.scrollMove(e);
}
} else if (e.type == 'touchend') {
if (e.currentTarget.id == 'sw-cancel' || e.currentTarget.id == 'sw-done') {
this.tapUp(e);
} else if (e.currentTarget.id == 'sw-frame') {
this.scrollEnd(e);
}
} else if (e.type == 'webkitTransitionEnd') {
if (e.target.id == 'sw-wrapper') {
this.destroy();
} else {
this.backWithinBoundaries(e);
}
} else if (e.type == 'orientationchange') {
this.onOrientationChange(e);
} else if (e.type == 'scroll') {
this.onScroll(e);
}
},

You could try using drag events, but they aren't supported well. Check out this MDN article and this one with more explanation on the events. You could also try using jQuery with for instance this plugin. Good luck!