Added percentage based offset #22

dirkgroenen · dirkgroenen · commit b762ed384591 · 2015-04-25T14:11:04.000+02:00
diff --git a/README.md b/README.md
@@ -28,7 +28,7 @@ The currently available global options are:
 $('.dummy').viewportChecker({
     classToAdd: 'visible', // Class to add to the elements when they are visible
     classToRemove: 'invisible', // Class to remove before adding 'classToAdd' to the elements
-    offset: 100, // The offset of the elements (let them appear earlier or later)
+    offset: [100 OR 10%], // The offset of the elements (let them appear earlier or later). This can also be percentage based by adding a '%' at the end
     invertBottomOffset: true, // Add the offset as a negative number to the element's bottom
     repeat: false, // Add the possibility to remove the class if the elements are not visible
     callbackFunction: function(elem, action){}, // Callback to do after a class was added to an element. Action will return "add" or "remove", depending if the class was added or removed
@@ -42,7 +42,7 @@ Available attributes are:
 ```code
 <div data-vp-add-class="random"></div>          >   classToAdd
 <div data-vp-remove-class="random"></div>       >	classToRemove
-<div data-vp-offset="100"></div>                >	offset
+<div data-vp-offset="[100 OR 10%]"></div>                >	offset
 <div data-vp-repeat="true"></div>               >	repeat
 <div data-vp-scrollHorizontal="false"></div>    >	scrollHorizontal
 ```
diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "jQuery-viewport-checker",
-  "version": "1.7.4",
+  "version": "1.8.0",
   "homepage": "https://github.com/dirkgroenen/jQuery-viewport-checker",
   "authors": [
     "Dirk Groenen <dirk@bitlabs.nl>",
diff --git a/demo/index.html b/demo/index.html
@@ -69,7 +69,7 @@
 
     <body>
         <div class="spacer"><div class="text">Scroll down</div></div>
-        <div class="dummy" data-vp-add-class="visible random1" data-vp-repeat="true" data-vp-offset="100" style="background-color: #2ecc71;">element 1 (repeat=true, offset=100)</div>
+        <div class="dummy" data-vp-add-class="visible random1" data-vp-repeat="true" data-vp-offset="50%" style="background-color: #2ecc71;">element 1 (repeat=true, offset=100)</div>
         <div class="spacer"></div>
         <div class="dummy" data-vp-add-class="visible random1" data-vp-repeat="false" data-vp-offset="100" style="background-color: #9b59b6;">element 2 (repeat=false, offset=100)</div>
         <div class="spacer"></div>
diff --git a/src/jquery.viewportchecker.js b/src/jquery.viewportchecker.js
@@ -1,5 +1,5 @@
 /*
-    Version 1.7.4
+    Version 1.8.0
     The MIT License (MIT)
 
     Copyright (c) 2014 Dirk Groenen
@@ -79,6 +79,12 @@
                     return;
                 }
 
+                // Check if the offset is percentage based
+                if(String(objOptions.offset).indexOf("%") > 0)
+                    objOptions.offset = (parseInt(objOptions.offset) / 100) * windowSize.height;
+
+                console.log(objOptions.offset);
+
                 // define the top position of the element and include the offset which makes is appear earlier or later
                 var elemStart = (!objOptions.scrollHorizontal) ? Math.round( $obj.offset().top ) + objOptions.offset : Math.round( $obj.offset().left ) + objOptions.offset,
                     elemEnd = (!objOptions.scrollHorizontal) ? elemStart + $obj.height() : elemStart + $obj.width();

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "jQuery-viewport-checker",`
`3`		`- "version": "1.7.4",`
	`3`	`+ "version": "1.8.0",`
`4`	`4`	`"homepage": "https://github.com/dirkgroenen/jQuery-viewport-checker",`
`5`	`5`	`"authors": [`
`6`	`6`	`"Dirk Groenen <[email protected]>",`