Help installing and configuring?

[luispuerto]

Hey!

First of all thanks for this project and for Smooth Scroll

I have installed smooth scroll and now I'm trying to install gumshoe in my jekyll page and I'm failing and I don't know why.

Basically I've downloaded gumshoe.min.js and installed in assets/js/plugins/gumshoe.min.js.
Then I've tried to call the function using _main.js and main.min.js located in assets/js/plugins with:

  gumshoe.init();

And them I build the main.min.js with npm run build:js after set in the package.json in the uglyfy part the path assets/js/plugins/gumshoe.min.js.

It didn't work... so I tried a more straight forward method and put in the footer:

<script src="{{ site.url }}/assets/js/plugins/gumshoe.min.js">
	gumshoe.init({
		selector: '[data-gumshoe] a', // Default link selector (must use a valid CSS selector)
		selectorHeader: '[data-gumshoe-header]', // Fixed header selector (must use a valid CSS selector)
		container: window, // The element to spy on scrolling in (must be a valid DOM Node)
		offset: 0, // Distance in pixels to offset calculations
		activeClass: 'active', // Class to apply to active navigation link and its parent list item
		scrollDelay: false, // Wait until scrolling has stopped before updating the navigation
		callback: function (nav) {} // Callback to run after setting active link
	});
</script>

It didn't work also...

what I'm missing?

you can check the repo here: https://github.com/luispuerto/gumshoe-test
The page running with gumshoe here: https://luispuerto.github.io/gumshoe-test/
A good example post here: https://luispuerto.github.io/gumshoe-test/blog/2017/11/16/the-preliminaries-for-bread-and-pizza-making/

With Smooth Scroll was really easy... I don't know what I'm missing here.

[cferdinandi]

Currently, the only item that matches the selector ([data-gumshoe] a) is the "Back to Top" link, and that doesn't point to anything so never triggers gumshoe's behavior. Gumshoe is running, but there are no valid targets.

[luispuerto]

Hey!

You are right!

the problem thought is I just realize that I can't put the ([data-gumshoe] a) in the TOC because it's auto-generated by an include in Jekyll. I've been taking a look to that include, and I really can't figure out how to insert data-gumshoe anywhere.

The toc has a class toc__menu. Can I change the selector to that class? I've changed in selector: '[data-gumshoe] a', to selector: '[toc__menu] a', but it also seem to not work.

Any idea?

Thanks!

[cferdinandi]

In your case, .toc__menu is a class, not a data attribute. The selector is wrong.

This works:

gumshoe.init({
    selector: '.toc__menu a'
});