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

Category: Javascript , Recommended | December 24, 2020
Author: sindresorhus
Views Total: 357 views
Official Page: Go to website
Last Update: December 24, 2020
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 the 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 the page or an element fullscreen.

if (screenfull.isEnabled) {
  screenfull.request(element);
} else {
  // do something
}

Hide navigation UI on mobile devices.

if (screenfull.isEnabled) {
  screenfull.request(element, {navigationUI: 'hide'});
}

Exit the fullscreen mode.

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

Toggle the fullscreen mode.

if (screenfull.isEnabled) {
  screenfull.toggle(event.target);
}

Event handlers.

if (screenfull.isEnabled) {
  screenfull.on('error', event => {
    console.error('Failed to enable fullscreen', event);
  });
}
if (screenfull.isEnabled) {
  screenfull.on('change', () => {
    console.log('Am I fullscreen?', screenfull.isFullscreen ? 'Yes' : 'No');
  });
}

Pass FullscreenOptions to the screenfull.request function.

screenfull.request(element, options);

Changelog:

v5.1.0 (12/24/2020)

  • Add support for options

v5.0.2 (08/06/2020)

  • Rename screenfull.enabled to screenfull.isEnabled
  • Drop Safari 5.1 (it’s ancient) workaround
  • Unify checking for fullscreen availability
  • Previously, you had to check if (screenfull && screenfull.enabled) {} before using it. Now you just use if (screenfull.isEnabled) {}.

v5.0.0 (09/09/2019)

  • Return the native promise when it exists

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