dElmARk Admin
Posts : 92 Join date : 09/04/2012
| Subject: [JS] Web Browser FullScreen API + SCROLL via DIV&CSS Fri Feb 28, 2014 9:26 pm | |
| - Code:
-
<!DOCTYPE html> <html> <head> <title>FullScreen API</title> <style> body { background: #F3F5FA; } #container { width: 600px; padding: 30px; background: #F8F8F8; border: solid 1px #ccc; color: #111; margin: 20px auto; border-radius: 3px; } #specialstuff { background: #33e; padding: 20px; margin: 20px; color: #fff; } #specialstuff a { color: #eee; } #fsstatus { background: #e33; color: #111; } #fsstatus.fullScreenSupported { background: #3e3; } #a{ border: 2px solid gray; padding: 5px; background: white; width: 100%; height: 100%; overflow-y: scroll; } </style> </head> <body> <center> <div id="a"> <h1>FullScreen API Testing</h1> <div id="specialstuff"> <p>Inside here is special stuff which will go fullscreen</p> <p>As of 10/20/2011, you'll need Safari 5.1, <a href="http://tools.google.com/dlpage/chromesxs">Chrome Canary</a>, or <a href="http://nightly.mozilla.org/">Firefox Nightly</a> <p>Status: <span id="fsstatus"></span> </div> badger<br><br>badger<br><br>badger<br><br>badger<br><br>badger<br><br> mushroom<br><br>mushroom<br><br> a badger<br><br>badger<br><br>badger<br><br>badger<br><br>badger<br><br> badger<br><br>badger<br><br>badger<br><br>badger<br><br>badger<br><br> mushroom<br><br>mushroom<br><br> a badger<br><br>badger<br><br>badger<br><br>badger<br><br>badger<br><br> badger<br><br>badger<br><br>badger<br><br>badger<br><br>badger<br><br> mushroom<br><br>mushroom<br><br> a badger<br><br>badger<br><br>badger<br><br>badger<br><br>badger<br><br> badger<br><br>badger<br><br>badger<br><br>badger<br><br>badger<br><br> mushroom<br><br>mushroom<br><br> a badger<br><br>badger<br><br>badger<br><br>badger<br><br>badger<br><br> badger<br><br>badger<br><br>badger<br><br>badger<br><br>badger<br><br> mushroom<br><br>mushroom<br><br> a badger<br><br>badger<br><br>badger<br><br>badger<br><br>badger<br><br> badger<br><br>badger<br><br>badger<br><br>badger<br><br>badger<br><br> mushroom<br><br>mushroom<br><br> a badger<br><br>badger<br><br>badger<br><br>badger<br><br>badger<br><br> badger<br><br>badger<br><br>badger<br><br>badger<br><br>badger<br><br> mushroom<br><br>mushroom<br><br> a badger<br><br>badger<br><br>badger<br><br>badger<br><br>badger<br><br> badger<br><br>badger<br><br>badger<br><br>badger<br><br>badger<br><br> mushroom<br><br>mushroom<br><br> a badger<br><br>badger<br><br>badger<br><br>badger<br><br>badger<br><br> badger<br><br>badger<br><br>badger<br><br>badger<br><br>badger<br><br> mushroom<br><br>mushroom<br><br> a badger<br><br>badger<br><br>badger<br><br>badger<br><br>badger<br><br> badger<br><br>badger<br><br>badger<br><br>badger<br><br>badger<br><br> mushroom<br><br>mushroom<br><br> a badger<br><br>badger<br><br>badger<br><br>badger<br><br>badger<br><br> badger<br><br>badger<br><br>badger<br><br>badger<br><br>badger<br><br> mushroom<br><br>mushroom<br><br> a badger<br><br>badger<br><br>badger<br><br>badger<br><br>badger<br><br> badger<br><br>badger<br><br>badger<br><br>badger<br><br>badger<br><br> mushroom<br><br>mushroom<br><br> a badger<br><br>badger<br><br>badger<br><br>badger<br><br>badger<br><br> badger<br><br>badger<br><br>badger<br><br>badger<br><br>badger<br><br> mushroom<br><br>mushroom<br><br> a badger<br><br>badger<br><br>badger<br><br>badger<br><br>badger<br><br> badger<br><br>badger<br><br>badger<br><br>badger<br><br>badger<br><br> mushroom<br><br>mushroom<br><br> a badger<br><br>badger<br><br>badger<br><br>badger<br><br>badger<br><br> badger<br><br>badger<br><br>badger<br><br>badger<br><br>badger<br><br> mushroom<br><br>mushroom<br><br> a badger<br><br>badger<br><br>badger<br><br>badger<br><br>badger<br><br> badger<br><br>badger<br><br>badger<br><br>badger<br><br>badger<br><br> mushroom<br><br>mushroom<br><br> a badger<br><br>badger<br><br>badger<br><br>badger<br><br>badger<br><br> badger<br><br>badger<br><br>badger<br><br>badger<br><br>badger<br><br> mushroom<br><br>mushroom<br><br> a badger<br><br>badger<br><br>badger<br><br>badger<br><br>badger<br><br> badger<br><br>badger<br><br>badger<br><br>badger<br><br>badger<br><br> mushroom<br><br>mushroom<br><br> a badger<br><br>badger<br><br>badger<br><br>badger<br><br>badger<br><br> badger<br><br>badger<br><br>badger<br><br>badger<br><br>badger<br><br> mushroom<br><br>mushroom<br><br> a badger<br><br>badger<br><br>badger<br><br>badger<br><br>badger<br><br> badger<br><br>badger<br><br>badger<br><br>badger<br><br>badger<br><br> mushroom<br><br>mushroom<br><br> a badger<br><br>badger<br><br>badger<br><br>badger<br><br>badger<br><br> badger<br><br>badger<br><br>badger<br><br>badger<br><br>badger<br><br> mushroom<br><br>mushroom<br><br> a badger<br><br>badger<br><br>badger<br><br>badger<br><br>badger<br><br> <input type="button" value="Go Fullscreen" id="fsbutton" /> <p> <a href="http://johndyer.name/native-fullscreen-javascript-api-plus-jquery-plugin/">Back to article</a> </p> </div>
<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> <script>
// do something interesting with fullscreen support
var fsElement = document.getElementById('a'); window.fullScreenApi.requestFullScreen(fsElement); // handle button click fsElement.addEventListener('click', function() { window.fullScreenApi.requestFullScreen(fsElement); }, true);
if (window.fullScreenApi.supportsFullScreen) { fsStatus.innerHTML = 'YES: Your browser supports FullScreen'; fsStatus.className = 'fullScreenSupported'; fsElement.addEventListener(fullScreenApi.fullScreenEventName, function() { if (fullScreenApi.isFullScreen()) { fsStatus.innerHTML = 'Whoa, you went fullscreen'; } else { fsStatus.innerHTML = 'Back to normal'; } }, true); } else { fsStatus.innerHTML = 'SORRY: Your browser does not support FullScreen'; }
</script>
</center> </body> </html>
| |
|