Fixed attributes and added some other values

dirkgroenen · Nov 24, 2014 · d7a8784 · d7a8784
1 parent 39681ed
commit d7a8784
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 66 deletions.
diff --git a/demo/data-attributes.html b/demo/data-attributes.html
diff --git a/demo/index.html b/demo/index.html
@@ -4,7 +4,7 @@
     <head>
 
         <script src="http://code.jquery.com/jquery.js"></script>
-        <script src="jquery.viewportchecker.js"></script>
+        <script src="../src/jquery.viewportchecker.js"></script>
 
         <style>
             body,html{
@@ -34,17 +34,10 @@
 
         <script>
             $(document).ready(function(){
-                // Create dummy data
-                for(var i = 0; i < 20; i++){
-                    $('body').append("<div class='dummy' style='background-color: rgb("+ Math.floor(Math.random()*10)+1 +","+ Math.floor(Math.random()*10)+1 +","+ Math.floor(Math.random()*00)+1 +")'>visible</div>");
-                }
-
                 $('.dummy').viewportChecker({
-                    offset: 200,
-                    repeat: true,
                     callbackFunction: function(elem, action){
                         setTimeout(function(){
-                            elem.html((action == "add") ? 'Changed by callback, add' : 'Changed by callback, remove');
+                            elem.html((action == "add") ? 'Callback with 500ms timeout: added class' : 'Callback with 500ms timeout: removed class');
                         },500);
                     }
                 });
@@ -53,5 +46,12 @@
     </head>
 
     <body>
+        <div class="dummy" data-vp-add-class="visible random1" data-vp-repeat="true" data-vp-offset="100" style="background-color: #2ecc71;">element 1</div>
+        <div class="dummy" data-repeat="true" data-vp-offset="100" style="background-color: #9b59b6;">element 2</div>
+        <div class="dummy" data-vp-add-class="visible random3" data-vp-offset="100" style="background-color: #3498db;">element 3</div>
+        <div class="dummy" data-vp-add-class="visible random4" data-vp-offset="100" style="background-color: #e74c3c;">element 4</div>
+        <div class="dummy" data-vp-add-class="visible random5" data-vp-repeat="true" data-vp-offset="10" style="background-color: #e67e22;">element 5</div>
+        <div class="dummy" data-vp-add-class="visible random6" data-vp-repeat="true" data-vp-offset="200" style="background-color: #f1c40f;">element 6</div>
+        <div class="dummy" data-vp-add-class="visible random7" data-vp-repeat="true" data-vp-offset="50" style="background-color: #34495e;">element 7</div>
     </body>
 </html>