Permalink
Browse files

Class Suport Activate!

Adding support for HTML Classes!
Few other logical adjustments.
Successfully reached version 0.0.2
  • Loading branch information...
Gelus
Gelus committed Mar 11, 2013
1 parent a0e3888 commit 4359059f107e9c72ff6f6f5e2aeb73728b579b7b
Showing with 226 additions and 48 deletions.
  1. +54 −7 README.md
  2. +66 −5 index.html
  3. +106 −36 scrobMaster.js
View
@@ -65,9 +65,14 @@ For ease of use ScrobMaster methods can be chained and most accept objects to at
</script>
</pre>
Please note: In the examples above to raise the bufferEnter's trigger point a negative value was used. This is because ScrobMaster positioning is based off scrollTop, Larger numbers are further down on the page and the opposite for smaller. The top of the page being located at 0.
+<hr>
<h3>ScrobMaster API</h3>
<h5>Register</h5>
-<pre>scrob.register("elementID");</pre>
+<pre>
+ scrob.register("elementID");
+ scrob.register("#elementID");
+ scrob.register(".className");
+</pre>
Registers and returns a new Scrobject on the scrobMaster.
Registered elements are accessible off the scrobMaster via the ID passed into the register method.
Chain-able.
@@ -91,12 +96,15 @@ Chain-able Returns ScrobMaster or Scrobject it was called on.
<pre>scrob.getScrollTop()</pre>
Not Chain-able.
Returns the current scroll position of the window.
-
+<hr>
<h3>ScrobJect API</h3>
Methods outlined below are called off a registered scrobject, eg. scrob.bob2.methodCall();
<h5>set</h5>
-<pre>scrob.bob2.set(property[, val])</pre>
+<pre>
+ scrob.bob2.set(property[, val])
+ scrob.bob2.set({"property":val });
+</pre>
set properties and or events for your scrobject.<br />
accepts object with prop:val pairs<br />
@@ -125,12 +133,20 @@ Attachable methods:
Event method functions accept the current ScobMaster scrollState, described below, as their only parameter
<h5>on</h5>
-<pre>scrob.bob2.on(method[, val])</pre>
+<pre>
+ scrob.bob2.on(method[, val])
+ scrob.bob2.on({"method":val})
+</pre>
Syntactical alias for set - Used to assign scroll events<br />
+accepts object with prop:val pairs<br />
Chain-able, returns scrobject called on.
<h5>addon</h5>
-<pre>scrob.bob2.addon(method[, val])</pre>
+<pre>
+ scrob.bob2.addon(method[, val])
+ scrob.bob2.addon({"method":val})
+</pre>
Similar to the "on" method, used to assign scroll events in addition to previously defined handles rather than replace them.<br />
+accepts objects with prop:val pairs<br />
Chain-able, returns scrobject called on.<br />
example
<pre>
@@ -148,9 +164,9 @@ The element that the scrobject affects
<pre>scrob.bob2.style</pre>
Shorthand to the affected elements style attribute.
-
+<hr>
<h3>Inside the event handler function</h3>
-Here is some information about the handlers you pass when setting events:
+Here is some information about the handles you pass when setting events:
<h5>ScrobMaster scrollState argument</h5>
scrollState is updated on scroll and passed in to each event method defined when trigged.
Property
@@ -173,3 +189,34 @@ Inside of a handler function "this" refers to the scrobject you are affecting.
});
</pre>
+<hr>
+<h3>Working with Classes and ScrobMaster</h3>
+<p>ScrobMaster supports registering a group of elements at the same time through the use of a CSS class selector.
+ Registering with a class selector will return a scrobarray object in the same way a scrobject would be returned. The scrobarray object has the same methods and properties as the basic scrobject. The difference is, rather than applying them to a single element, a scrobarray houses an array of nodes. (scrob.scrobarray.nodes) These nodes are essentially scrobject that prototype thier parental scrobarray.</p>
+<p>Each node has the ability to support it's own set of handles that will overide the scrobarray handles.<br />Scrobarray nodes are only available to edit after the dom has loaded.</p>
+
+example:
+<pre>
+ //register the className will construct and return a new scrobarray.
+ scrob.register('classBob');
+
+ //set the enter, exit events and trigger top for every node on the scrobarray, will again return the scrobarray
+ scrob.classBob.set({
+ "enter": function(state){this.style.backgroundColor = "blue"},
+ // turn blue when element is entered
+ "exit": function(state){this.style.backgroundColor = "white"},
+ // turn white when elemtn is exited
+ "top": -100
+ // set trigger point to be 100px above each element
+ });
+
+ //change the enter event for the second node after it is available for editing
+ window.onload = function(){
+ scrob.classBob.nodes[1].set("enter", funciton(state){this.style.backgroundColor = "green"});
+ // This will overwite the previously set enter event for THIS NODE ONLY.
+ // All others will function as previously defined
+ // returns the ScrobArrayNode that was called upon.
+
+ }
+
+</pre>
View
@@ -6,16 +6,28 @@
scrob.register('bob2').addon({
'enter': function(scrollState){ this.elm.style.backgroundColor = (scrollState.direction == "up")? "red":"blue";},
'exit': function(scrollState){ this.elm.style.backgroundColor = "green";}
- }).register('nestedBob').on({
+ }).register('#nestedBob').on({
'enter': function(){
this.style.backgroundColor = "#FFF"
- console.log("in", this.absoluteTop);
+ //console.log("in", this.absoluteTop);
},
'exit': function(){
this.style.backgroundColor = "#000"
- console.log("out", this.absoluteBottom);
+ //console.log("out", this.absoluteBottom);
}
- })
+ }).addon('enter', function(state){this.style.border = "solid 2px yellow";});
+
+ scrob.register('.classBob').set({
+ 'top': -200,
+ 'bottom': -200,
+ 'enter': function(state){this.style.backgroundColor = "gray";},
+ 'exit': function(state){this.style.backgroundColor = "white";}
+ }).register('.classBob2').on({
+ 'top': -200,
+ 'bottom': -200,
+ 'enter': function(state){this.style.backgroundColor = "red";},
+ 'exit': function(state){this.style.backgroundColor = "white";}
+ });
</script>
<style>
.bob{
@@ -34,10 +46,59 @@
border: solid 1px red;
height: 300px;
}
+ .classBob{
+ position: absolute;
+ height: 50px;
+ width: 50px;
+ border: solid 1px gray;
+ }
+ #classBob1{left: 20px;bottom: 20px;}
+ #classBob2{left: 90px;bottom: 60px;}
+ #classBob3{left: 160px;bottom: 100px;}
+ #classBob13{left: 230px;bottom: 140px;}
+ #classBob14{left: 300px;bottom: 180px;}
+ #classBob15{left: 370px;bottom: 220px;}
+ #classBob16{left: 440px;bottom: 260px;}
+ #classBob17{left: 510px;bottom: 300px;}
+ #classBob18{left: 580px;bottom: 340px;}
+ .classBob2{
+ position: absolute;
+ height: 50px;
+ width: 50px;
+ border: solid 1px gray;
+ }
+ #classBob4{right: 20px;bottom: 20px;}
+ #classBob5{right: 90px;bottom: 60px;}
+ #classBob6{right: 160px;bottom: 100px;}
+ #classBob7{right: 230px;bottom: 140px;}
+ #classBob8{right: 300px;bottom: 180px;}
+ #classBob9{right: 370px;bottom: 220px;}
+ #classBob10{right: 440px;bottom: 260px;}
+ #classBob11{right: 510px;bottom: 300px;}
+ #classBob12{right: 580px;bottom: 340px;}
</style>
</head>
<body>
- <div class="bob" id="bob1"></div>
+ <div class="bob" id="bob1">
+ <div class="classBob" id="classBob1"></div>
+ <div class="classBob" id="classBob2"></div>
+ <div class="classBob" id="classBob3"></div>
+ <div class="classBob" id="classBob13"></div>
+ <div class="classBob" id="classBob14"></div>
+ <div class="classBob" id="classBob15"></div>
+ <div class="classBob" id="classBob16"></div>
+ <div class="classBob" id="classBob17"></div>
+ <div class="classBob" id="classBob18"></div>
+ <div class="classBob2" id="classBob4"></div>
+ <div class="classBob2" id="classBob5"></div>
+ <div class="classBob2" id="classBob6"></div>
+ <div class="classBob2" id="classBob7"></div>
+ <div class="classBob2" id="classBob8"></div>
+ <div class="classBob2" id="classBob9"></div>
+ <div class="classBob2" id="classBob10"></div>
+ <div class="classBob2" id="classBob11"></div>
+ <div class="classBob2" id="classBob12"></div>
+ </div>
<div class="bob" id="bob2">
<div id="nestedBob"></div>
</div>
Oops, something went wrong.

0 comments on commit 4359059

Please sign in to comment.