https://github.com/axorax/fullscr.js
Go fullscreen on any browser with one line of code
https://github.com/axorax/fullscr.js
entire-screen full-screen fullscr fullscreen fullscreen-api fullscreen-mode fullscreen-webview fullscrn
Last synced: about 1 year ago
JSON representation
Go fullscreen on any browser with one line of code
- Host: GitHub
- URL: https://github.com/axorax/fullscr.js
- Owner: Axorax
- License: mit
- Created: 2023-04-14T15:54:37.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2023-04-15T14:22:27.000Z (almost 3 years ago)
- Last Synced: 2025-02-10T08:47:35.197Z (about 1 year ago)
- Topics: entire-screen, full-screen, fullscr, fullscreen, fullscreen-api, fullscreen-mode, fullscreen-webview, fullscrn
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/fullscr
- Size: 43.9 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
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
```js
npm i fullscr
```
**↪ CDN Links:**
* https://cdn.jsdelivr.net/npm/fullscr@1.0.2/fullscr.js
* https://www.unpkg.com/fullscr@1.0.2/fullscr.js
## 📖 Documentation
#### • Go fullscreen with one line of code
```js
fullscr.enableOnEvent('button', 'click');
```
`fullscr.enableOnEvent()` can take in 4 arguments. They are:
```js
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
```js
fullscr.enable();
```
#### • Run code if fullscreen is not supported when using `fullscr.enable()`
```js
fullscr.enable(null, () => {
console.log('Fullscreen is not supported!')
});
```
`null` means that it will make the entire website fullscreen.
#### • Enable fullscreen on an element
```js
fullscr.enable('div');
```
#### • Disable fullscreen
```js
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()`
```js
fullscr.disable(() => {
console.log('Fullscreen is not supported!')
});
```
#### • Toggle fullscreen
```js
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.
```js
fullscr.toggle('div');
```
#### • Check if fullscreen is enabled
```js
console.log(fullscr.isEnabled);
```
Will return true if there is an element which is fullscreen otherwise false
#### • Check if fullscreen is allowed
```js
console.log(fullscr.isAllowed);
```
#### • Get current element which is in fullscreen
```js
console.log(fullscr.element);
```
#### • Add events to fullscreen
```js
fullscr.on('change', () => {
console.log('Fullscreen changed!');
});
```
Available events for fullscreen are:
* change
* error
#### • Remove events from fullscreen
```js
fullscr.off('change', myEvent);
```
#### • Listen for changes
```js
fullscr.onchange(() => {
console.log('Fullscreen changed!');
});
```
#### • Listen for errors
```js
fullscr.onerror(() => {
console.log('An error occured!');
});
```
#### • HTML example
```html
Fullscreen
import fullscr from 'https://cdn.jsdelivr.net/npm/fullscr@1.0.2/fullscr.js';
fullscr.enableOnEvent('button', 'click');
```
---
[Support me on Patreon](https://www.patreon.com/axorax) -
[Check out my socials](https://github.com/axorax/socials)