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

Element Onscreen Visibility

This is a jQuery plugin which allows us to quickly check if an element is within the browsers visual viewport, 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

See the blog article:

• 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).

jquery-visible's Issues

demo doesn't work

Hi.

I downloaded the plugin and tried to run the demo.

When I click "detect visibility" it reports everything is offscreen, even the elements that are clearly onscreen.

Tested in chrome 26 and firefox 20 on linux.

New release needed.

There needs to be a new release that includes 4668a5e

This is causing trouble for people: https://discourse.roots.io/t/installing-jquery-visible-plugin-with-bower

jquery-visible/blob/master/jquery.visible.js seems broke

Hey!

Looking at https://github.com/teamdf/jquery-visible/blob/master/jquery.visible.js and comparing it to http://opensource.teamdf.com/visible/jquery.visible.js and https://github.com/teamdf/jquery-visible/blob/master/jquery.visible.min.js it seems the first file contains some errors.

Line https://github.com/teamdf/jquery-visible/blob/master/jquery.visible.js#L23 doesn't seem to work as expected. this.offsetWidth returns undefined resulting in this.offsetWidth * this. offsetHeight to result in NaN

!!NaN will always return false.

Add to Bower registry.

This would be really handy to have available on Bower.

http://bower.io/docs/creating-packages/

Publish on npm registry

iPhone / mobile safari - view port hight wrong

the vpHeight is wrong in IPhone's mobile safari

http://bugs.jquery.com/ticket/6724

fix line#22

vpHeight  = window.innerHeight ? window.innerHeight : $w.height(), 

Bump npm version?

I had a problem with v1.2.0 which was resolved when I checked out master.

Element is not detected as visible if its top and bottom extend outside the bounds of the view

Say the window is 600px tall, but the element we're calling visible() on is 800px tall (larger than the window itself), so while scrolling, at a certain point, the very top and bottom of the element is hidden from view...

Visible() returns false when the element is in this state- visible in the window, but it's top and bottom edges are out of bounds.

How to get hidden offset for the element

Can we have the plugin return the offset pixels that are hidden off-screen for the given element?

Non-JQuery version?

Hey there,

It would be fantastic if this plugin could be made to work without the jquery dependency. The plugin itself is only 3kb or so, it doesn't make sense to have to include the 40-50kb of jquery code just to use it.

Any thoughts?

Logic broken for tall elements and partial = true

Hi,

Where getBoundingClientRect is available, the current algorithm checks to see whether the top OR the bottom are visible to consider the element partially visible. However, for tall elements the top of the element can be above the viewport and the bottom of the element below. This causes the function to return "false" in spite of the element being visible.

The partial case can't be driven from top OR bottom being visible. Instead you need to check whether the top is above the bottom of the viewport AND the bottom is below the top of the viewport.

The same logic also needs to apply to left & right.

The legacy browser code is OK.

        if (typeof t.getBoundingClientRect === 'function'){

            // Use this native browser method, if available.
            var rec = t.getBoundingClientRect(),
                tViz = rec.top    >= 0 && rec.top    <  vpHeight,
                bViz = rec.bottom >  0 && rec.bottom <= vpHeight,
                lViz = rec.left   >= 0 && rec.left   <  vpWidth,
                rViz = rec.right  >  0 && rec.right  <= vpWidth,
                tBounds = rec.top    <  vpHeight,
                bBounds= rec.bottom >  0,
                lBounds = rec.left   <  vpWidth,
                rBounds = rec.right  >  0,
                vVisible   = partial ? tBounds && bBounds : tViz && bViz,
                hVisible   = partial ? lBounds && rBounds : lViz && rViz;

            if(direction === 'both')
                return clientSize && vVisible && hVisible;
            else if(direction === 'vertical')
                return clientSize && vVisible;
            else if(direction === 'horizontal')
                return clientSize && hVisible;
        }

Is it possible to use on a container with 'position:fixed'

Hi,

Is is possible to get this working with elements in a container that has position:fixed?
I'm trying to understand how the plugin works to see if its possible.

Thanks for any advice
Matt

If element is longer than viewport returns false.

As described, if element being checked is longer than the window browser, it returns false when top and bottom of element are not visible.

Support check if is visible inside of a an element with overflow: scroll

Currently this only checks visibility on the window object.

Paradoxically, if it is inside a div with overflow: scroll it will report "true" even if the element is not on the page.

This is really anti-intuitive, jquery-visible really should check scroll visibility as well

Only use getBoundingClientRect method instead of both?

As far as I can see, getBoundingClientRect has good enough support to be the only method we use in this plugin.

Cutting the old calculations would reduce the plugin size to about half... Anyone against that?

http://www.quirksmode.org/dom/w3c_cssom.html#getBoundingClientRect

"visible()" returns "true" for an element outside visible viewport when its CSS "display" property is "none"

Can something be done about that?

