Most Visible

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

Installation

Download

• most-visible.min.js
• most-visible.js

CDN

<script src="https://unpkg.com/[email protected]/dist/most-visible.min.js"></script>
<!-- OR -->
<script src="https://unpkg.com/[email protected]/dist/most-visible.js"></script>

Package Managers

Install via yarn:

$ yarn add most-visible

Install via NPM:

$ npm install most-visible --save

Usage

Browser

jQuery

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

$('.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:

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

Or a NodeList:

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

Webpack etc.

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:

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:

mostVisible.defaults.percentage = true;
mostVisible.defaults.offset = 160;

License

Released under the MIT license