Last active
October 2, 2015 10:12
-
-
Save allcaps/81be859990ab7a0e50ef to your computer and use it in GitHub Desktop.
JS fullscreen example http://stackoverflow.com/questions/1125084/how-to-make-in-javascript-full-screen-windows-stretching-all-over-the-screen#answer-7525760
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html> | |
| <head> | |
| <style> | |
| #container { | |
| border: 10px solid red; | |
| padding: 10px; | |
| } | |
| #container.fullscreen { | |
| height: 100%; | |
| width: 98%; | |
| margin: 0 20px; | |
| background-color: white; | |
| z-index: 2; | |
| } | |
| #container.fullviewport { | |
| background-color: white; | |
| z-index: 2; | |
| position: absolute; | |
| top: 0; | |
| bottom: 0; | |
| left: 0; | |
| right: 0; | |
| } | |
| </style> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> | |
| <script type="text/javascript"> | |
| // Document load and own scope. | |
| $(function() { | |
| // Modern browsers and IE with ActiveX enabled (ActiveX is disabled by default). | |
| function cancelFullScreen(el) { | |
| document.getElementById('container').removeAttribute("class"); // Remove the fullscreen class. Note this removes ALL classes. | |
| var requestMethod = el.cancelFullScreen || el.webkitCancelFullScreen || el.mozCancelFullScreen || el.exitFullscreen; | |
| if (requestMethod) { // cancel full screen. | |
| requestMethod.call(el); | |
| } else if (typeof window.ActiveXObject !== "undefined") { // Older IE. | |
| var wscript = new ActiveXObject("WScript.Shell"); | |
| if (wscript !== null) { | |
| wscript.SendKeys("{F11}"); | |
| } | |
| } | |
| } | |
| function requestFullScreen(element) { | |
| element.className = 'fullscreen'; // Add fullscreen class. Note: this removes other classes. | |
| // Supports most browsers and their versions. | |
| var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullscreen; | |
| if (requestMethod) { // Native full screen. | |
| requestMethod.call(element); | |
| } else if (typeof window.ActiveXObject !== "undefined") { // Older IE. | |
| var wscript = new ActiveXObject("WScript.Shell"); | |
| if (wscript !== null) { | |
| wscript.SendKeys("{F11}"); | |
| } | |
| } | |
| } | |
| function toggleFullScreen() { | |
| var elem = document.getElementById('container'); | |
| var isInFullScreen = (document.fullScreenElement && document.fullScreenElement !== null) || (document.mozFullScreen || document.webkitIsFullScreen); | |
| if (isInFullScreen) { | |
| cancelFullScreen(document); | |
| } else { | |
| requestFullScreen(elem); | |
| } | |
| return false; | |
| } | |
| // Simple CSS based fullviewport. | |
| $('#button').click(function (event) { | |
| event.preventDefault(); | |
| toggleFullScreen(); | |
| }); | |
| // https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API#Browser_compatibility | |
| // Only modern browsers. | |
| // | |
| // Make the fullscreen button tigger the js | |
| // var a = document.getElementById("button"); | |
| // a.onclick = function(e) { | |
| // e.preventDefault(); | |
| // console.log('clicked'); | |
| // toggleFull(); | |
| // return false; | |
| // } | |
| // | |
| // function toggleFullScreen() { | |
| // if (!document.fullscreenElement && // alternative standard method | |
| // !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement ) { // current working methods | |
| // if (document.documentElement.requestFullscreen) { | |
| // document.documentElement.requestFullscreen(); | |
| // } else if (document.documentElement.msRequestFullscreen) { | |
| // document.documentElement.msRequestFullscreen(); | |
| // } else if (document.documentElement.mozRequestFullScreen) { | |
| // document.documentElement.mozRequestFullScreen(); | |
| // } else if (document.documentElement.webkitRequestFullscreen) { | |
| // document.documentElement.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(); | |
| // } | |
| // } | |
| // } | |
| // Simple CSS based fullviewport. | |
| $('#button2').click(function (event) { | |
| event.preventDefault(); | |
| var container = $('#container'); | |
| if (container.hasClass('fullviewport')) { | |
| container.removeClass('fullviewport'); | |
| } else { | |
| container.addClass('fullviewport'); | |
| } | |
| }); | |
| }); | |
| </script> | |
| </head> | |
| <body> | |
| <h1>Content fullscreen example</h1> | |
| <p>For both modern browsers (html5) and older IE (ActiveX) fullscreen.</p> | |
| <div id="container"> | |
| <p> | |
| We want the stuff in this container to become fullscreen. | |
| </p> | |
| <p> | |
| <a id="button" href="some_fallback_for_peeps_without_js.html"> | |
| Toggle true fullscreen | |
| </a> | |
| </p> | |
| <p> | |
| <a id="button2" href="some_fallback_for_peeps_without_js.html"> | |
| Toggle viewport 'fullscreen' | |
| </a> | |
| </p> | |
| </div> | |
| <p> | |
| Id's and classes in this example are hard coded. We should pass them along. | |
| </p> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment