fullscr
v1.0.2
Published
Go fullscreen on any browser with one line of code
Downloads
50
Maintainers
axoraxdevReadme
Raw size (fullscr.js) => 1.41 kB
Zipped size (fullscr.js) => 0.6 kB
⚙️ Installation
npm i fullscr↪ CDN Links:
https://cdn.jsdelivr.net/npm/[email protected]/fullscr.js
https://www.unpkg.com/[email protected]/fullscr.js
📖 Documentation
• Go fullscreen with one line of code
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
• Enable fullscreen
fullscr.enable();• Run code if fullscreen is not supported when using fullscr.enable()
fullscr.enable(null, () => {
console.log('Fullscreen is not supported!')
});null means that it will make the entire website fullscreen.
• Enable fullscreen on an element
fullscr.enable('div');• Disable fullscreen
fullscr.disable();You don't need to provide an element to disable fullscreen on as fullscreen can't be enabled for multiple elements.
• Run code if fullscreen is not supported when using fullscr.disable()
fullscr.disable(() => {
console.log('Fullscreen is not supported!')
});• Toggle fullscreen
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');• Check if fullscreen is enabled
console.log(fullscr.isEnabled);Will return true if there is an element which is fullscreen otherwise false
• Check if fullscreen is allowed
console.log(fullscr.isAllowed);• Get current element which is in fullscreen
console.log(fullscr.element);• Add events to fullscreen
fullscr.on('change', () => {
console.log('Fullscreen changed!');
});Available events for fullscreen are:
- change
- error
• Remove events from fullscreen
fullscr.off('change', myEvent);• Listen for changes
fullscr.onchange(() => {
console.log('Fullscreen changed!');
});• Listen for errors
fullscr.onerror(() => {
console.log('An error occured!');
});• HTML example
<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>