FullScreen API Testing
|
1 2 |
I am using "body" as parent/root fullscreen element by select body "document.body".<br> I can use other element too: "document.getElementById('#elm')" for example. |
Status: YES: Your browser supports FullScreen
CODE
|
1 2 3 |
<input value="Go Fullscreen" id="fsbutton-test" type="button"> <input value="Exit Fullscreen" id="fsexit-test" type="button" style="display: none"> <p>Status: <span id="fsstatus-test" class="fullScreenSupported">YES: Your browser supports FullScreen</span></p> |
|
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 |
<script> /* Native FullScreen JavaScript API ------------- Assumes Mozilla naming conventions instead of W3C for now */ (function() { var fullScreenApi = { supportsFullScreen: false, isFullScreen: function() { return false; }, requestFullScreen: function() {}, cancelFullScreen: function() {}, fullScreenEventName: '', prefix: '' }, browserPrefixes = 'webkit moz o ms khtml'.split(' '); // check for native support if (typeof document.cancelFullScreen != 'undefined') { fullScreenApi.supportsFullScreen = true; } else { // check for fullscreen support by vendor prefix for (var i = 0, il = browserPrefixes.length; i < il; i++ ) { fullScreenApi.prefix = browserPrefixes[i]; if (typeof document[fullScreenApi.prefix + 'CancelFullScreen' ] != 'undefined' ) { fullScreenApi.supportsFullScreen = true; break; } } } // update methods to do something useful if (fullScreenApi.supportsFullScreen) { fullScreenApi.fullScreenEventName = fullScreenApi.prefix + 'fullscreenchange'; fullScreenApi.isFullScreen = function() { switch (this.prefix) { case '': return document.fullScreen; case 'webkit': return document.webkitIsFullScreen; default: return document[this.prefix + 'FullScreen']; } } fullScreenApi.requestFullScreen = function(el) { return (this.prefix === '') ? el.requestFullScreen() : el[this.prefix + 'RequestFullScreen'](); } fullScreenApi.cancelFullScreen = function(el) { return (this.prefix === '') ? document.cancelFullScreen() : document[this.prefix + 'CancelFullScreen'](); } } // jQuery plugin if (typeof jQuery != 'undefined') { jQuery.fn.requestFullScreen = function() { return this.each(function() { var el = jQuery(this); if (fullScreenApi.supportsFullScreen) { fullScreenApi.requestFullScreen(el); } }); }; } // export api window.fullScreenApi = fullScreenApi; })(); </script> |
|
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 |
<script> // do something interesting with fullscreen support var fsButton = document.getElementById('fsbutton-test'), fsElement = document.body, fsStatus = document.getElementById('fsstatus-test'), fsExit = document.getElementById('fsexit-test'); if (window.fullScreenApi.supportsFullScreen) { fsStatus.innerHTML = 'YES: Your browser supports FullScreen'; fsStatus.className = 'fullScreenSupported'; // handle button click fsButton.addEventListener('click', function() { window.fullScreenApi.requestFullScreen(fsElement); }, true); // handle exit fsExit.addEventListener('click', function() { window.fullScreenApi.cancelFullScreen() }, true); fsElement.addEventListener(fullScreenApi.fullScreenEventName, function() { if (fullScreenApi.isFullScreen()) { fsStatus.innerHTML = 'Whoa, you went fullscreen'; fsElement.style.overflowY = "scroll"; /* ini biar bisa scroll */ fsButton.style.display = 'none'; fsExit.style.display = 'block'; } else { fsStatus.innerHTML = 'Back to normal'; fsElement.style.overflowY = "unset"; /* backto normal tanpa scroll */ fsButton.style.display = 'block'; fsExit.style.display = 'none'; } }, true); } else { fsStatus.innerHTML = 'SORRY: Your browser does not support FullScreen'; } </script> |