fancy scroll stuff and tiny js roundup/cleanup

Rajan · May 5, 2011 · 15a679e · 15a679e
1 parent 037bf9f
commit 15a679e
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 24 deletions.
diff --git a/docs/assets/js/application.js b/docs/assets/js/application.js
@@ -1,6 +1,6 @@
 // Javascript to toggle the dropdowns
 $(document).ready(function(){
-  // Dropdowns
+
   $("body").bind("click", function(e) {
     $("ul.menu-dropdown").hide();
     $('a.menu').parent("li").removeClass("open").children("ul.menu-dropdown").hide();
@@ -21,4 +21,53 @@ $(document).ready(function(){
     $parentSiblings.removeClass("open");
     return false;
   });
+
+  //table sort example
+  $("#sortTableExample").tablesorter( {sortList: [[1,0]]} );
+
+  //add on
+  $('.add-on :checkbox').click(function() {
+    if ($(this).attr('checked')) {
+      $(this).parents('.add-on').addClass('active');
+    } else {
+      $(this).parents('.add-on').removeClass('active');
+    }
+  });
+
+
+  //scroll spyer
+  var activeTarget,
+      $window = $(window),
+      position = {},
+      nav = $('body > .topbar li a'),
+      targets = nav.map(function () {
+        return $(this).attr('href');
+      }),
+      offsets = $.map(targets, function (id) {
+        return $(id).offset().top;
+      });
+
+
+  function setButton(id) {
+    nav.parent("li").removeClass('active');
+    $(nav[$.inArray(id, targets)]).parent("li").addClass('active');
+  }
+
+  function processScroll(e) {
+    var scrollTop = $window.scrollTop() + 10, i;
+    for (i = offsets.length; i--;) {
+      if (activeTarget != targets[i] && scrollTop >= offsets[i] && (!offsets[i + 1] || scrollTop <= offsets[i + 1])) {
+        activeTarget = targets[i];
+        setButton(activeTarget);
+      }
+    }
+  }
+
+  nav.click(function () {
+    processScroll();
+  });
+
+  processScroll();
+
+  $window.scroll(processScroll);
 });
diff --git a/docs/index.html b/docs/index.html
@@ -4,20 +4,18 @@
     <meta charset="utf-8">
     <title>Twitter Baseline</title>
 
-    <!-- // Less.js at the ready! -->
+    <!-- some styles -->
     <link href="../baseline-1.0.0.css" rel="stylesheet" type="text/css">
     <link href="assets/css/docs.css" rel="stylesheet" type="text/css">
 
-    <!-- // jQuery! -->
+    <!-- some javascripts -->
     <script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
     <script src="http://tablesorter.com/jquery.tablesorter.min.js"></script>
     <script src="assets/js/jquery/hashgrid.js"></script>
-
-    <!-- Code Highlighting -->
+    <script type="text/javascript" src="http://tablesorter.com/jquery.tablesorter.min.js"></script>
     <script src="assets/js/jquery/chili/jquery.chili-2.2.js"></script>
     <script src="assets/js/jquery/chili/recipes.js"></script>
     <script id="setup">ChiliBook.lineNumbers = true;</script>
-
     <script src="assets/js/application.js"></script>
 
     <!-- Debug line-height -->
@@ -622,12 +620,6 @@ <h3>Example: Zebra-striped</h3>
 
 <h3>Example: Zebra-striped w/ TableSorter.js</h3>
 <p>Taking the previous example, we improve the usefulness of our tables by providing sorting functionality via <a href="http://jquery.com">jQuery</a> and the <a href="http://tablesorter.com/docs/">Tablesorter</a> plugin. <strong>Click any column's header to change the sort.</strong></p>
-<script type="text/javascript" src="http://tablesorter.com/jquery.tablesorter.min.js"></script>
-<script type="text/javascript">
-  $(document).ready(function() {
-    $("table#sortTableExample").tablesorter( {sortList: [[1,0]]} );
-  });
-</script>
 <table class="zebra-striped" id="sortTableExample">
 	<thead>
 		<tr>
@@ -675,18 +667,7 @@ <h3>Example: Zebra-striped w/ TableSorter.js</h3>
 
 
 <section id="forms">
-<! -- JS for the prepend and append boxes -->
-<script type="text/javascript">
-  $(document).ready(function(){
-    $('.add-on :checkbox').click(function() {
-      if ($(this).attr('checked')) {
-        $(this).parents('.add-on').addClass('active');
-      } else {
-        $(this).parents('.add-on').removeClass('active');
-      }
-    });
-  });
-</script>
+
 <div class="page-header">
   <h1>Forms</h1>
 </div>