# 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 to.
**This package is feature complete. No new changes will be accepted.**
---
🔥 Want to strengthen your core JavaScript skills and master ES6? I would personally recommend this awesome ES6 course by Wes Bos.
---
### [Demo](https://sindresorhus.com/screenfull.js)
### [Check out my other projects](https://github.com/sindresorhus?tab=repositories)
## Install
Only 0.7 kB gzipped.
Download the [production version][min] or the [development version][max].
[min]: https://github.com/sindresorhus/screenfull.js/raw/gh-pages/dist/screenfull.min.js
[max]: https://github.com/sindresorhus/screenfull.js/raw/gh-pages/dist/screenfull.js
```
$ npm install screenfull
```
Also available on [cdnjs](https://cdnjs.com/libraries/screenfull.js).
## Why?
### Screenfull
```js
if (screenfull.enabled) {
screenfull.request();
}
```
### Vanilla JavaScript
```js
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
[Supported browsers](http://caniuse.com/fullscreen)
**Note:** In order to use this package in Internet Explorer, you need a [`Promise` polyfill](https://github.com/stefanpenner/es6-promise).
iPhone is not supported.
## Documentation
### Examples
#### Fullscreen the page
```js
document.getElementById('button').addEventListener('click', () => {
if (screenfull.enabled) {
screenfull.request();
} else {
// Ignore or do something else
}
});
```
#### Fullscreen an element
```js
const el = document.getElementById('target');
document.getElementById('button').addEventListener('click', () => {
if (screenfull.enabled) {
screenfull.request(el);
}
});
```
#### Fullscreen an element with jQuery
```js
const target = $('#target')[0]; // Get DOM element from jQuery collection
$('#button').on('click', () => {
if (screenfull.enabled) {
screenfull.request(target);
}
});
```
#### Toggle fullscreen on a image with jQuery
```js
$('img').on('click', event => {
if (screenfull.enabled) {
screenfull.toggle(event.target);
}
});
```
#### Detect fullscreen change
```js
if (screenfull.enabled) {
screenfull.on('change', () => {
console.log('Am I fullscreen?', screenfull.isFullscreen ? 'Yes' : 'No');
});
}
```
Remove listeners with:
```js
screenfull.off('change', callback);
```
#### Detect fullscreen error
```js
if (screenfull.enabled) {
screenfull.on('error', event => {
console.error('Failed to enable fullscreen', event);
});
}
```
See the [demo](https://sindresorhus.com/screenfull.js) for more examples, and view the source.
#### Fullscreen an element with Angular.js
You can use the [Angular.js binding](https://github.com/hrajchert/angular-screenfull) to do something like:
```html
This is a fullscreen element
```
#### Fullscreen the page with Angular 2
```typescript
import {Directive, HostListener} from '@angular/core';
import screenfull = require('screenfull');
@Directive({
selector: '[toggleFullscreen]'
})
export class ToggleFullscreenDirective {
@HostListener('click') onClick() {
if (screenfull.enabled) {
screenfull.toggle();
}
}
}
```
```html