Tiny Fullscreen API Helper With jQuery - full-screen-helper.js

Tiny Fullscreen API Helper With jQuery - full-screen-helper.js
File Size: 23.6 KB
Views Total: 2609
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

A cross-browser HTML5 fullscreen API helper which allows to display any DOM elements or the whole document in fullscreen mode. Can be implemented in jQuery or Vanilla JavaScript.

How to use it:

1. To use the plugin, you first need to load the following JavaScript and CSS files in the document.

<link rel="stylesheet" href="full-screen-helper.css">
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="full-screen-helper.js"></script>

2. Set a given element to fullscreen:

$('body').fullScreenHelper('request');

3. Exit the fullscreen mode.

$('body').fullScreenHelper('exit');

4. Toggle the fullscreen mode.

$('body').fullScreenHelper('toggle');

5. Event listener.

$(document).on("fullscreenchange", function () {
  if ($.fullScreenHelper("state")) {
    console.log("In fullscreen", $(":fullscreen"));
  } else {
    console.log("Not in fullscreen");
  }
});

Changelog:

2020-09-12

  • v1.0.4

2017-11-09

  • v1.0.2

2017-06-18

  • Improvements and npm

This awesome jQuery plugin is developed by brcontainer. For more Advanced Usages, please check the demo page or visit the official website.