Sources: How to Make the Window Full Screen with Javascript, Fullscreen API, Set window to fullscreen (REAL fullscreen; F11 functionality) by javascript.
|
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 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 |
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <style type="text/css"> body { margin: 0; } #element { margin: 40px auto 20px auto; height: 200px; width: 400px; background-color: #e9e9e9; font-size: 20px; padding: 40px 0 0 0; text-align: center; box-sizing: border-box; } #go-button { width: 200px; display: block; margin: 50px auto 0 auto; } /* webkit requires explicit width, height = 100% of sceeen */ /* webkit also takes margin into account in full screen also - so margin should be removed (otherwise black areas will be seen) */ #element:-webkit-full-screen { width: 100%; height: 100%; background-color: pink; margin: 0; } #element:-moz-full-screen { background-color: pink; margin: 0; } #element:-ms-fullscreen { background-color: pink; margin: 0; } /* W3C proposal that will eventually come in all browsers */ #element:fullscreen { background-color: pink; margin: 0; } </style> </head> <body> <div id="element"> <span>Full Screen Mode Disabled</span> <button id="go-button">Enable Full Screen</button> </div> </body> <script> /* Get into full screen */ function GoInFullscreen(element) { if(element.requestFullscreen) element.requestFullscreen(); else if(element.mozRequestFullScreen) element.mozRequestFullScreen(); else if(element.webkitRequestFullscreen) element.webkitRequestFullscreen(); else if(element.msRequestFullscreen) element.msRequestFullscreen(); } /* Get out of full screen */ function GoOutFullscreen() { if(document.exitFullscreen) document.exitFullscreen(); else if(document.mozCancelFullScreen) document.mozCancelFullScreen(); else if(document.webkitExitFullscreen) document.webkitExitFullscreen(); else if(document.msExitFullscreen) document.msExitFullscreen(); } /* Is currently in full screen or not */ function IsFullScreenCurrently() { var full_screen_element = document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement || null; // If no element is in full-screen if(full_screen_element === null) return false; else return true; } $("#go-button").on('click', function() { if(IsFullScreenCurrently()) GoOutFullscreen(); else GoInFullscreen($("#element").get(0)); }); $(document).on('fullscreenchange webkitfullscreenchange mozfullscreenchange MSFullscreenChange', function() { if(IsFullScreenCurrently()) { $("#element span").text('Full Screen Mode Enabled'); $("#go-button").text('Disable Full Screen'); } else { $("#element span").text('Full Screen Mode Disabled'); $("#go-button").text('Enable Full Screen'); } }); </script> </html> |