Master

.gitignore

@@ -0,0 +1 @@
+.tm_sync.config

.npmignore

@@ -0,0 +1,2 @@
+test/
+example/

LICENSE

@@ -1,41 +1,13 @@
-Attribution-Non-Commercial-Share Alike 2.0 UK: England & Wales
+           DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
+                   Version 2, December 2004
 
-http://creativecommons.org/licenses/by-nc-sa/2.0/uk/
+Copyright (C) 2004 Sam Hocevar <[email protected]>
 
-You are free:
+Everyone is permitted to copy and distribute verbatim or modified
+copies of this license document, and changing it is allowed as long
+as the name is changed.
 
-    * to copy, distribute, display, and perform the work
-    * to make derivative works
-
-
-Under the following conditions:
-
-    * Attribution — You must give the original author credit.
-      Attribute this work:
-      Information
-      What does "Attribute this work" mean?
-      The page you came from contained embedded licensing metadata, 
-      including how the creator wishes to be attributed for re-use. 
-      You can use the HTML here to cite the work. Doing so will 
-      also include metadata on your page so that others can find the 
-      original work as well.
-
-    * Non-Commercial — You may not use this work for commercial 
-      purposes.
-    * Share Alike — If you alter, transform, or build upon this 
-      work, you may distribute the resulting work only under a 
-      licence identical to this one.
-
-With the understanding that:
-
-    * Waiver — Any of the above conditions can be waived if you get 
-      permission from the copyright holder.
-    * Other Rights — In no way are any of the following rights 
-      affected by the license:
-          o Your fair dealing or fair use rights;
-          o The author's moral rights;
-          o Rights other persons may have either in the work itself 
-            or in how the work is used, such as publicity or privacy rights.
-    * Notice — For any reuse or distribution, you must make clear to 
-      others the licence terms of this work.
+           DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
+  TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION
 
+ 0. You just DO WHAT THE FUCK YOU WANT TO.

README.md

@@ -0,0 +1,64 @@
+# Element 'inview' Event Plugin
+
+Event that is fired as soon as an element appears in the user's viewport.
+
+* **Author:** [Christopher Blum](http://twitter.com/ChristopherBlum)
+* **Original idea and concept by:** [Remy Sharp](http://remysharp.com/2009/01/26/element-in-view-event-plugin/)
+* **Forked from:** [https://github.com/zuk/jquery.inview/](https://github.com/zuk/jquery.inview/)
+* **Requires:** jQuery 1.8+
+
+## Usage
+
+The script makes use of the new $.contains method - so it will only work with jQuery 1.8 upwards. If you need to use it with older versions of jQuery, drop a comment, and I'll post an alternative.
+
+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.
+
+The variable after the event argument indicates the visible state in the viewport.
+
+    $('div').on('inview', function(event, isInView) {
+      if (isInView) {
+        // element is now visible in the viewport
+      } else {
+        // element has gone out of viewport
+      }
+    });
+
+To stop listening for the event - simply unbind:
+
+    $('div').off('inview');
+
+If you would like the event only to trigger once per element while the page is loaded, you can use the .one() method instead of .on():
+
+    $('div').one('inview', ...);
+
+Live events
+
+Yep, inview events can also be used with .on/.delegate methods.
+*Please note that this could slow down your app when the selector is too complex and/or matches a huge set of elements.*
+The following code snippet only loads images when they appear in the browser's viewport.
+
+    // Assuming that all images have set the 'data-src' attribute instead of the 'src'attribute
+    $("body").on("inview", "img[data-src]", function() {
+      var $this = $(this);
+      $this.attr("src", $this.attr("data-src"));
+      // Remove it from the set of matching elements in order to avoid that the handler gets re-executed
+      $this.removeAttr("data-src");
+    });
+
+## Use cases
+
+* Reduce http requests and traffic on server by loading assets (images, javascript, html, ...) only when they are visible to the user
+* Endless scrolling (twitter-like)
+* Tracking (eg. to see whether a user has read an entire article)
+* ...
+
+## Browser Compatibility
+
+The Test Suite succeeds in the following browsers that were tested:
+
+* Firefox 3+
+* Safari 3+
+* Chrome 7+
+* Opera 10+
+* IE 6+
+* Mobile Safari on iPad 4.2.2

bower.json

@@ -0,0 +1,6 @@
+{
+  "name": "protonet.jquery.inview",
+  "version": "1.1.2",
+  "main": "jquery.inview.js",
+  "description": "jQuery event that is fired as soon as an element appears in the user's viewport."
+}

example/advanced.html

@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>jquery.inview - Example</title>
+  <meta name="viewport" content="initial-scale=1.0, width=device-width, height=device-height">
+  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
+  <script src="../jquery.inview.js"></script>
+  <style>
+    body {
+      font-family: Arial, Verdana, sans-serif;
+      font-size: 12px;
+      position: relative;
+      width: 5000px;
+      height: 5000px;
+    }
+    #abs-element {
+      left: 50%;
+      top: 50%;
+      position: absolute;
+      width: 200px;
+      height: 100px;
+      border: 2px solid red;
+      margin-top: -52px;
+      margin-left: -102px;
+    }
+  </style>
+</head>
+<body>
+  Scroll to the <a href="#abs-element">middle</a> of this page!
+  <div id="abs-element">
+    <div>visiblePartX: <span id="visible-part-x"></span></div>
+    <div>visiblePartY: <span id="visible-part-y"></span></div>
+  </div>
+
+  <script>
+    $('#abs-element').bind('inview', function(event, visible, visiblePartX, visiblePartY) {
+      if (visible) {
+        $('#visible-part-x').html(visiblePartX);
+        $('#visible-part-y').html(visiblePartY);
+      } else {
+        $('#visible-part-x, #visible-part-y').html('');
+      }
+    });
+  </script>
+</body>
+</html>