Simple JavaScript Plugin To Make Html Elements Fullscreen – screenfull.js

Category: Javascript , Recommended | July 31, 2019
Author: sindresorhus
Views Total: 6,287
Official Page: Go to website
Last Update: July 31, 2019
License: MIT

Preview:

Simple JavaScript Plugin To Make Html Elements Fullscreen – screenfull.js

Description:

screenfull.js is a vanilla JavaScript library to bring any HTML elements into fullscreen by using JavaScript Fullscreen API. Works with all the modern browsers like IE7/8/9/10, Chrome, Firefox, Safari and more.

Basic Usage:

Install and download.

# NPM
$ npm install screenfull --save

Import the screenfull.js in your document.

<script src="dist/screenfull.min.js"></script>

Make an element fullscreen.

if (!screenfull.enabled) {
  return false;
}

screenfull.request(document.getElementById('container'));

Exit the fullscreen mode.

screenfull.exit().then(function () {
  console.log('Browser exited fullscreen mode')
});

Toggle the fullscreen mode.

screenfull.toggle(document.getElementById('container'));

Event handlers.

if (screenfull.enabled) {
  screenfull.on('error', event => {
    console.error('Failed to enable fullscreen', event);
  });
}

if (screenfull.enabled) {
  screenfull.on('change', () => {
    console.log('Am I fullscreen?', screenfull.isFullscreen ? 'Yes' : 'No');
  });
}

Changelog:

v4.2.1 (07/31/2019)

  • Properly forward promise rejections

v4.1.0 (03/29/2019)

  • Bugfix

You Might Be Interested In:


Leave a Reply