https://github.com/customd/jquery-visible

A jquery plugin which allows us to quickly check if an element is within the browsers visual viewport regardless of the window scroll position
https://github.com/customd/jquery-visible

Last synced: 3 months ago
JSON representation

A jquery plugin which allows us to quickly check if an element is within the browsers visual viewport regardless of the window scroll position

• Host: GitHub
• URL: https://github.com/customd/jquery-visible
• Owner: customd
• License: mit
• Created: 2012-10-15T21:07:32.000Z (about 12 years ago)
• Default Branch: master
• Last Pushed: 2019-09-19T04:09:03.000Z (over 5 years ago)
• Last Synced: 2024-10-10T21:44:32.473Z (3 months ago)
• Language: HTML
• Homepage: https://www.customd.com/articles/13/checking-if-an-element-is-visible-on-screen-using-jquery
• Size: 56.6 KB
• Stars: 990
• Watchers: 42
• Forks: 368
• Open Issues: 17
• Metadata Files:
  • Readme: README.markdown
  • License: LICENSE.txt

Awesome Lists containing this project

• stars - customd/jquery-visible

README

        
Element Onscreen Visibility

===========================

This is a [jQuery](http://jquery.com/) plugin which allows us to quickly check if an element 

is within the browsers [visual viewport](http://www.quirksmode.org/mobile/viewports.html), 

regardless of the scroll position. If a user can see this element, the function will return true.

Documentation

-------------

### Basic visibility check

This basic check will return `true` if the entire element is visible to the user (within the visual viewport).

	$('#element').visible();

If you'd like to check for ANY PART of the element, you can use the following:

	$('#element').visible( true );

The plugin ignores the elements visibility by default. E.g., `display:none`, `visibility: hidden`, `offsetWidth` or `offsetHeight` is 0). 

To filter on css visibility, you can use the jQuery `:visible` selector:

	$('#element:visible').visible();

Optionally, you can specify a second parameter to the `.visible` plugin, which will check whether the element is visible, as well as

whether it's within the viewport too.

	$('#element:visible').visible( false, true );

Optionally, you can add a third parameter to specify the direction to check for visibility. This can either be 'horizontal', 'vertical' or 'both'.

Default is to 'both'.

    $('#element').visible( false, false, 'horizontal' );

Demos

-----

The Demos for this plugin live under the examples/ directory. Open them directly in your web browser, or view the following online examples:

- [Basic Demo](http://opensource.teamdf.com/visible/examples/demo-basic.html)

See the blog article:

- [Checking if an element is visible on-screen using jQuery](https://www.customd.com/articles/13/checking-if-an-element-is-visible-on-screen-using-jquery)

Limitations

-----------

Currently, this plugin will not check for visibility in nested scrollable areas, only on the main viewport (window object).