%PDF- %PDF-
Direktori : /home/jalalj2hb/public_html/ftm-admin/bower_components/screenfull/ |
Current File : /home/jalalj2hb/public_html/ftm-admin/bower_components/screenfull/index.html |
<!doctype html> <html lang="en" itemscope itemtype="http://schema.org/Product"> <head> <meta charset="utf-8"> <meta name="author" content="Sindre Sorhus"> <meta name="description" content="JavaScript Fullscreen API demo"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta itemprop="name" content="screenfull.js"> <meta itemprop="description" content="Simple wrapper for cross-browser usage of the JavaScript Fullscreen API, which lets you bring the page or any element into fullscreen. Smoothens out the browser implementation differences, so you don't have too."> <title>screenfull.js demo</title> <style> html { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; padding: 30px 10px 0 0; font-size: 20px; line-height: 1.4; color: #737373; background: #f0f0f0; -webkit-font-smoothing: antialiased; } hr { border: none; border-top: 1px solid #e6e6e6; margin: 20px 0; } a { color: #666; } h1 { margin: 0; font-size: 40px; text-align: center; } h1 span { color: #bbb; } ul { padding: 0 0 0 40px; margin: 1em 0; } button { font-size: 13px; } nav { margin: 0 auto; } .container { width: 500px; margin: 0 auto; } #repo-link { text-align: center; text-decoration: none; display: block; position: absolute; top: 20px; left: 20px; } #social { margin: 10px auto; text-align: center; } #container { width: 500px; padding: 30px 20px; margin: 0 auto 50px auto; background: #fcfcfc; text-align: center; border: 1px solid #b3b3b3; border-radius: 4px; box-shadow: 0 1px 10px #a7a7a7, inset 0 1px 0 #fff; } #container ul { padding: 0; margin: 40px 0 0 0; list-style: none; } #demo-img { width: 100%; height: auto; } #demo-img, #demo-video { cursor: pointer; } header p { font-size: 17px; } </style> </head> <body> <a id="repo-link" href="https://github.com/sindresorhus/screenfull.js">⬅ Back to the repo</a> <div id="social" class="container"> <a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-text="screenfull.js - Simple wrapper for cross-browser usage of the Fullscreen API" data-via="sindresorhus">Tweet</a> <div class="g-plusone" data-size="medium" data-annotation="none" data-href="https://github.com/sindresorhus/screenfull.js"></div> </div> <section id="container" class="container"> <header> <h1>screenfull<span>.js</span></h1> <p>Simple wrapper for cross-browser usage of the JavaScript <a href="https://developer.mozilla.org/en/DOM/Using_full-screen_mode">Fullscreen API</a>, which lets you bring the page or any element into fullscreen. Smoothens out the browser implementation differences, so you don't have too.</p> </header> <hr> <section> <p>Try out the Fullscreen API</p> <button id="request">Request</button> <button id="exit">Exit</button> <button id="toggle">Toggle</button> <button id="request2">Request document</button> </section> <section> <ul> <li id="supported"></li> <li id="status"></li> <li id="element"></li> </ul> </section> <input autofocus placeholder="Keyboard test"> <hr> <section> <p>Click the image to make it fullscreen</p> <img width="500" height="206" id="demo-img" src="https://sindresorhus.com/img/slideshow/4.jpg"> </section> </section> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> <script type="text/javascript"> (function() { var po = document.createElement('script'); po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })(); </script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script src="src/screenfull.js"></script> <script> $(function () { $('#supported').text('Supported/allowed: ' + !!screenfull.enabled); if (!screenfull.enabled) { return false; } $('#request').click(function () { screenfull.request($('#container')[0]); // does not require jQuery, can be used like this too: // screenfull.request(document.getElementById('container')); }); $('#exit').click(function () { screenfull.exit(); }); $('#toggle').click(function () { screenfull.toggle($('#container')[0]); }); $('#request2').click(function () { screenfull.request(); }); $('#demo-img').click(function () { screenfull.toggle(this); }); function fullscreenchange() { var elem = screenfull.element; $('#status').text('Is fullscreen: ' + screenfull.isFullscreen); if (elem) { $('#element').text('Element: ' + elem.localName + (elem.id ? '#' + elem.id : '')); } if (!screenfull.isFullscreen) { $('#external-iframe').remove(); document.body.style.overflow = 'auto'; } } document.addEventListener(screenfull.raw.fullscreenchange, fullscreenchange); // set the initial values fullscreenchange(); }); </script> <script> var _gaq=[['_setAccount','UA-25562592-1'],['_trackPageview'],['_trackPageLoadTime']]; (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0]; g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js'; s.parentNode.insertBefore(g,s)}(document,'script')); </script> </body> </html>