https://github.com/rostyq/browser-extra-events

Javascript extra events for browser.
https://github.com/rostyq/browser-extra-events

browser events javascript

Last synced: about 1 month ago
JSON representation

Javascript extra events for browser.

• Host: GitHub
• URL: https://github.com/rostyq/browser-extra-events
• Owner: rostyq
• Created: 2023-01-16T22:28:15.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2023-01-17T23:52:10.000Z (almost 2 years ago)
• Last Synced: 2024-04-26T00:25:06.669Z (7 months ago)
• Topics: browser, events, javascript
• Language: TypeScript
• Homepage: https://npmjs.com/org/browser-extra-events
• Size: 965 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# browser-extra-events

## windowmove

Fires `move` [`event`] on [`window`] each time [`window.screenX`] or [`window.screenY`] are changed.

![windowmove](./windowmove/demo.gif)

### Usage

With bundlers:

```

npm install @browser-extra-events/windowmove

```

and

```js

import '@browser-extra-events/windowmove'

```

Plain html:

```html

```

## zoomchange

Fires `zoom` event on [`window`] each time user changes browser zoom ratio.

![zoomchange](./zoomchange/demo.gif)

### Usage

With bundlers:

```

npm install @browser-extra-events/zoomchange

```

and

```js

import '@browser-extra-events/zoomchange'

```

Plain html:

```html

```

## windowdisplace

Fires `displace` event on [`window`] each time the inner window changes its position relative to upper-left corner of the browser window.

> NOTE: It relies on mouse events, therefore to catch viewport reposition the user pointer (mouse) should be inside the client viewport. 

![windowdisplace](./windowdisplace/demo.gif)

### Usage

With bundlers:

```

npm install @browser-extra-events/windowdisplace

```

and

```js

import '@browser-extra-events/windowdisplace'

```

Plain html:

```html

```

## screenchange

### Usage

With bundlers:

```

npm install @browser-extra-events/screenchange

```

and

```js

import '@browser-extra-events/screenchange'

```

Plain html:

```html

```

## fullscreenchange

Fires `fullscreenchange` event on browser fullscreen enter/exit.

### Usage

With bundlers:

```

npm install @browser-extra-events/fullscreenchange

```

and

```js

import '@browser-extra-events/fullscreenchange'

```

Plain html:

```html

```

[`window`]: https://developer.mozilla.org/en-US/docs/Web/API/Window

[`event`]: https://developer.mozilla.org/en-US/docs/Web/API/Event

[`window.screenX`]: https://developer.mozilla.org/en-US/docs/Web/API/Window/screenX

[`window.screenY`]: https://developer.mozilla.org/en-US/docs/Web/API/Window/screenY