Skip to content

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

License

Notifications You must be signed in to change notification settings

andyexeter/most-visible

Repository files navigation

Most Visible

License Build status npm version Size Size

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

Installation

Download

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 Bun:

$ bun add most-visible

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

About

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

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published