jQuery Plugin To Set Page Elements To Fullscreen - full.screen

full.screen is a lightweight jQuery wrapper for the Fullscreen API that enables you to present any specific element or the whole page in the user's entire screen.

How to use it:

1. Load the minified version of the jQuery full.screen plugin after jQuery library and we're ready to go.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery.full.screen.min.js"></script>

2. Add the 'data-toggle="fullscreen"' attribute to the page element.

<div data-toggle="fullscreen">
  ...
</div>

3. Call the function to make it fullscreen.

$('[data-toggle="fullscreen"]').fullscreen();

4. You can also create a trigger link to toggle the fullscreen mode on a specific container using 'data-target' attribute:

<a href="#" id="trigger-element" data-target=".demo">
  Toggle Fullscreen
</a>
<div class="demo">
  ...
</div>

$('#trigger-element').fullscreen({
  // options here
});

5. Customize the icons when entering & exiting the fullscreen mode.

$('#trigger-element').fullscreen({
  iconEnter: 'zmdi zmdi-fullscreen-alt',
  iconExit: 'zmdi zmdi-fullscreen-exit',
});

6. Execute callback functions when entering & exiting the fullscreen mode.

$('#trigger-element').fullscreen({
  onenter: function () { },
  onexit: function () { }
});

Change log:

2016-08-01

• Added native api fullscreen check and timeout option

---

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