From 15610a408210783d1dd1840e88ef278c96a3fb87 Mon Sep 17 00:00:00 2001 From: Peter Dietrich Date: Thu, 19 Jul 2012 14:12:34 +0200 Subject: [PATCH 1/6] Adds navigation highlighting of current view All h1 and h2 elements, that are in the current viewport will trigger adding an .active class to the corresponding entry in the navigation. --- _layouts/default.html | 1 + scripts/navhighlight.js | 28 ++++++++++++++++++++++++++++ styles/site/site-navigation.less | 3 +++ 3 files changed, 32 insertions(+) create mode 100644 scripts/navhighlight.js diff --git a/_layouts/default.html b/_layouts/default.html index 7bcd73c..4379dd3 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -85,5 +85,6 @@ + diff --git a/scripts/navhighlight.js b/scripts/navhighlight.js new file mode 100644 index 0000000..ce61703 --- /dev/null +++ b/scripts/navhighlight.js @@ -0,0 +1,28 @@ +(function ($) { + $(window).scroll(function() { + //console.log("They see me scrollin, they hatin"); + + //clear highlighting + $('a').removeClass("active"); + + //calc current viewport + var viewTop = $(window).scrollTop(); + var viewBottom = viewTop + $(window).height(); + + //for all h1 and h2 elements, check if they are visible + //performance tweak: stop each() after the first element is found to be behind view + $('h1, h2').each(function(i,e) { + //get element position; + var eTop = $(e).offset().top; + var eBottom = eTop + $(e).height(); + if (eTop >= viewTop) { + if (eBottom <= viewBottom) { + $('a[href="#'+e.id+'"]').addClass("active"); + } else { + console.log("Start skipping test with "+e.id); + return false; + } + } + }); + }); +})(jQuery); diff --git a/styles/site/site-navigation.less b/styles/site/site-navigation.less index 20f9fd4..4f59179 100644 --- a/styles/site/site-navigation.less +++ b/styles/site/site-navigation.less @@ -30,6 +30,9 @@ text-decoration: none; } } +.site-navigation a.active{ + background-color: #ff9; +} .site-navigation ul ul{ .mls; .pth; From d425cde227da3a44e703447f930c038ca1f937ff Mon Sep 17 00:00:00 2001 From: Peter Dietrich Date: Thu, 19 Jul 2012 14:30:52 +0200 Subject: [PATCH 2/6] Fixes uncommented console.log --- scripts/navhighlight.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scripts/navhighlight.js b/scripts/navhighlight.js index ce61703..8ad8d24 100644 --- a/scripts/navhighlight.js +++ b/scripts/navhighlight.js @@ -19,7 +19,7 @@ if (eBottom <= viewBottom) { $('a[href="#'+e.id+'"]').addClass("active"); } else { - console.log("Start skipping test with "+e.id); + //console.log("Start skipping test with "+e.id); return false; } } From e85082d5687710d699be27cc36cbf13ea7c3a66a Mon Sep 17 00:00:00 2001 From: Peter Dietrich Date: Thu, 19 Jul 2012 16:04:19 +0200 Subject: [PATCH 3/6] Move navhighlight closure to setup.js Also limits the anchors manipulated to site-navigation --- scripts/navhighlight.js | 28 ---------------------------- scripts/setup.js | 30 ++++++++++++++++++++++++++++++ 2 files changed, 30 insertions(+), 28 deletions(-) delete mode 100644 scripts/navhighlight.js diff --git a/scripts/navhighlight.js b/scripts/navhighlight.js deleted file mode 100644 index 8ad8d24..0000000 --- a/scripts/navhighlight.js +++ /dev/null @@ -1,28 +0,0 @@ -(function ($) { - $(window).scroll(function() { - //console.log("They see me scrollin, they hatin"); - - //clear highlighting - $('a').removeClass("active"); - - //calc current viewport - var viewTop = $(window).scrollTop(); - var viewBottom = viewTop + $(window).height(); - - //for all h1 and h2 elements, check if they are visible - //performance tweak: stop each() after the first element is found to be behind view - $('h1, h2').each(function(i,e) { - //get element position; - var eTop = $(e).offset().top; - var eBottom = eTop + $(e).height(); - if (eTop >= viewTop) { - if (eBottom <= viewBottom) { - $('a[href="#'+e.id+'"]').addClass("active"); - } else { - //console.log("Start skipping test with "+e.id); - return false; - } - } - }); - }); -})(jQuery); diff --git a/scripts/setup.js b/scripts/setup.js index cbab838..1f6c6fb 100644 --- a/scripts/setup.js +++ b/scripts/setup.js @@ -24,3 +24,33 @@ }).fail(fail); } })(jQuery); + +(function ($) { + //Add current view's highlighting to the navigation + $(window).scroll(function() { + //console.log("They see me scrollin, they hatin"); + + //clear highlighting + $('.site-navigation a').removeClass("active"); + + //calc current viewport + var viewTop = $(window).scrollTop(); + var viewBottom = viewTop + $(window).height(); + + //for all h1 and h2 elements, check if they are visible + //performance tweak: stop each() after the first element is found to be behind view + $('h1, h2').each(function(i,e) { + //get element position; + var eTop = $(e).offset().top; + var eBottom = eTop + $(e).height(); + if (eTop >= viewTop) { + if (eBottom <= viewBottom) { + $('.site-navigation a[href="/#'+e.id+'"]').addClass("active"); + } else { + //console.log("Start skipping test with "+e.id); + return false; + } + } + }); + }); +})(jQuery); From 56c0d1c4b05f520b46583609df34b3daffa694cd Mon Sep 17 00:00:00 2001 From: Peter Dietrich Date: Thu, 19 Jul 2012 16:06:13 +0200 Subject: [PATCH 4/6] Removes loading of navhighlight.js --- _layouts/default.html | 1 - 1 file changed, 1 deletion(-) diff --git a/_layouts/default.html b/_layouts/default.html index 4379dd3..7bcd73c 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -85,6 +85,5 @@ - From a33542b47c827ab706b430442faf697710279d43 Mon Sep 17 00:00:00 2001 From: Peter Dietrich Date: Thu, 19 Jul 2012 16:14:40 +0200 Subject: [PATCH 5/6] Cache navLinks and filter for performance --- scripts/setup.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/scripts/setup.js b/scripts/setup.js index 1f6c6fb..23ef869 100644 --- a/scripts/setup.js +++ b/scripts/setup.js @@ -31,7 +31,8 @@ //console.log("They see me scrollin, they hatin"); //clear highlighting - $('.site-navigation a').removeClass("active"); + var navLinks=$('.site-navigation a') + navLinks.removeClass("active"); //calc current viewport var viewTop = $(window).scrollTop(); @@ -45,7 +46,8 @@ var eBottom = eTop + $(e).height(); if (eTop >= viewTop) { if (eBottom <= viewBottom) { - $('.site-navigation a[href="/#'+e.id+'"]').addClass("active"); + //filter cached navLinks + navLinks.filter('[href="/#'+e.id+'"]').addClass("active"); } else { //console.log("Start skipping test with "+e.id); return false; From d56fc820db7007b6cc9ab5b98e2ba268f8304ee3 Mon Sep 17 00:00:00 2001 From: Peter Dietrich Date: Thu, 19 Jul 2012 17:41:52 +0200 Subject: [PATCH 6/6] If no heading is in view, uses fallback --- scripts/setup.js | 73 +++++++++++++++++++++++++++++++----------------- 1 file changed, 47 insertions(+), 26 deletions(-) diff --git a/scripts/setup.js b/scripts/setup.js index 23ef869..49695dc 100644 --- a/scripts/setup.js +++ b/scripts/setup.js @@ -26,33 +26,54 @@ })(jQuery); (function ($) { - //Add current view's highlighting to the navigation - $(window).scroll(function() { - //console.log("They see me scrollin, they hatin"); + //Add current view's highlighting to the navigation + + /** helper for highlighting */ + function highlightNav(navLinks,id) + { + navLinks.filter('[href="/#'+id+'"]').addClass("active"); + } - //clear highlighting - var navLinks=$('.site-navigation a') - navLinks.removeClass("active"); + $(window).scroll(function() { + //console.log("They see me scrollin, they hatin"); - //calc current viewport - var viewTop = $(window).scrollTop(); - var viewBottom = viewTop + $(window).height(); + //clear highlighting + var navLinks = $('.site-navigation a'); + navLinks.removeClass("active"); - //for all h1 and h2 elements, check if they are visible - //performance tweak: stop each() after the first element is found to be behind view - $('h1, h2').each(function(i,e) { - //get element position; - var eTop = $(e).offset().top; - var eBottom = eTop + $(e).height(); - if (eTop >= viewTop) { - if (eBottom <= viewBottom) { - //filter cached navLinks - navLinks.filter('[href="/#'+e.id+'"]').addClass("active"); - } else { - //console.log("Start skipping test with "+e.id); - return false; - } - } - }); - }); + //calc current viewport + var viewTop = $(window).scrollTop(); + var viewBottom = viewTop + $(window).height(); + + //for all h1 and h2 elements, check if they are visible + //performance tweak: stop each() after the first element is found to be behind view + var previous = ""; + var foundOne = false; + var fallback = ""; + $('h1, h2').each(function(i,e) { + //get element position; + var eTop = $(e).offset().top; + var eBottom = eTop + $(e).height(); + var id=e.id; + + if (eTop >= viewTop) { + //if we are passed the view and no heading was highlighted yet, store previous one as fallback + if (! foundOne) { + fallback=previous; + } + if (eBottom <= viewBottom) { + highlightNav(navLinks, id); + foundOne = true; + } else { + return false; //break the each(), the rest is below + } + } + previous=id; + }); + //no h1/h2 is in the viewport, so highlight the last one above + if (! foundOne) { + highlightNav(navLinks, fallback); + } + }); })(jQuery); +