Open Any Element In Fullscreen Mode - jquery.fullscreen.js

A lightweight fullscreen toggle plugin for modern browsers that allows the vistor to open any element in fullscreen mode.

Also provides functionalities to check fullscreen state and browser compatibility using HTML5 fullscreen API.

How to use it:

1. Just load the minified version of the fullscreen plugin after jQuery and we're ready to go.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/jquery.fullscreen-min.js"></script>

2. Set & get the fullscreen mode with the fullScreen function:

• Parameter: True to enable fullscreen mode, false to disable it. If not specified then the current fullscreen state is returned.
• Return: When querying the fullscreen state then the current fullscreen element (or true if browser doesn't support it) is returned when browser is currently in full screen mode. False is returned if browser is not in full screen mode. Null is returned if browser doesn't support fullscreen mode at all. When setting the fullscreen state then the current jQuery selection is returned for chaining.

// document
$(document).fullScreen(true);

// element
$('#element').fullScreen(true);

// exit fullscreen mode
$('#element').fullScreen(false);

3. Toggle the fullscreen mode.

$(document).toggleFullScreen();

4. Get the current fullscreen state.

$("#element").toggle($(document).fullScreen() != null));

5. Fire an event when the fullscreen state changes.

$(document).on("fullscreenchange", function() {
  console.log("Fullscreen " + ($(document).fullScreen() ? "on" : "off"));
});

6. Fire an event when an error occurred.

$(document).on("fullscreenerror", function(e) {
   console.log("Full screen error.");
   $("#status").text("Browser won't enter full screen mode for some reason.");
});

7. The plugin also works with iframe content:

<iframe src="iframe.html" webkitAllowFullScreen mozAllowFullScreen allowFullScreen>
</iframe>

---

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