# screenfull.js **Repository Path**: mirrors_leecade/screenfull.js ## Basic Information - **Project Name**: screenfull.js - **Description**: Simple wrapper for cross-browser usage of the JavaScript Fullscreen API - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: gh-pages - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2020-08-09 - **Last Updated**: 2026-02-07 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # screenfull.js Simple wrapper for cross-browser usage of the JavaScript [Fullscreen API](https://developer.mozilla.org/en/DOM/Using_full-screen_mode), which lets you bring the page or any element into fullscreen. Smoothens out the browser implementation differences, so you don't have too. ### [Demo](http://sindresorhus.com/screenfull.js) ## Download Only 0.6 KB gzipped (1.4 KB minified) Download the [production version][min] or the [development version][max]. [min]: https://raw.github.com/sindresorhus/screenfull.js/master/dist/screenfull.min.js [max]: https://raw.github.com/sindresorhus/screenfull.js/master/dist/screenfull.js ## Why? ### Screenfull ```javascript if ( screenfull ) { screenfull.request(); } ``` ### Vanilla JavaScript ```javascript document.fullscreenEnabled = document.fullscreenEnabled || document.mozFullScreenEnabled || document.documentElement.webkitRequestFullScreen; function requestFullscreen( element ) { if ( element.requestFullscreen ) { element.requestFullscreen(); } else if ( element.mozRequestFullScreen ) { element.mozRequestFullScreen(); } else if ( element.webkitRequestFullScreen ) { element.webkitRequestFullScreen( Element.ALLOW_KEYBOARD_INPUT ); } } if ( document.fullscreenEnabled ) { requestFullscreen( document.documentElement ); } // Actually it's more if you want it to work in Safari, but let's not go there... ``` ## Support - Chrome 15+ - Firefox 10+ - Safari 5.1+ - Opera 12.50+ Safari 5.1 doesn't support use of the keyboard in fullscreen. ## Documentation ### Examples #### Fullscreen the page ```javascript document.getElementById('button').addEventListener('click', function() { if ( screenfull ) { screenfull.request(); } else { // Ignore or do something else } }); ``` #### Fullscreen an element ```javascript var elem = document.getElementById('target'); document.getElementById('button').addEventListener('click', function() { if ( screenfull ) { screenfull.request( elem ); } }); ``` #### Fullscreen an element with jQuery ```javascript var target = $('#target')[0]; // Get DOM element from jQuery collection $('#button').click(function() { if ( screenfull ) { screenfull.request( target ); } }); ``` #### Toggle fullscreen on a image with jQuery ```javascript $('img').click(function() { if ( screenfull ) { // We can use `this` since we want the clicked element screenfull.toggle( this ); } }); ``` #### Detect fullscreen change ```javascript if ( screenfull ) { screenfull.onchange = function() { console.log( 'Am I fullscreen? ' + screenfull.isFullscreen ? 'Yes' : 'No' ); }; } ``` See the [demo](http://sindresorhus.com/screenfull.js) for more examples, and view the source. You can check for fullscreen support by checking the truthy/falsy value of `screenfull` as done in the example above. ### Methods #### .request() Make an element fullscreen. Accepts a DOM element. Default is ``. If called with another element than the currently active, it will switch to that if it's a decendant. If your page is inside an `