Skip to content

Go fullscreen on any browser with one line of code

License

Notifications You must be signed in to change notification settings

Axorax/fullscr.js

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

1 Commit
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Go fullscreen on any browser with one line of code


Raw size (fullscr.js) => 1.41 kB

Zipped size (fullscr.js) => 0.6 kB


⚙️ Installation

npm i fullscr

↪ CDN Links:

📖 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/fullscr@1.0.2/fullscr.js';

        fullscr.enableOnEvent('button', 'click');
    </script>
</body>

Support me on Patreon - Check out my socials