tuupola · tuupola · Feb 2, 2016 · Oct 5, 2010 · Oct 5, 2010 · Oct 5, 2010
diff --git a/jquery.viewport.js b/jquery.viewport.js
@@ -11,7 +11,7 @@
  *
  */
 (function($) {
-    
+
     $.belowthefold = function(element, settings) {
         var fold = $(window).height() + $(window).scrollTop();
         return fold <= $(element).offset().top - settings.threshold;
@@ -21,21 +21,58 @@
         var top = $(window).scrollTop();
         return top >= $(element).offset().top + $(element).height() - settings.threshold;
     };
-    
+
     $.rightofscreen = function(element, settings) {
         var fold = $(window).width() + $(window).scrollLeft();
         return fold <= $(element).offset().left - settings.threshold;
     };
-    
+
     $.leftofscreen = function(element, settings) {
         var left = $(window).scrollLeft();
         return left >= $(element).offset().left + $(element).width() - settings.threshold;
     };
-    
+
     $.inviewport = function(element, settings) {
-        return !$.rightofscreen(element, settings) && !$.leftofscreen(element, settings) && !$.belowthefold(element, settings) && !$.abovethetop(element, settings);
+        var $element = $(element);
+        var offset = $element.offset();
+
+        var $window = $(window);
+        var windowTop = $window.scrollTop();
+        var threshold = settings.threshold;
+
+        if (offset.top - threshold < windowTop) {
+            if (offset.top + $element.height() + threshold >= windowTop) {
+                // top edge below the window's top
+            } else {
+                return false;
+            }
+        } else {
+            if (offset.top - threshold <= windowTop + $window.height()) {
+                // bottom edge above the window's bottom
+            } else {
+                return false;
+            }
+        }
+
+        var windowLeft = $window.scrollLeft();
+
+        if (offset.left - threshold < windowLeft) {
+            if (offset.left + $element.width() + threshold >= windowLeft) {
+                // left edge be on the left side of the window's left edge
+            } else {
+                return false;
+            }
+        } else {
+            if (offset.left - threshold <= windowLeft + $window.width()) {
+                // right edge be on the right side of the window's right edge
+            } else {
+                return false;
+            }
+        }
+
+        return true;
     };
-    
+
     $.extend($.expr[':'], {
         "below-the-fold": function(a, i, m) {
             return $.belowthefold(a, {threshold : 0});
@@ -54,5 +91,5 @@
         }
     });
 
-    
+
 })(jQuery);
