JavaScript - Fullscreen API JavaScript Code

Topic:

Fullscreen API JavaScript Code

Solution:

Blow are the scripts.

HTML:

?

1 2 3 4 5 6 7

<p>   <label>Click the button below to toggle fullscreen</label><br>   <button id="btnFullscreen" type="button">Toggle Fullscreen</button> </p> <p> <img id="exampleImage" src="https://aftabhusain.files.wordpress.com/2016/06/my-wp-profile-page.png"> </p>

JS:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51

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('btnFullscreen').addEventListener('click', function() {   toggleFullscreen(); });   document.getElementById('exampleImage').addEventListener('click', function() {   toggleFullscreen(this); });   /* if (document.addEventListener) {     document.addEventListener('webkitfullscreenchange', exitHandler, false);     document.addEventListener('mozfullscreenchange', exitHandler, false);     document.addEventListener('fullscreenchange', exitHandler, false);     document.addEventListener('MSFullscreenChange', exitHandler, false); }   function exitHandler() {   if (!document.fullscreenElement && !document.mozFullScreenElement &&         !document.webkitFullscreenElement && !document.msFullscreenElement) {       jQuery('.click-to-full-scr').html('Full Screen');       jQuery('#toPopup_photodet').removeClass('done-fullscreen');   } }*/