Help with large HTML, strange TocBot behaviour

[salaroglio]

in the zip file, you can find an example HTML and relative javascript + css library i'm currently using. Including your beautiful TocBot, i have some strange behaviour.

1. Into html the tocbot is rendered but not all h2 items (the last one is not visualized, maybe the html contains too many h2?)
2. Clicking on tocbot link, the browser doesn't scroll to the selected link, positioning the h2 on top of screen, but somwhere in the middle of page.
3. After clicking 3/4 times, it seems to go at right position
4. is it possible to add a "scrollbar" to the tocbot when there are too many items?

TocBotAnalysis.zip

Your tocbot is very important in my application. Could you help me to understand where i am wrong? many thanks in advance

[tscanlin]

Hi! Glad you are enjoying tocbot. It looks like you may not be initializing tocbot correctly.

I see jqueryForFirstPage.js where you call tocbot.init is included before tocbot.min.js. This init needs to be called after the file for tocbot.min.js. Additionally in the README here (https://github.com/tscanlin/tocbot#include-js) it says. Include the script at the bottom of the page before the closing body tag. This ensures that all content is loaded before tocbot is initialized and is also a best practice to include the majority of JS at the end of the page to prioritize content being loaded first.

For 4., is it possible to add a "scrollbar" to the tocbot when there are too many items?, this can be accomplished with the CSS: .toc.js-toc { overflow-y: auto; }

[salaroglio]

Hi, i've checked

• i tried to move the declaration script or put at the bottom of the page. But nothing changed.
• In theory using $(function()....) jquery guarantees execution at the and of complete loading page and scripts.
• I found in css an element is-collapsible with max-with:1000, removing, i had the visualization of the last H2 present in demo html
• I'm still looking for a solution on wrong first-click alignment. It seems to be a problem with bootstrap.css. If i remove it, the click feature is working like a charm.

Could you check the misalligned postion at the first click on tocbot generated menu? It's very hard for me understand what's happening in the function getHeadingTopPos, maybe could be there the problem?

Many thanks.

[tscanlin]

Hey, thanks for trying these things. Could you try passing the option for hasInnerContainers: true to see if that helps?

[salaroglio]

I tried, and nothing changed. You should see in the code that option hasInnerContainers: true is allready present in the init of javascript code demo.

[tscanlin]

When I run tocbot.refresh() in the console it seems to behave/scroll properly. That leads me to believe it is a script loading / ordering issue but I'm not sure. Anyway you can try that and host this somewhere with what you've tried?

[salaroglio]

Dear Tim,

i don't know where to share what i'm trying. Eventually could you suggest any online service? Here you can find the zip with the script tocbot.min.js set at the end of html. TocBotAnalysis.zip

I just noted the first click on tocbot generated links, brings to the H2 selected, exactly at the center of page, not at the top. In my opinion, It depends on bootstrap.css. But i don't know how to fix and why.

As you previous noted in the javascripts/jqueryForFirstPage.js you can find tocbot initialization, and all scripts that could interfere are commented.

gratefull for your attention.

[tscanlin]

I think it is not working because you still aren't loading them in the correct order. You moved the tocbot script down to the bottom, but not the file ./javascripts/jqueryForFirstPage.js which calls tocbot.init that file should go after tocbot.min.js at the bottom of the page.

Can you confirm, when you run tocbot.refresh() in the developer tools / console, does that make it behave properly?

[tscanlin]

I think it may be because of some conflicting js / css or something. You could try adding:

setTimeout(() => {
     tocbot.refresh()
}, 1)

[salaroglio]

It works! the setTimeout(..) code do the trick for me. Thank you, you solved an issue it wasn't your.

I still don't know what is working over your scripts. Do you know any approach to understand and debugging? Do you have any suggestion for me?

[tscanlin]

Yeah my suggestion would be to try and remove things to pinpoint the issue which I think you were already doing. It could be some underlying CSS thing or images loading or something like that. Maybe some conflicting JS but it looks like you commented out most of it. Maybe it's how the JS is being loaded with adding the script tag programmatically?

I'm about to be going out of town for 4 days but I can try and help more then if you are still stuck. Thanks for the donation btw!! :)

[tscanlin]

Hi, I wanted to follow up here. Do you still need help with any of this?