I have a button to go in fullscreen mode, the buttons says ON or OFF, which works fine:
<div class="onoffswitch" onclick="fullscreen()">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch">
<label class="onoffswitch-label" for="myonoffswitch">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
But when I am in fulscreen and I press ESC, the button still says OFF So I tried to simulate a click effect:
document.getElementById("myonoffswitch").click();
I thought my problem was solved, but then I found out that the .click was also triggered when the fullscreen button is clicked. It will trigger the button twice.
Then I tried this to prevent the normal click reaction:
<div class="onoffswitch" onclick="fullscreen(); return false;">
But then nothing at all happend, the .click did not change the button anymore.
Though I understand why: The .click is just like a normal click and the normal click is returned as false.
I have searched and tried a lot, but I didn't find anything that worked for me.
This is my javascript at the moment:
function fullscreen() {
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();
}
}
}
document.addEventListener('fullscreenchange', exitHandler);
document.addEventListener('webkitfullscreenchange', exitHandler);
document.addEventListener('mozfullscreenchange', exitHandler);
document.addEventListener('MSFullscreenChange', exitHandler);
function exitHandler() {
// Any fullscreen change will trigger this function
// Normalscreen to fullscreen or fullscreen to normalscreen
// with the button or with ESC-key.
if (!document.fullscreenElement && !document.webkitIsFullScreen && !document.mozFullScreen && !document.msFullscreenElement) {
document.getElementById("myonoffswitch").click();
// This event is always trickered, but it's meant to be trickered when ESCAPE is used,
}
}
I made a fiddle but it doesn't work, I still post it because it's a more easy way to use the javascript: JsFiddle
And Because the fiddle didn't work, I will put it on my website untill the problem is solved: problem is solved
Let me know if something is not clear, thanks
[EDIT]
I solved it by myself
Updated JsFiddle
exitHandler, so everything work fine even exiting using escape. However once in fullscreen mode and after detecting a change (by clicking the button), yourexitHandlertrigger a secondclickevent on the button which toggle back to its same position.. Let me now if I am not clear enough..