Note:
This was only reproduced using jquery.visible.min.js (on master). Using jquery.visible.js returns false.

List on npm?

Could you list this on npm (or just link me to it, if it already is) for those of us using browserify?

Troubles when using .hide() / .slideUp()

If I hide the element I want to track is visisble or not, .visible() will return true all the time.

I haven't found anything on the web, which could do this.

I am doing a infinite scroll page, and when I scroll to bottom, I wish to show a loading text, and when the content is then loaded, then hide the loading text.

Minified version problem

Hi.

I'm using this script on our site with our scripts compressor. I had to make small changes to make this script work. Problem is with self executing function. Right now it's:

(function(e){/*code here*/})(jQuery)

I suggest to change it to:

;(function(e){/*code here*/}(jQuery));

Our minifier put all script into single line and that's the problem.

King regards.

How to run this plugin when ajax success?

[enhancement] Add missing bower.json.

Hey, maintainer(s) of teamdf/jquery-visible!

We at VersionEye are working hard to keep up the quality of the bower's registry.

We just finished our initial analysis of the quality of the Bower.io registry:

7530 - registered packages, 224 of them doesnt exists anymore;

We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).

Sadly, your library teamdf/jquery-visible is one of them.

Can you spare 15 minutes to help us to make Bower better?

Just add a new file bower.json and change attributes.

{
  "name": "teamdf/jquery-visible",
  "version": "1.0.0",
  "main": "path/to/main.css",
  "description": "please add it",
  "license": "Eclipse",
  "ignore": [
    ".jshintrc",
    "**/*.txt"
  ],
  "dependencies": {
    "<dependency_name>": "<semantic_version>",
    "<dependency_name>": "<Local_folder>",
    "<dependency_name>": "<package>"
  },
  "devDependencies": {
    "<test-framework-name>": "<version>"
  }
}

Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.

NB! Please validate your bower.json with jsonlint before commiting your updates.

Thank you!

Timo,
twitter: @versioneye
email: [email protected]
VersionEye - no more legacy software!

Demo not working

I just tried the demo. It says that it prints offscreen or onscreen when the check is run, but nothing is printed.

Is there an example for an request and load, scroll and resize-event

Is there an example for an request and load, scroll and resize-event?

I have no idea to start? I want say:
If div.class in the viewport and if this div.class not more in the viewport .... by the scroll and resize and load-Event.

But I want it vor each div with the class xyz.

Thanks very much!

request: Offset?

an offset would be nice! so that it triggers earlier!

great plugin tho!

Can you help me to detect visibility of whole element?

First, thank you for this plugin. But I'm beginner and I'm not so sure how to use it. I have page where user should show his skill and bars grow when the user loads that slide (impress.js). So this function works great when I switch between two distant slides, but when they are near each other, one part of the skill page is "visible" and bars load their full size early.
Here is the code that I used for my bars:

var win = jQuery(window);
var allMods = jQuery(".skill");

allMods.each(function(i, el) {
  if (jQuery(el).visible(true)) {                                           
    jQuery("span.bar.line1").animate({ width: w1 }, 3000, function() { });
   } 
});

I hardly make this work:) But can you help to make it TRUE only if it's whole div visible?

Visible on the specific part on the window

Is it possible to set only the specific part on the window to be visible true?
I want my element to be on the bottom of the window but still not be visible, until you scroll to the center of the widow...

Error with direction being already defined

Just checked the code with JSHint and it displayed the following warning..

23  'direction' is already defined.

You might also want to consider passing window to the closure for efficiency improvements.

Add onVisible callback

This would be pretty convenient if you had some callbacks for when an element is visible or not visible. Would make it easier to implement all sorts of cool things.

Meant to work with multiple matching elements?

From what I can tell, this only works with the first matched element in the DOM. Am I just using it incorrectly, or are multiple matching elements not supported? If the latter, is this a planned feature?

Minor inaccuracy

Looking at the code I noticed that in the case where we are checking for partial visibility it uses <= and >= which is technically incorrect because if the top edge of the element lines up exactly with the bottom edge of the container then it would be inaccurate to consider it visible. It's the sort of thing that rarely comes up but it's also the sort of thing that makes things like this possible:

http://www.youtube.com/watch?v=W1U5RUVENNE

Documentation issue with partial check of any element

In the documentation it says:

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

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

that however gives me the following error:

TypeError: $(...).list is not a function

I'm assuming that to check partially for the element it should just be:

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

which works fine?

jquery.visible vs jquery-visible

We had a bower entry for "jquery.visible": "1.1.0" which used to point to this repository. Now it seems to be pointing to this other repository which clearly doesn't do the same behavior.

The fix was pretty easy, change "jquery.visible": "1.1.0" to "jquery-visible": "1.1.0", however we want to see if this is a result of a hijacked package, bower inferring dots (.) as dashes (-), or something else.