https://github.com/andyexeter/most-visible

A zero dependency JavaScript module and jQuery plugin which returns the most visible element from a given set
https://github.com/andyexeter/most-visible

javascript jquery npm-module visibility

Last synced: about 2 months ago
JSON representation

A zero dependency JavaScript module and jQuery plugin which returns the most visible element from a given set

• Host: GitHub
• URL: https://github.com/andyexeter/most-visible
• Owner: andyexeter
• License: mit
• Created: 2016-09-26T14:48:32.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2023-11-04T12:29:38.000Z (about 1 year ago)
• Last Synced: 2024-08-09T21:18:59.983Z (5 months ago)
• Topics: javascript, jquery, npm-module, visibility
• Language: JavaScript
• Homepage:
• Size: 513 KB
• Stars: 17
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: .github/CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Most Visible

[![License](https://img.shields.io/npm/l/most-visible)](https://github.com/andyexeter/most-visible/blob/master/LICENSE)

[![Build status](https://github.com/andyexeter/most-visible/actions/workflows/ci.yaml/badge.svg)](https://github.com/andyexeter/most-visible/actions/workflows/ci.yaml)

[![npm version](https://img.shields.io/npm/v/most-visible.svg)](https://www.npmjs.com/package/most-visible)

[![Size](https://img.shields.io/bundlephobia/min/[email protected])](https://unpkg.com/[email protected]/dist/most-visible.min.js)

[![Size](https://img.shields.io/bundlephobia/minzip/[email protected])](https://unpkg.com/[email protected]/dist/most-visible.min.js)

A zero dependency JavaScript module and jQuery plugin which returns the most visible element from a given set.

## Installation

#### Download

* [most-visible.min.js](https://unpkg.com/[email protected]/dist/most-visible.min.js)

* [most-visible.js](https://unpkg.com/[email protected]/dist/most-visible.js)

#### CDN

```html

```

#### Package Managers

Install via [Bun](https://bun.sh/):

```sh

$ bun add most-visible

```

Install via yarn:

```sh

$ yarn add most-visible

```

Install via NPM:

```sh

$ npm install most-visible --save

```

## Usage

### Browser

#### jQuery

The plugin will automatically be added to any global (window) version of jQuery:

```js

$('.my-elements').mostVisible().addClass('most-visible');

// with options

$('.my-elements').mostVisible({percentage: true, offset: 160}).addClass('most-visible');

```

#### Vanilla JavaScript

You can pass in either a selector string:

```js

const element = mostVisible('.my-elements');

```

Or a NodeList:

```js

const element = mostVisible(document.querySelectorAll('.my-elements'));

```

### Webpack etc.

```js

import mostVisible from 'most-visible';

const element = mostVisible('.my-elements');

```

To attach the jQuery plugin to a non-global version of jQuery you must call `.makejQueryPlugin`:

```js

import $ from 'jquery';

import {mostVisible, makejQueryPlugin} from 'most-visible';

makejQueryPlugin($, mostVisible);

$('.my-elements').removeClass('active').mostVisible().addClass('active');

```

## Options

| Option         | Type               | Description                                                                                  | Default           |

|----------------|--------------------|----------------------------------------------------------------------------------------------|-------------------|

| percentage     | `boolean`          | Whether to calculate the visibility of an element as a percentage of its height              | `false`           |                                                                     | `''`              |

| offset         | `number`           | A pixel offset to use when calculating visibility. Useful for e.g fixed headers.             | `0`               |

Modify the `mostVisible.defaults` object to change default option values:

```js

mostVisible.defaults.percentage = true;

mostVisible.defaults.offset = 160;

```

## License

Released under the [MIT license](LICENSE)