Update demo

emayk · Jul 28, 2010 · 10e6d4f · 10e6d4f
1 parent 2e3de3c
commit 10e6d4f
Showing 1 changed file with 30 additions and 1 deletion.
diff --git a/proximity-event/demo.html b/proximity-event/demo.html
@@ -21,6 +21,14 @@
  font-family: monospace;
  margin: 10px 0;
  }
+ pre {
+ border: 2px solid #CCC;
+ margin: 10px 0;
+ padding: 10px;
+ font-size: .8em;
+ color: #000;
+ font-family: consolas, monospace;
+ }
  </style>
  </head>
  <body>
@@ -30,7 +38,28 @@ <h1>Proximity event for jQuery: Demo</h1>
  <p>As you move closer to the box below the red text will get bigger (up to 5em).</p>
  <div id="demo">MOVE CLOSER!</div>
  <div id="data"></div>
- <p><a href="http://github.com/jamespadolsey/jQuery-plugins/proximity-event/">See the repo here!</a></p>
+ <p><a href="http://github.com/jamespadolsey/jQuery-Plugins/tree/master/proximity-event/">See the repo here!</a></p>
+ <pre>
+// THE SOURCE CODE
+
+var box = $('#demo'),
+ data = $('#data');
+
+box.bind('proximity', {max:300}, function(e, proximity, distance){
+
+ // font-size moves between 10px and 30px
+ box.css('font-size', (proximity * 29 + 10) + 'px');
+
+ data.text(
+ proximity === 0 ?
+ '[OUT OF BOUNDS]'
+ : 'Distance from box: ' + distance.toFixed(3) + 'px, Proximity: ' + proximity.toFixed(3)
+ );
+
+ box.css('background', proximity === 1 ? 'yellow' : '');
+
+});
+ </pre>
 
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
  <script src="jquery.onproximity.js"></script>