@tiff Are you still maintaining this repository and are you plannning to do this in future?

Do you now which one is the preferred repository?

Also see zuk#18

This plugin is very useful, but I can't seems to make it work using other libraries such as jquery-1.7+ some says it works in 10.1.2 something but no luck for me... TY

I have animated SVG's within a panel and I was wondering if there was a way to delay the inview animation? I'm new at JS so go easy on me.

My case was creating elements in an inactive tab (jquery ui tab, not browser's one, so just hidden div). Adding 'inview' event listeners to such elements immediately triggered 'inview' despite they were not really visible.

Adding

if (!$element.is(':visible')) {
    continue;
}

to checkInView after variables declaration worked for me, but maybe there's a better way.

Really sorry for robust issuing, but have no time now for pull request or more elaborate investigation.

error with jquery-2.0.3

x.extend.each                             jquery-2.0.3.js:564
check_inview                              jquery.inview.min.js:1
(anonymous function)                jquery.inview.min.js:1

but work well with jquery 1.10.2

cdnjs/cdnjs#7178

https://github.com/protonet/jquery.inview/blob/master/jquery.inview.min.js starts with "dow.innerWidth}", so it looks like the conversion from original non-min source to minimized version didn't work as expected.

Doing the following gives me unexpected results ('inview' only fires for the final matching element):

$('.group').bind('inview', function(e, isInView, visiblePartX) {

For 'inview' to fire on all individual elements, I have to do this:

$('.group').each(function() {
    $(this).bind('inview', function(e, isInView, visiblePartX) {

Is this a bug or not?

Hi,

It works fine when scrolling, but as I have a tall document, when moving using jquery and giving focus to an element at the bottom of page, then find that even though the element has now moved into view, the inview event is not being fired.

Once you scroll a slight amount then it fires. Is there any way of getting the inview event to fire up when we give focus to a new element, or of manually triggering it after we give focus to the new element?

Thanks, Mickey

I have .on('inview') attached to an element that is in a container that has overflow:scroll the inview event seems to fire before the element is even scrolled to in the container. Was the library intended for this use case?

I have this code working on all browsers I have tested on:

$(document).ready(function() {
$('.slide').each(function()
{
    $(this).bind('inview', function(e, isInView, visiblePartX, visiblePartY) {
        var elem = $(this);

        if (elem.data('inviewtimer')) {
            clearTimeout(elem.data('inviewtimer'));
            elem.removeData('inviewtimer');
        }

        if (isInView) {
            elem.data('inviewtimer', setTimeout(function() {

                if (visiblePartY == 'top') {
                    elem.data('seenTop', true);
                } else if (visiblePartY == 'bottom') {
                    elem.data('seenBottom', true);
                } else {
                    elem.data('seenTop', true);
                    elem.data('seenBottom', true);
                }

                if (elem.data('seenTop') && elem.data('seenBottom')) {
                    elem.unbind('inview');


                    elem.addClass('inview');
                }
            }, 100));
        }
    });
});

});

The html is simply 6 divs stacked on top of each other. The inview only fires once for Firefox 5.01 on the Mac. If I scroll down the page to reveal the next '.slide' nothing happens unless I resize the window or open and close Firebug.

Any ideas why? Is this a bug?

Guys,, need help! I am experiencing "Uncaught TypeError: $ is not a function" in WordPress. I already add a noconflict function and declare $ as var but it's still not working. I have attached a screenshot :(

(function ($) {
var body = $( 'body' );

$ ('#flashMessage').hide()

$('#previewButton').click(function() {
const title = $("#blogTitleInput").val();
const content = $("#blogContentInput").val();

$("#blogTitlePreview").text(title);
$("#blogContentPreview").html(content);

$("#flashMessage")
.slideDown(1000)
.delay(3000)
.slideUp();
});

}(jQuery));

Downloaded this template:
https://colorlib.com/download/132/

Works fine on localhost. But get following error on my cloud server:

Uncaught TypeError: $(...).easyResponsiveTabs is not a function
    at responsiveTabs (main.js:168)
    at HTMLDocument.<anonymous> (main.js:398)
    at i (jquery.min.js:2)
    at Object.fireWith [as resolveWith] (jquery.min.js:2)
    at Function.ready (jquery.min.js:2)
    at HTMLDocument.J (jquery.min.js:2)

NOTE: This error is appearing on MAC Chrome browser. Working fine on other browsers.

I'm working on a dashboard with modules that load when inview. The script works great until I change date ranges and clear out the contents of the modules. When this happens the elements inview on change do not load because they never left the view. They do not fire until I scroll down and back again. So how do I make inview see the items as new elements again?

Here is a bin of the issue I'm having. The items start yellow and then get changed to red. On click of reset the items are changed back to yellow, but because the inview already fired off the items do not respond. Anyway to get inview to behave as if on a fresh page load?

http://jsbin.com/lameya/4/edit

Hi there,

I noticed in this commit you have removed the visible part logic:

be2769f

What is the reason for this? It was a good feature.

I'm looking for a strategy for triggering the inView event on load.

Here's my situation. I bring in an affixed nav if the site's header isn't in view.

$header.on('inview', function (event, isInView) {
  if ( isInView ) {
    deactivate(); // deactivate the affixed nav
  }
  else {
    activate(); // activate the affixed nav
  }
});

My issue is that this code doesn't trigger as expected on load. When a page loads scrolled I have to scroll the $header element into view then wait for it to go back out of view for the acivate() method to be called.

Initially I tried triggering the inview event on page load, but it causes activate() to be erroneously called then deactivate() to be called afterwards.

I'm working on an app which this script works great on. Unfortunately, I've had to enclose everything in an iframe so that I can keep user uploads (photos/videos) continuing across page change in the app.

When inside the iframe, inview no longer works. Would there be an easy fix to get it to watch the iframe's content viewport?

	$( 'body' ).on( 'inview', '.arve-wrapper[data-arve-inview]', function() {
		$(this).removeAttr('data-arve-inview');
		console.log( $(this) );
		load_video( $(this) );
	});

I have this based on the img example. The console log shows that its triggered for all elements once the very first becomes visible. That should not be.

tried with $( document ) as well but same issue.

I have to do this to actually listen to elements and try to also do it for elements that are added later.

	function arve_inview() {

		$( '[data-arve-inview]' ).one( 'inview', function( event, isInView ) {
			if ( isInView ) {
				load_video( $(this) );
			}
		} );
	}

	arve_inview();

	$( document ).ajaxComplete(function() {
		arve_inview();
	});

Would be great to add an option to provide an offset, so the "inview" event would be fired only when the element is visible from 100px for example.

I'm planning to use your plugin to animate elements when scrolling, but if the elements are only visible by a few pixels, the animation starts anyway... Not cool :)

Thanks for your work !

If I refresh a page with a predefined scrollTop value (middle of page for example) and if the binded element is already outside the viewport, the "inview" event isn't triggered.

I added an else statement in the checkInView function (l.121) where I trigger an "inview" event with a false parameter.

This works for me.

Hi,

Having issues with Bower that resolves back to this install.

protonet/jquery.inview=jquery.inview is not a valid repository name

Not sure if the / is valid ?

Thanks,
Tom

jQuery cache property has been changed. Now is jQuery.expando + Math.random().
http://stackoverflow.com/questions/20979302/how-does-jquery-2-x-uniquely-identify-an-element-in-data

So, on line 12:

data.guid + "-" + this[expando]

returns [int]-undefined if you are binding multiple elements in one call.

I get the following when I use bower to try an install...

bower ECMDERR Failed to execute "git ls-remote --tags --heads protonet/jquery.inview=https://github.com/protonet/jquery.inview.git", exit code of #128 fatal: I don't handle protocol 'protonet/jquery.inview=https'

Additional error details:
fatal: I don't handle protocol 'protonet/jquery.inview=https'

Not exactly a bug, but the link to the blog post on https://github.com/protonet/jquery.inview is broken.

Great plugin – thanks!

Just added a link from http://samdutton.com/pageVisibility.

Love this. Is there a way to delay or time the amount of time spent inview? I am using fullpage.js and our animation kicks off if a user goes past the section as it does appear on screen when scrolling by but only for a milisecond but that is long enough for the animation to start. Looking for a way to say something like "once in view for >1second, do something". Thanks.

hi i am trying to upload picture but getting this error and upload button is not working

VM357:1 Uncaught TypeError: jQuery(...).uploadifyUpload is not a function
at :1:33

I get the above error when I try and open the example files

I'm using inview with fullpage.js and i'm getting into this strange issue sliding left and right:
Basically, when i'm in a specific section i wanna show the .fp-controlArrow only in the first slide, then hide them. So i assigned .hideFpNav to all slides i won't show those arrows, here is the code:
$('.hideFpNav').on('inview', function(event, isInView) { if (!isInView) { $(".fp-controlArrow").removeClass("d-none"); console.log("out of view - isInView value: ",isInView); } else { $(".fp-controlArrow").addClass("d-none"); console.log("in view - isInView value: ",isInView); } });
I attach a little gif to explain this behaviour, hope it's clear.
(In the video you'll see 3 slides:
1st: must see arrows
2nd: must hide arrows
3rd: must hide arrows )

If(isinView)/else is not firing as expected.

isInView only fires when the top of the element comes into or exits the viewport. The bottom of the element does not fire isInView at all (Also related to previously submitted issue #2 with visiblePartY=='bottom').

Expected and actual results of the following example are detailed below:

<body style="padding:2000px 0;">

 <div style="min-height:2000px;background:red;"></div>

 <script type="text/javascript">

  $('div').bind('inview', function(e, isInView, visiblePartX, visiblePartY) {       
   if (isInView) {
    console.log('Element in view');
    if (visiblePartY == 'top') {
     console.log('Top of element in view.');
    } else if (visiblePartY == 'bottom') {
     console.log('Bottom of element in view.');
    } else {
     console.log('Element is entirely in view.')
    }
   } else {
    console.log('Element no longer in view.');
   }
  });
  
 </script>
 
</body>

Expected result when scrolling down the page from the top:

1) The top edge of the element comes into the bottom of the viewport, firing "isInView" (Console log "Element in view") and "visiblePartY == 'top'" (Console log "Top of element in view").
2) Scroll down continues
3) The top edge of the element goes out of the top of the viewport. Nothing fires.
4) Scroll down continues
5) The bottom edge of the element comes into the bottom of the viewport, firing "isInView" (Console log "Element in view") and "visiblePartY == 'bottom'" (Console log "Bottom of element in view").
6) Scroll down continues
7) The bottom edge of the element goes out of the top of the viewport, firing "isInView'/else (Console log "Element no longer in view").
8) Reverse scroll, now scrolling up the page
9) The bottom edge of the element comes into the top of the viewport, firing "isInView" (Console log "Element in view") and "visiblePartY == 'bottom'" (Console log "Bottom of element in view").
10) Scroll up continues
11) The bottom edge of the element goes out of the bottom of the viewport. Nothing fires.
12) Scroll up continues
13) The top edge of the element comes into the top of the viewport, firing "isInView" (Console log "Element in view") and "visiblePartY == 'top'" (Console log "Top of element in view").
14) Scroll up continues
15) The top edge of the element goes out of the bottom of the viewport, firing "isInView'/else (Console log "Element no longer in view").
16) Scroll ends

Actual result when scrolling down the page from the top:

1) The top edge of the element comes into the bottom of the viewport, firing "isInView" (Console log "Element in view") and "visiblePartY == 'top'" (Console log "Top of element in view").
2) Scroll down continues
3) The top edge of the element goes out of the top of the viewport, firing "isInView" (Console log "Element in view") and "visiblePartY == 'bottom'" (Console log "Bottom of element in view").
4) Scroll down continues
5) The bottom edge of the element comes into the bottom of the viewport. Nothing fires.
6) Scroll down continues
7) The bottom edge of the element goes out of the top of the viewport. Nothing fires.
8) Reverse scroll, now scrolling up the page
9) The bottom edge of the element comes into the top of the viewport. Nothing fires.
10) Scroll up continues
11) The bottom edge of the element goes out of the bottom of the viewport. Nothing fires.
12) Scroll up continues
13) The top edge of the element comes into the top of the viewport, firing "isInView" (Console log "Element in view") and "visiblePartY == 'top'" (Console log "Top of element in view").
14) Scroll up continues
15) The top edge of the element goes out of the bottom of the viewport, firing "isInView'/else (Console log "Element no longer in view").
16) Scroll ends

The event doesn't fire until after scrolling has stopped on iPad, so elements don't fire as the user is scrolling down the page.

Hi there,

The README directed me to drop a comment if I need an alternate version that works with a jQuery version prior to 1.4. I kinda do :)

Is something like that available?

Hello,

I would like to know what would be the best way to reinitialize script after an AJAX call. I have post items, each in

$('article').on('inview', function(event, isInView) {
  if (isInView) {
    var spalva = $(this).attr('data-color');
    $('body').css('background-color', spalva);
  }
});

However, after and AJAX call this script only works with posts displayed on page load. Therefore I need to reinitialize jquery.inview after the call. I would be very grateful if someone could help me what would be the best way to do it.

visiblePartY is fired when the top of the element moves out of the viewport, not when the bottom of the element moves into the viewport, making it impossible to detect when the bottom of an element has appeared. Produced in FF3.6, Saf5, Chrome9 (Not tested IE, Opera). Jquery1.4.2.

Example, based on the simple example from README:

<div style="min-height:2000px;border:1px red solid;"></div>
<script type="text/javascript">
$('div').bind('inview', function(event, isInView, visiblePartX, visiblePartY) {
 if (isInView) {
  // element is now visible in the viewport
  if (visiblePartY == 'top') {
   // top part of element is visible
   console.log('Can see the top.');
  } else if (visiblePartY == 'bottom') {
   // bottom part of element is visible
   console.log('Can see the bottom.');
  } else {
   // whole part of element is visible
  }
 } else {
  // element has gone out of viewport
 }
});
</script>

