Inject Custom CSS and JavaScript
Hi,
so far we maintain our own further development of the WebHelp Theme. With release 2.17 it is now possible to add your own CSS and JavaScript to the HelpCenter, which I think is a very good idea and makes the HelpCenter more interesting for us.
But now I encounter problems with overwriting JavaScript functions. In our variant of the WebHelp Theme we also use a version of the TocBot function to generate a table of contents. But with different specifications, because we have very long pages. Now I try to overwrite the TocBot specifications of the HelpCenter JavaScript, but I do not succeed. I tried this:
var tocBot= myTocBot;
myTocBot = function() {
tocbot.init({
...
<my specifications>
...
});
return tocBot();
}
Or can it not succeed because it is a private function? Unfortunately my JavaScript skills are limited.
Does anyone have an idea?
Greetings,
Volker
-
Working solution from Google Group from David Majninger (k15t):
Hi Volker,
I have done a little bit of testing and found that it's enough to just remove the generic TOC and invoke it again, but you need to wait a little first to let the theme finish its code first.Here's the code that worked for me, depending on your system, you might need to adjust the timeout milliseconds:$( document ).ready(function(){
setTimeout(function(){
$("ol.toc-list").remove();
tocbot.init({
tocSelector: '.js-tocBot',
contentSelector: '.js-tocBot-content',
headingSelector: 'h1, h2, h3, h4, h5',
activeLinkClass: 'article__content__toc__link--active',
scrollSmooth: true,
scrollSmoothDuration: 500,
headingsOffset: 1,
collapseDepth: 2,
});
}, 500);
});Cheers,David
Please sign in to leave a comment.
Comments
1 comment