hii, because you forgot to add a dot for the class in your script code:

Your code:

$(document).ready(function(){
$("#toc").toc({content: ".article__body", headings: "h1,h2,h3,h4"});

if($("ul#toc").has("li").length === 0){
$('.toc-title').hide();
$('.calloutcallout--transparent').hide(); // hasn't dot for the class
}
})

Fixed: Apply this.

$(document).ready(function(){
$("#toc").toc({content: ".article__body", headings: "h1,h2,h3,h4"});

if($("ul#toc").has("li").length === 0){
$('.toc-title').hide();
$('.callout.callout--transparent').hide();
}
})

Indeed. Thank you. And the last question:

how can I change:

if($("ul#toc").has("li").length === 0){

to hide TOC if article has less than 2 headings?

heyJakub:)

Use this script code for your query:

to hide TOC if article has less than 2 headings?

$(document).ready(function(){
$("#toc").toc({content: ".article__body", headings: "h1,h2,h3,h4"});
$('.callout.callout--transparent').hide();
if($("ul#toc li").length >= 2){
$('.callout.callout--transparent').show();
}
})

Many thanks!

Really appreciate your help :)

Hello,

TOC works nice except for one thing - I am wondering is this happens only in my HC?
Clicking on the link takes you to the specific header, but a few lines below not to head of section.
For example - click on 3rd link from TOC:http://gmsystem.zendesk.com/hc/pl/articles/4417171125905-Jak-wypożyczyć-licencję-Solid-Edge-
As you can see it takes you to proper section but first lines are hidden behind header.
How can I fix that?

Hello Jakub Kręcisz, it is cause of your sticky header, the header is hiding those few lines.

See the below screenshot:

Your sticky header:

When I removedposition: fixedfrom the CSS:

Solution:

You can fix this issue by adding the given code at the end of your script file inside the DOM function

$(window).scroll(function(){
if ($(this).scrollTop() > 50) {
$('main').css({"margin-top": "125px"});
} else {
$('main').css({"margin-top": "0"});
}
});



Screenshot for the same:








Add the Jquery CDN on document_head.hbs file.




Screenshot for the same:

Thanks

Team

Also, click on the given link :)

http://ifrasaqlain.com/introduction/

Thank you! I did as you wrote.

Is this possible to limit this only for article page?

I would like to minimalizejump effecton other pages, i.e. main page where row with blocks is shifted with specific pixels amount:

position"0":

position"scrolled down":

Add template name on article page.

Update the previous script code:

$(document).ready(function(){
if(tempName === "article-template") {
$(window).scroll(function(){
if ($(this).scrollTop() > 50) {
$('main').css({"margin-top": "125px"});
} else {
$('main').css({"margin-top": "0"});
}
});
}
});

Ifra,

really, really appreciate your help - thank you so much!

:)

This is nothing short of amazing. Thank you so muchIfra Saqlainfor this guide!

:)

I did these but it doesn't work:https://support.heroesempires.com/hc/en-us/articles/5260022672665

No TC shows.

And please post the code, don't post the screenshot :)

Anh Le, I think you didn't add jquery.toc.min file to your head file.

Error:

Solution:

First you need to download theplugin.

and then unzip that,

you will getjquery.toc.min

upload it to your HCassetsfolder.

import it to your document_head.hbs file.

Your issue would be solved :)

Thanks

Of course, I did.

Ifra Saqlain

Anh Le:), do the following:

i). Go to your document_head.hbs file.

ii). Update the sequence of CDNs.

iii). Currently, your TOC CDN is above jQuery-v3.5.1, it should be below this version of jQuery or you can move your jQuery-v3.5.1 CDN ust below the jQuery-v3.6.0.

目前:

After updating:

iv). Second thing is, you don't have the class namearticle-body.

You'll need to add class name with themarkdown.

OR,

you can change the class name in the script code.

Now, test and let me know.

Thank youIfra Saqlainthe theme developer loaded the js file end of that file. I removed it and it works.

However, the format is ugly; any suggestions?https://support.heroesempires.com/hc/en-us/articles/5260022672665-Tutorials

Btw, do you plan to have the native TOC for Zendesk article?

HiAnh Le:),

move the script files to thefooter.hbsfile and css files keep into document-headfile.

页脚文件脚本(JS)文件。

CSS files to the document file.

and then test, are all the functions working fine as previous or not?

And,

Btw, do you plan to have the native TOC for Zendesk article?

You can post this question in theGuide Feedback.I'm only a moderator so can't tell about the roadmaps:)

Thanks

Ifra SaqlainI don't get it. What are the new code for? Can't you share the code instead of taking the screenshot and make me retype those codes?

Anh Le,

I answered your query

However, the format is ugly; any suggestions?https://support.heroesempires.com/hc/en-us/articles/5260022672665-Tutorials

Move script files document_head.hbs file to footer.hbs file.

Move your script files to the footer.hbs file.

script file:

Template name: footer.hbs

And, keep your CSS files to document_head.hbs file as it is.

CSS files:

Template Name: document_head.hbs

I moved these codes fromdocument_head.hbstofooter.hbs:

But nothing changed.

Anh Le, I think you don't need to do anything else, forget about formatting, move our jquery CDN and TOC to the document_head.hbs file as it is.

See, you didn't move all the script files to the footer file.

You only moved jquery CDN and TOC.

Now the error is:

Okay, move you jQuery and TOC to the document_head.hbs file as it was. Then the final results would be:

Your TOC is showing: