Skip to content

Commit 0f86575

Browse files
author
Matthew Frey
committed
Updated read me
1 parent 64d9c0d commit 0f86575

File tree

1 file changed

+8
-64
lines changed

1 file changed

+8
-64
lines changed

README.textile

Lines changed: 8 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
h1. Element 'inview' Event Plugin
1+
h1. jQuery inview2
22

33
Event that is fired as soon as an element appears in the user's viewport.
4+
Modified version of protonet's jquery.inview to use the more modern (and much faster) getBoundingClientRect() method.
5+
Props to him for his work on the original inview, but I found myself in need of a better-performing solution.
46

5-
*Author:* "Christopher Blum":http://twitter.com/ChristopherBlum
6-
*Original idea and concept by:* "Remy Sharp":http://remysharp.com/2009/01/26/element-in-view-event-plugin/
7-
*Forked from:* "https://github.com/zuk/jquery.inview/":https://github.com/zuk/jquery.inview/
8-
*Demo* (loading lolcats when they scroll into view): "http://tifftiff.de/jquery.inview/example/live_event.html":http://tifftiff.de/jquery.inview/example/live_event.html
7+
*Author:* Matthew Frey
8+
*Forked from:* "https://github.com/protonet/jquery.inview/":https://github.com/protonet/jquery.inview/
99
*Requires:* jQuery 1.4+
1010

1111
h2. Usage
@@ -15,19 +15,10 @@ The script makes use of the new $.contains method - so it will only work with jQ
1515
The event will only fire when the element comes in to view of the viewport, and out of view. It won't keep firing if the user scrolls and the element remains in view.
1616

1717
The variable after the event argument indicates the visible state in the viewport.
18-
The third variable visiblePartX detects which horizontal part of the element is visible to the user (possible values: left, right, both)
19-
The fourth variable visiblePartY detects which vertical part of the element is visible to the user (possible values: top, bottom, both)
2018

21-
bc.. $('div').bind('inview', function(event, isInView, visiblePartX, visiblePartY) {
19+
bc.. $('div').bind('inview', function(event, isInView) {
2220
if (isInView) {
2321
// element is now visible in the viewport
24-
if (visiblePartY == 'top') {
25-
// top part of element is visible
26-
} else if (visiblePartY == 'bottom') {
27-
// bottom part of element is visible
28-
} else {
29-
// whole part of element is visible
30-
}
3122
} else {
3223
// element has gone out of viewport
3324
}
@@ -55,41 +46,9 @@ bc.. // Assuming that all images have set the 'data-src' attribute instead of t
5546
$this.removeAttr("data-src");
5647
});
5748

58-
h2. More complex example
59-
60-
This way we can attach inview to some DIV in our code to, for example, detect when it FULLY readed by user (user sees it's bottom and top) and only after 1 seconds of view, so after we call some out stats function or whatever
61-
62-
bc.. $(someMyOneDiv).bind('inview', function(e, isInView, visiblePartX, visiblePartY) {
63-
var elem = $(this);
64-
65-
if (elem.data('inviewtimer')) {
66-
clearTimeout(elem.data('inviewtimer'));
67-
elem.removeData('inviewtimer');
68-
}
69-
70-
if (isInView) {
71-
elem.data('inviewtimer', setTimeout(function() {
72-
if (visiblePartY == 'top') {
73-
elem.data('seenTop', true);
74-
} else if (visiblePartY == 'bottom') {
75-
elem.data('seenBottom', true);
76-
} else {
77-
elem.data('seenTop', true);
78-
elem.data('seenBottom', true);
79-
}
80-
81-
if (elem.data('seenTop') && elem.data('seenBottom')) {
82-
elem.unbind('inview');
83-
// here we will do WHAT WHE NEED (for ex. Call Ajax stats collector)
84-
...
85-
}
86-
}, 1000));
87-
}
88-
});
89-
9049
h2. How it works
9150

92-
An interval in the background checks the position of the elements against the viewport dimensions and the scroll position.
51+
An interval in the background checks the position of the bounding rectangle of elements against the viewport dimensions and the scroll position.
9352

9453
However, I wanted to create a utility that would only check the elements that were registered under the 'inview' event, i.e. I didn't want to keep checking the element list if we unbind from the event.
9554

@@ -102,22 +61,7 @@ h2. Use cases
10261
* Reduce http requests and traffic on server by loading assets (images, javascript, html, ...) only when they are visible to the user
10362
* Endless scrolling (twitter-like)
10463
* Tracking (eg. to see whether a user has read an entire article)
105-
* ...
10664

10765
h2. Browser Compatibility
10866

109-
h4. The Test Suite succeeds in the following browsers that were tested:
110-
111-
* Firefox 3+
112-
* Safari 3+
113-
* Chrome 7+
114-
* Opera 10+
115-
* IE 6+
116-
* Mobile Safari on iPad 4.2.2
117-
* Fennec 4b on Android 2.2
118-
* Opera Mobile 10.1b on Android 2.2
119-
120-
h4. The Test Suite doesn't completely succeed but the demos in this repository work without problems in the following browsers:
121-
122-
* Mobile WebKit on Android 2.2
123-
* Mobile WebKit on Palm Pre 1
67+
Haven't had a chance to test this yet, but the cornerstone of this plugin, getBoundingClientRect, should work in any modern browser as well as IE7+

0 commit comments

Comments
 (0)