Release: 1.0.9

scripts/toc.js

@@ -4,17 +4,20 @@ $.fn.toc = function(options) {
   var opts = $.extend({}, jQuery.fn.toc.defaults, options);
 
   var container = $(opts.container);
+  var tocs = [];
   var headings = $(opts.selectors, container);
   var headingOffsets = [];
-  var activeClassName = opts.prefix+'-active';
+  var activeClassName = 'active';
   var navbarHeight = $('.navbar').height();
+  var ANCHOR_PREFIX = "__anchor";
 
   var scrollTo = function(e) {
     if (opts.smoothScrolling) {
       e.preventDefault();
       var elScrollTo = $(e.target).attr('href');
-      var $el = $(elScrollTo);
-      var offsetTop = $el.offset().top - navbarHeight;
+      var $el = $(elScrollTo.replace('#.', '#\\.') + ANCHOR_PREFIX);
+
+      var offsetTop = $el.offset().top - (navbarHeight + opts.navbarOffset);
 
       $('body,html').animate({ scrollTop: offsetTop }, 400, 'swing', function() {
         location.hash = elScrollTo;
@@ -24,6 +27,14 @@ $.fn.toc = function(options) {
     $(e.target).parent().addClass(activeClassName);
   };
 
+  var calcHadingOffsets = function() {
+    headingOffsets = [];
+    headings.each(function(i, heading) {
+      var top = $(heading).prev("span").offset().top - (navbarHeight + opts.navbarOffset);
+      headingOffsets.push(top > 0 ? top : 0);
+    });
+  }
+
   //highlight on scroll
   var timeout;
   var highlightOnScroll = function(e) {
@@ -34,10 +45,10 @@ $.fn.toc = function(options) {
       var top = $(window).scrollTop(),
         highlighted;
       for (var i = 0, c = headingOffsets.length; i < c; i++) {
-        if (headingOffsets[i] >= top) {
+        if (headingOffsets[i] >= top || (headingOffsets[i + 1] && headingOffsets[i + 1] > top)) {
           $('li', self).removeClass(activeClassName);
-          if (i > 0) {
-            highlighted = $('li:eq('+(i-1)+')', self).addClass(activeClassName);
+          if (i >= 0) {
+            highlighted = tocs[i].addClass(activeClassName);
             opts.onHighlight(highlighted);
           }
           break;
@@ -47,25 +58,27 @@ $.fn.toc = function(options) {
   };
   if (opts.highlightOnScroll) {
     $(window).bind('scroll', highlightOnScroll);
-    highlightOnScroll();
+    $(window).bind('load resize', function() {
+      calcHadingOffsets();
+      highlightOnScroll();
+    });
   }
 
   return this.each(function() {
     //build TOC
     var el = $(this);
     var ul = $('<ul/>');
+
     headings.each(function(i, heading) {
       var $h = $(heading);
-      headingOffsets.push($h.offset().top - opts.highlightOffset);
 
-      //add anchor
-      var anchor = $('<span/>').attr('id', opts.anchorName(i, heading, opts.prefix)).insertBefore($h);
+      var anchor = $('<span/>').attr('id', opts.anchorName(i, heading, opts.prefix) + ANCHOR_PREFIX).insertBefore($h);
 
       //build TOC item
       var a = $('<a/>')
         .text(opts.headerText(i, heading, $h))
         .attr('href', '#' + opts.anchorName(i, heading, opts.prefix))
-        .bind('click', function(e) { 
+        .bind('click', function(e) {
           scrollTo(e);
           el.trigger('selected', $(this).attr('href'));
         });
@@ -74,10 +87,17 @@ $.fn.toc = function(options) {
         .addClass(opts.itemClass(i, heading, $h, opts.prefix))
         .append(a);
 
+      tocs.push(li);
+
       ul.append(li);
     });
     el.html(ul);
+
+    calcHadingOffsets();
   });
+
+
+
 };
 
 
@@ -88,7 +108,7 @@ jQuery.fn.toc.defaults = {
   prefix: 'toc',
   onHighlight: function() {},
   highlightOnScroll: true,
-  highlightOffset: 100,
+  navbarOffset: 0,
   anchorName: function(i, heading, prefix) {
     return prefix+i;
   },