TypeError: e is undefined gumshoe.min.js:2:1240 about gumshoe HOT 11 CLOSED

Reduced test case please. I'd recommend using the unminified version for this so that we can more easily chase down the error.

from gumshoe.

Ok. Let me try.

The error with unminified version in console on page load in Firefox latest version on Windows 10:

    TypeError: item is undefined     gumshoe.js:183:7
    useLastItem http://serverurl/assets/js/gumshoe.js:183
    getActive http://serverurl/assets/js/gumshoe.js:195
    detect http://serverurl/assets/js/gumshoe.js:362
    init http://serverurl/assets/js/gumshoe.js:457
    Constructor http://serverurl/assets/js/gumshoe.js:472
    <anonymous> http://serverurl/pagename:429

The test case:

I have fixed sidebar on left, fixed header on top, scrollable content area below the header and right of sidebar. I splitted the content area in two by creating two divs - 80% for content and 20% for fixed links navigation section (my-awesome-nav) on the right. The links in this awesome nav get created using the https://ndabas.github.io/toc/ jquery plugin with the following code when the page is rendered:

    <div id="onthispage" style="width:20%">
    <ul id="my-awesome-nav" data-toc data-toc-headings="h2" ></ul>
    </div>

It results in this html code on the page.

<ul id="my-awesome-nav" data-toc="" data-toc-headings="h2">
<li><a href="#heading21">Heading21</a></li>
<li><a href="#heading22">Heading23</a></li>
<li><a href="#heading23">Heading23</a></li>
</ul>

I have the following CSS:

html {
	overflow-y: auto;
	scroll-behavior: smooth;
}
/*  Sets body width */
#main-content {
	max-width: 90em;
	width: 80%;
	margin-right: auto;
}
/**
 * Grid
 */
.grid {
	display: grid;
	grid-gap: 2em;
	grid-template-columns: 30% 70%;
}
#my-awesome-nav {
	position: fixed;
}
#my-awesome-nav a {
	display: inline-block;
	padding: 0.25em 0.5em;
}
#my-awesome-nav li.active > a {
	background-color: black;
}
#my-awesome-nav li.active > a {
	color: white;
}
#onthispage {
 position: fixed;
right: -30px;
height: 100%;
  top:150px;
z-index: 2;
}

This is what goes in for javascript. I added this at the end of my existing javascript code file:

var header = document.querySelector('#header');
var spy = new Gumshoe('#my-awesome-nav a', {
	offset: function () {
		return header.getBoundingClientRect().height;
	}
});

Finally, at the top of my footer:

<script>
	var spy = new Gumshoe('#my-awesome-nav a');
</script>

from gumshoe.

Sorry, what I meant was, can you please provide a link to a demo with the bug so I can take a look?

from gumshoe.

Oh. Let me check if I can do that. I will need to check with my Support team. In the meantime, do you see any step that I missed? I did only what you see above - nothing more. Now, I plan to hardcord the nav links and try and then I will try to restructure my site like your demo example and then try. At least one approach must work if above code changes I shared are all that I had to do.

I should be able to send a link privately in next 24 hrs. Thank you.

from gumshoe.

I have the setup ready. Can I send you the link privately? How if so?

from gumshoe.

Hi Chris,

Just sent you the link to demo setup on your email address that you have on your website...

-Amit

from gumshoe.

I have handled the errors - no more. But still it is not working...

from gumshoe.

Ok. So, the classes are not getting active at all. I have tried several things and nothing seems to be working. So I am gonna take a break from this. I would wait for your response on my test case setup I sent to you.

from gumshoe.

Took a quick look. Sorry about this, but a full on demo is not a reduced test case. There are a ton of things on the site and errors in the console.

Bug reporting guidelines: https://github.com/cferdinandi/gumshoe/blob/master/.github/contributing.md

More info on reduced test cases: https://css-tricks.com/reduced-test-cases/

from gumshoe.

Also, you didn't change the demo code to match your selector:

var header = document.querySelector('#my-header')

That's throwing an error

from gumshoe.

Ah! Sure. Now I know what you meant. Let me get to it.

from gumshoe.