Differences
This shows you the differences between two versions of the page.
|
shared:fullscreentest.html [2015/05/14 14:00] |
shared:fullscreentest.html [2022/08/30 13:40] |
||
|---|---|---|---|
| Line 1: | Line 1: | ||
| - | <html> | ||
| - | <head> | ||
| - | <title>FullScreen API</title> | ||
| - | |||
| - | <style> | ||
| - | body { | ||
| - | background: #F3F5FA; | ||
| - | } | ||
| - | #container { | ||
| - | width: 600px; | ||
| - | padding: 30px; | ||
| - | background: #CCC; | ||
| - | border: solid 1px #ccc; | ||
| - | color: #111; | ||
| - | margin: 20px auto; | ||
| - | border-radius: 3px; | ||
| - | } | ||
| - | |||
| - | #specialstuff { | ||
| - | background: #CC3; | ||
| - | padding: 20px; | ||
| - | margin: 20px; | ||
| - | color: #fff; | ||
| - | } | ||
| - | #specialstuff a { | ||
| - | color: #eee; | ||
| - | } | ||
| - | |||
| - | #fsstatus { | ||
| - | background: #CC4; | ||
| - | color: #111; | ||
| - | } | ||
| - | |||
| - | #fsstatus.fullScreenSupported { | ||
| - | background: #AAA; | ||
| - | } | ||
| - | </style> | ||
| - | </head> | ||
| - | <body> | ||
| - | <div id="container"> | ||
| - | <h1>FullScreen API Testing</h1> | ||
| - | |||
| - | <div id="specialstuff"> | ||
| - | <p>Status: <span id="fsstatus"></span> | ||
| - | </div> | ||
| - | </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 fsButton = document.getElementById('fsbutton'), | ||
| - | fsElement = document.getElementById('specialstuff'), | ||
| - | fsStatus = document.getElementById('fsstatus'); | ||
| - | |||
| - | |||
| - | if (window.fullScreenApi.supportsFullScreen) { | ||
| - | fsStatus.innerHTML = 'YES: Your browser supports FullScreen'; | ||
| - | fsStatus.className = 'fullScreenSupported'; | ||
| - | |||
| - | } else { | ||
| - | fsStatus.innerHTML = 'SORRY: Your browser does not support FullScreen'; | ||
| - | } | ||
| - | |||
| - | </script> | ||
| - | |||
| - | |||
| - | |||
| - | <script type="text/javascript"> | ||
| - | var _gaq = _gaq || []; | ||
| - | _gaq.push(['_setAccount','UA-3734687-9']); | ||
| - | _gaq.push(['_trackPageview'],['_trackPageLoadTime']); | ||
| - | (function() { | ||
| - | var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; | ||
| - | ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; | ||
| - | var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); | ||
| - | })(); | ||
| - | </script> | ||
| - | |||
| - | |||
| - | <script type="text/javascript"> | ||
| - | var clicky = { log: function(){ return; }, goal: function(){ return; }}; | ||
| - | var clicky_site_id = 117587; | ||
| - | (function() { | ||
| - | var s = document.createElement('script'); | ||
| - | s.type = 'text/javascript'; s.async = true; | ||
| - | s.src = '//static.getclicky.com/js'; | ||
| - | ( document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0] ).appendChild( s ); | ||
| - | })(); | ||
| - | </script> | ||
| - | |||
| - | </body> | ||
| - | </html> | ||
| - | |||
| - | |||