Go fullscreen on any browser with one line of code
Raw size (fullscr.js) => 1.41 kB
Zipped size (fullscr.js) => 0.6 kB
npm i fullscr↪ CDN Links:
fullscr.enableOnEvent('button', 'click');fullscr.enableOnEvent() can take in 4 arguments. They are:
fullscr.enableOnEvent('button', 'click', 'div', () => {
console.log('Fullscreen is not supported!');
});In the above example,
'button'represents element event will get added to'click'represents the event'div'represents element that will get fullscreened() => {...}represents code that will run if fullscreen is not supported
fullscr.enable();fullscr.enable(null, () => {
console.log('Fullscreen is not supported!')
});null means that it will make the entire website fullscreen.
fullscr.enable('div');fullscr.disable();You don't need to provide an element to disable fullscreen on as fullscreen can't be enabled for multiple elements.
fullscr.disable(() => {
console.log('Fullscreen is not supported!')
});fullscr.toggle();This will enable fullscreen if fullscreen is not enabled and disable fullscreen if it is enabled.
Like fullscr.enable() you can toggle fullscreen for any element.
fullscr.toggle('div');console.log(fullscr.isEnabled);Will return true if there is an element which is fullscreen otherwise false
console.log(fullscr.isAllowed);console.log(fullscr.element);fullscr.on('change', () => {
console.log('Fullscreen changed!');
});Available events for fullscreen are:
- change
- error
fullscr.off('change', myEvent);fullscr.onchange(() => {
console.log('Fullscreen changed!');
});fullscr.onerror(() => {
console.log('An error occured!');
});<body>
<button>Fullscreen</button>
<script type="module">
import fullscr from 'https://cdn.jsdelivr.net/npm/[email protected]/fullscr.js';
fullscr.enableOnEvent('button', 'click');
</script>
</body>
