From a3d22e18b01c421fb1ed0a0d908e1efc300151eb Mon Sep 17 00:00:00 2001 From: sjb933 Date: Tue, 5 Aug 2014 11:49:01 -0500 Subject: [PATCH] Fixed initial page extending on load. There was a bug with the extending page option, exemplified here: http://gregfranko.com/jquery.tocify.js/. On initial page load, if you hit the bottom link in the menu, 'Donation', you will see that the page doesn't actually scroll far enough and the extra padding div will not be added until the user has scrolled that far down. I've corrected this by removing the concept of the removing the concept of the extendPageOffset and added the padding div on load. --- src/javascripts/jquery.tocify.js | 84 +++++++++----------------------- 1 file changed, 24 insertions(+), 60 deletions(-) diff --git a/src/javascripts/jquery.tocify.js b/src/javascripts/jquery.tocify.js index f464d95..5b9f055 100644 --- a/src/javascripts/jquery.tocify.js +++ b/src/javascripts/jquery.tocify.js @@ -107,10 +107,6 @@ // If a user scrolls to the bottom of the page and the page is not tall enough to scroll to the last table of contents item, then the page height is increased extendPage: true, - // **extendPageOffset**: Accepts a number: pixels - // How close to the bottom of the page a user must scroll before the page is extended - extendPageOffset: 100, - // **history**: Accepts a boolean: true or false // Adds a hash to the page url to maintain history history: true, @@ -300,6 +296,29 @@ }); + if(self.options.extendPage) { + // If the user has scrolled to the bottom of the page and the last toc item is not focused + var lastElem, currentElem, calculatedPadding; + + if(!$(extendPageClass).length) { + lastElem = $('div[data-unique="' + $(itemClass).last().attr("data-unique") + '"]'); + + if(!lastElem.length) return; + + calculatedPadding = $(window).height() - ($(document).height() - lastElem.offset().top); + + // Appends a div to the bottom of the page and sets the height to the difference of the window scrollTop and the last element's position top offset + $(self.options.context).append($("
", { + "class": extendPageClassName, + "height": calculatedPadding + "px", + "data-unique": extendPageClassName + })); + if(self.extendPageScroll) { + currentElem = self.element.find('li.active'); + self._scrollTo($('div[data-unique="' + currentElem.attr("data-unique") + '"]')); + } + } + } }, _setActiveElement: function(pageload) { @@ -585,62 +604,7 @@ // Stores how far the user has scrolled var winScrollTop = $(window).scrollTop(), - - // Stores the height of the window - winHeight = $(window).height(), - - // Stores the height of the document - docHeight = $(document).height(), - - scrollHeight = $("body")[0].scrollHeight, - - // Instantiates a variable that will be used to hold a selected HTML element - elem, - - lastElem, - - lastElemOffset, - - currentElem; - - if(self.options.extendPage) { - - // If the user has scrolled to the bottom of the page and the last toc item is not focused - if((self.webkit && winScrollTop >= scrollHeight - winHeight - self.options.extendPageOffset) || (!self.webkit && winHeight + winScrollTop > docHeight - self.options.extendPageOffset)) { - - if(!$(extendPageClass).length) { - - lastElem = $('div[data-unique="' + $(itemClass).last().attr("data-unique") + '"]'); - - if(!lastElem.length) return; - - // Gets the top offset of the page header that is linked to the last toc item - lastElemOffset = lastElem.offset().top; - - // Appends a div to the bottom of the page and sets the height to the difference of the window scrollTop and the last element's position top offset - $(self.options.context).append($("
", { - - "class": extendPageClassName, - - "height": Math.abs(lastElemOffset - winScrollTop) + "px", - - "data-unique": extendPageClassName - - })); - - if(self.extendPageScroll) { - - currentElem = self.element.find('li.active'); - - self._scrollTo($('div[data-unique="' + currentElem.attr("data-unique") + '"]')); - - } - - } - - } - - } + elem; // The zero timeout ensures the following code is run after the scroll events setTimeout(function() {