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/fullscr@1.0.2/fullscr.js'; fullscr.enableOnEvent('button', 'click'); </script> </body>