Merge branch '1.3-wip' of github.com:twitter/bootstrap into 1.3-wip

4 files changed, 52 insertions, 43 deletions

diff --git a/docs/assets/js/application-scrollspy.js b/docs/assets/js/application-scrollspy.js
deleted file mode 100644
index 1f0b7cebe..000000000
--- a/docs/assets/js/application-scrollspy.js
+++ /dev/null
@@ -1,39 +0,0 @@
-// scroll spy logic
-// ================
-$(function () {
-
-  var activeTarget,
-     position = {},
-     $window = $(window),
-     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);
-
-})
\ No newline at end of file
diff --git a/docs/assets/js/application.js b/docs/assets/js/application.js
index 86eefa89d..d1c6751ea 100644
--- a/docs/assets/js/application.js
+++ b/docs/assets/js/application.js
@@ -6,6 +6,12 @@ $(document).ready(function(){
   $('body').dropdown() // catch any dropdowns on the page
 
 
+  // Scrollspy
+  // =========
+
+  $('body > .topbar').scrollSpy()
+
+
   // table sort example
   // ==================
 
diff --git a/docs/index.html b/docs/index.html
index 4764edfb5..e19059d24 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -23,8 +23,8 @@
     <script>$(function () { prettyPrint() })</script>
     <script src="../js/bootstrap-dropdown.js"></script>
     <script src="../js/bootstrap-twipsy.js"></script>
+    <script src="../js/bootstrap-scrollspy.js"></script>
     <script src="assets/js/application.js"></script>
-    <script src="assets/js/application-scrollspy.js"></script>
 
     <!-- Le fav and touch icons -->
     <link rel="shortcut icon" href="images/favicon.ico">
@@ -1592,6 +1592,10 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita
              <td>This plugin is for adding dropdown interaction to the bootstrap topbar or tabbed navigations.</td>
            </tr>
            <tr>
+             <td><a href="./javascript.html#scrollspy">bootstrap-scrollspy.js</a></td>
+             <td>The ScrollSpy plugin is for adding an auto updating nav based on scroll position to the bootstrap topbar.</td>
+           </tr>
+           <tr>
              <td><a href="./javascript.html#tabs">bootstrap-tabs.js</a></td>
              <td>This plugin adds quick, dynamic tab and pill functionality for cycling through local content.</td>
            </tr>
@@ -1786,4 +1790,4 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita
     </footer>
 
   </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/docs/javascript.html b/docs/javascript.html
index 10acbbf5b..b830e7d64 100644
--- a/docs/javascript.html
+++ b/docs/javascript.html
@@ -15,12 +15,12 @@
     <script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
     <script src="assets/js/google-code-prettify/prettify.js"></script>
     <script>$(function () { prettyPrint() })</script>
-    <script src="assets/js/application-scrollspy.js"></script>
     <script src="../js/bootstrap-modal.js"></script>
     <script src="../js/bootstrap-alerts.js"></script>
     <script src="../js/bootstrap-twipsy.js"></script>
     <script src="../js/bootstrap-popover.js"></script>
     <script src="../js/bootstrap-dropdown.js"></script>
+    <script src="../js/bootstrap-scrollspy.js"></script>
     <script src="../js/bootstrap-tabs.js"></script>
 
     <!-- Le styles -->
@@ -47,6 +47,7 @@
             <li><a href="#overview">Overview</a></li>
             <li><a href="#modal">Modals</a></li>
             <li><a href="#dropdown">Dropdown</a></li>
+            <li><a href="#scrollspy">ScrollSpy</a></li>
             <li><a href="#tabs">Tabs</a></li>
             <li><a href="#twipsy">Twipsy</a></li>
             <li><a href="#popover">Popover</a></li>
@@ -167,7 +168,7 @@ $('#modal-content')
 
     <section id="dropdown">
       <div class="page-header">
-        <h1>Drop Down <small>bootstrap-dropdown.js</small></h1>
+        <h1>Dropdown <small>bootstrap-dropdown.js</small></h1>
       </div>
       <div class="row">
         <div class="span4 columns">
@@ -228,6 +229,43 @@ $('#modal-content')
       </div>
     </section>
 
+   <!-- ScrollSpy
+    ================================================== -->
+
+    <section id="scrollspy">
+      <div class="page-header">
+        <h1>ScrollSpy <small>bootstrap-scrollspy.js</small></h1>
+      </div>
+      <div class="row">
+        <div class="span4 columns">
+          <p>This plugin is for adding the scrollspy (auto updating nav) interaction to the bootstrap topbar.</p>
+          <a href="../js/bootstrap-scrollspy.js" target="_blank" class="btn primary">Download</a>
+        </div>
+        <div class="span12 columns">
+          <h2>Using boostrap-scrollspy.js</h2>
+          <pre class="prettyprint linenums">$('#topbar').dropdown()</pre>
+          <h3>Method</h3>
+          <h4>$().scrollspy</h4>
+          <p>
+          Auto activates navigation buttons by users scroll position.
+          </p>
+          <pre class="prettyprint linenums">$('body > .topbar').scrollSpy()</pre>
+          <p>
+            <strong>Note:</strong> Topbar anchor tags must have resolvable id targets like <code>&lt;a href="#home"&gt;home&lt;/a&gt;</code>.
+          </p>
+          <h3>Events</h3>
+          <h4>scrollspy:refresh</h4>
+          <p>The scrollspy caches nav buttons and anchor locations. If you need to update the cache (because you have dynamic content) just trigger the <code>scrollspy:refresh</code> event.</p>
+          <pre class="prettyprint linenums">$('body > .topbar').trigger('scrollspy:refresh')</pre>
+          <h3>Demo</h3>
+          <p>Peep the topbar navigation homie!</p>
+          <script>$(function () {
+            $('body > .topbar').scrollSpy()
+          })</script>
+        </div>
+      </div>
+    </section>
+
     <!-- Tabs
     ================================================== -->