diff --git a/test/index.html b/test/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<title>jQuery.viewport tests</title>
+	<link rel="stylesheet" href="vendor/qunit.css">
+	<script src="vendor/qunit.js"></script>
+	<script src="jquery.viewport.test.js"></script>
+</head>
+<body id="qunit-wrapper">
+	<iframe src="threshold_test.html" width="200" height="100"></iframe>
+	<h1 id="qunit-header">jQuery.viewport tests</h1>
+	<h2 id="qunit-banner"></h2>
+	<div id="qunit-testrunner-toolbar"></div>
+	<ol id="qunit-tests"></ol>
+	<h2 id="qunit-userAgent"></h2>
+</body>
+</html>
diff --git a/test/jquery.viewport.test.js b/test/jquery.viewport.test.js
@@ -0,0 +1,16 @@
+test("threshold", function(){
+    var frame = frames[0];
+    var img = frame.$("img");
+    ok(!frame.$.inviewport(img, {threshold: 0}), "left 0");
+    ok(!frame.$.inviewport(img, {threshold: 50}), "left 50");
+    ok(frame.$.inviewport(img, {threshold: 150}), "left 150");
+
+    frame.scroll(1200, 0);
+
+    ok(!frame.$.inviewport(img, {threshold: 0}), "right 0");
+    ok(frame.$.inviewport(img, {threshold: 400}), "right 400");
+
+    frame.scroll(600, 300);
+
+    ok(frame.$.inviewport(img, {threshold: -100}), "middle -100");
+});
diff --git a/test/threshold_test.html b/test/threshold_test.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<title>Threshold test</title>
+	<style>
+	body {
+		margin: 0;
+		border: 0;
+	}
+	img {
+		margin-left: 300px;
+        margin-right: 400px;
+	}
+	</style>
+	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
+	<script src="../jquery.viewport.js"></script>
+</head>
+<body>
+	<img src="../img/viper_1.jpg">
+</body>
+</html>
diff --git a/test/vendor/qunit.css b/test/vendor/qunit.css
@@ -0,0 +1,217 @@
+/** Font Family and Sizes */
+
+#qunit-wrapper {
+	font-family: "Helvetica Neue", Helvetica, sans-serif;
+}
+
+#qunit-testrunner-toolbar, #qunit-userAgent, #qunit-testresult, #qunit-tests li { font-size: small; }
+#qunit-tests { font-size: smaller; }
+
+
+/** Resets */
+
+#qunit-wrapper, #qunit-tests, #qunit-tests ol, #qunit-header, #qunit-banner, #qunit-testresult {
+	margin: 0;
+	padding: 0;
+}
+
+
+/** Header */
+
+#qunit-header {
+	font-family: "Helvetica Neue Light", "HelveticaNeue-Light", "Helvetica Neue", Helvetica, sans-serif;
+	padding: 0.5em 0 0.5em 1em;
+	font-weight: normal;
+	background-color: #0d3349;
+}
+
+#qunit-header a {
+	text-decoration: none;
+	color: #bad2df;
+}
+
+#qunit-header a:hover,
+#qunit-header a:focus {
+	color: white;
+	text-shadow: 0 0 4px #5deeff;
+}
+
+#qunit-banner.qunit-pass {
+	height: 3px;
+}
+#qunit-banner.qunit-fail {
+	height: 5px;
+}
+
+#qunit-testrunner-toolbar {
+	padding: 0 0 0.5em 2em;
+}
+
+#qunit-testrunner-toolbar label {
+	margin-right: 1em;
+}
+
+#qunit-userAgent {
+	padding: 0.5em 0 0.5em 2.5em;
+	font-weight: normal;
+	color: #666;
+}
+
+
+/** Tests: Pass/Fail */
+
+#qunit-tests {
+	list-style-type: none;
+	background-color: #D2E0E6;
+}
+
+#qunit-tests li {
+	padding: 0.4em 0.5em 0.4em 2.5em;
+}
+
+#qunit-tests li strong {
+	font-weight: normal;
+	cursor: pointer;
+}
+
+#qunit-tests ol {
+	margin: 0.5em 0 1em;
+	background-color: #fff;
+}
+
+#qunit-tests table {
+	border-collapse: collapse;
+}
+
+#qunit-tests th {
+	text-align: right;
+	vertical-align: top;
+	padding: 0 .5em 0 0;
+}
+
+#qunit-tests td {
+	vertical-align: top;
+}
+
+#qunit-tests pre {
+	margin: 0;
+	white-space: pre-wrap;
+	word-wrap: break-word;
+}
+
+#qunit-tests del {
+	background-color: #e0f2be;
+	color: #374e0c;
+	text-decoration: none;
+}
+
+#qunit-tests ins {
+	background-color: #ffcaca;
+	color: #500;
+	text-decoration: none;
+}
+
+#qunit-tests table {
+	border-collapse: collapse;
+	margin-top: .2em;
+}
+
+#qunit-tests th {
+	text-align: right;
+	vertical-align: top;
+	padding: 0 .5em 0 0;
+}
+
+#qunit-tests td {
+	vertical-align: top;
+}
+
+#qunit-tests pre {
+	margin: 0;
+	white-space: pre-wrap;
+	word-wrap: break-word;
+}
+
+#qunit-tests del {
+	background-color: #e0f2be;
+	color: #374e0c;
+	text-decoration: none;
+}
+
+#qunit-tests ins {
+	background-color: #ffcaca;
+	color: #500;
+	text-decoration: none;
+}
+
+/*** Test Counts */
+
+#qunit-tests b.passed                       { color: #5E740B; }
+#qunit-tests b.failed {
+	color: #710909;
+}
+#qunit-tests li.fail .failed {
+	color: #EE5757;
+}
+#qunit-tests li.fail .passed {
+	color: #d3ff9a;
+}
+
+#qunit-tests li li {
+	margin-left: 2.5em;
+	padding: 0.7em 0.5em 0.7em 0;
+	background-color: #fff;
+	border-bottom: none;
+}
+
+#qunit-tests b.counts {
+	font-weight: normal;
+}
+
+/*** Passing Styles */
+
+#qunit-tests li li.pass {
+	color: #5E740B;
+	background-color: #fff;
+
+}
+
+#qunit-tests .pass                          { color: #2f3424; background-color: #d9dec3; }
+#qunit-tests .pass .module-name             { color: #636b51; }
+
+#qunit-tests .pass .test-actual,
+#qunit-tests .pass .test-expected           { color: #999999; }
+
+#qunit-banner.qunit-pass                    { background-color: #C6E746; }
+
+/*** Failing Styles */
+
+#qunit-tests li li.fail {
+	color: #710909;
+	background-color: #fff;
+}
+
+#qunit-tests .fail                          { color: #fff; background-color: #962323; }
+#qunit-tests .fail .module-name             { color: #c28e8e; }
+
+#qunit-tests .fail .test-actual             { color: #EE5757; }
+#qunit-tests .fail .test-expected           { color: green;   }
+
+#qunit-banner.qunit-fail, 
+#qunit-testrunner-toolbar                   { color: #dec1c1; background-color: #962323; }
+
+
+/** Footer */
+
+#qunit-testresult {
+	padding: 0.5em 0.5em 0.5em 2.5em;
+	color: #333;
+}
+
+/** Fixture */
+
+#qunit-fixture {
+	position: absolute;
+	top: -10000px;
+	left: -10000px;
+}