Hey, maintainer(s) of protonet/jquery.inview!

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 protonet/jquery.inview 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": "protonet/jquery.inview",
  "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!

Are the visiblePartX and visiblePartY arguments as used in your advanced.html example no longer available?

Said example doesn't seem to do anything and trying it with my own code returns undefined for both third and fourth arguments.

Hello
First of all amazing plugin...
Currently using this for one of my websites for adding a active class to menu.
However, the ".currLink" class(active class) is not getting added properly on the website
Here is the link
www.prashantsani.com/projs/KDS

I'm loading stuff dynamically on a site, and noticed that inview doesn't trigger for stuff that's been added after the bind is initialized. Should I just trigger it again? I imagine there will be double binds then and possibly more strain on the CPU?

When I load this script I'm getting this error on Chrome console:

Uncaught TypeError: Cannot read property 'appendChild' of undefined at lstr.js:26

How can I fix this?

var $init = $('.onscroll-animate');
if ($init.length) {
for (var i=0, len=$init.length; i<len; i++) {
$init.bind('inview', function(event, isInView) {
var $this = $(this);
if (isInView) {
$this.addClass($this.data("animation"));
} else {
$this.removeClass($this.data("animation"));
}
console.log(isInView);
});
}
}

isInView - возвращает постоянно true или false для элементов которые в css определены за границами видимости.

I have a chat box where it scrolls to the bottom and loads all the chats,(which includes images).
It's working fine in browser, but images not loading in the mobile devices

var wrap = $("html,body #chatdiv");
wrap.on("load scroll", function(e) {
$('.chats_attachments').bind('inview', function (event, visible) {
var status = $(this).attr("data-loaded");

			if(status == 0)
			{
				var src = $(this).attr("data-src");
				$(this).attr("src",base_url+"/assets/img/chats/"+src);
				
				$(this).load(function() {
				  $(this).attr("data-loaded",1);
				});
			}
	 });
});

Why this is happening, Check the screenshots

This is the mobile view... I have a fake image which willl be converted to the actual image using data-src attribute

Another bottleneck of performance is the calculation of the elements width and height via jQuery methods width() and height().

How about using offsetWidth and offsetHeight for getting the elements width and height?

The difference between them is that offsetWidth/offsetHeight includes padding, border and margin.
But the performance would increase drastically.

jQueryApi doc of width: http://api.jquery.com/width/
offset doc: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.offsetWidth

Comparison of performance:
http://jsperf.com/offsetwidth-vs-jquery-width
http://jsperf.com/jquery-css-vs-width-vs-native-width/4

pls add to http://www.jsdelivr.com/ CDN

I'm using jQuery Lazy Load plugin and including the inview plugin, but not calling it, causes the lazy load plugin to stop working because it usurps the "scrollstop" event.
https://github.com/ssorallen/jquery-scrollstop
https://github.com/tuupola/jquery_lazyload

"scrollstop" is not a normal browser or jquery event. Why is it included and overwriting other binds?

Hello, i'm planning to add jquery.inview to cdnjs [1], it would be great if you tag a release so that it would be easier to identify the version of the code. Thanks!

[1] https://github.com/cdnjs/cdnjs

https://protonet.info/blog/the-jquery-inview-plugin/?lang=de

Hello.
This plugin works great. But I noticed one issue: after I resize page, event handler get wrong params. Element that is now in viewport gets isInView == false, and element that is under the viewport gets isInView == true. That's why "visible" class is removed and element in viewport just disappears.
After page reload with this page size it works ok.

I use this code:

$('div.section').on('inview', function(event, isInView, visiblePartX, visiblePartY) {
        var $this = $(this);

        if (isInView) {
            $this.addClass("visible");
        }
        else{
            $this.removeClass("visible");
        }
    });

Webkit based browsers works fine, problem in Opera 12, latest Firefox and IE.
Also I tried disable media-queries with no luck.

Or I have to rebind event handlers after each resize?

Screenshot - http://s7.hostingkartinok.com/uploads/images/2014/12/2e41d91a3098988412bd5634796e8a33.png

Hi there!

I'm already using this plugin to load data automatically when a user reaches the bottom of the contents and it works great.

Now I'm trying to display a list on a fixed height div. The event 'inview' is firing as soon as I attach the event even though the element is not in view yet. My guess is that this is happening because the plugin always considers the whole viewport. Is there any way to tell the plugin that my viewport in this case is certain div and not the entire window?

Regards,
t3ch

Hello,

I want to trigger counter to start when class .count is in view.
I have that class on top and on bottom of page, so using if(isInView) it get triggered only when I scroll down to bottom class and then top class is also triggered.

Is there solution beside making .count1 and .count2 ?

Thanks

.live function is working ok, but it was deprecated from jquery 1.9

When I try to use .on instead - it's working only before ajax call