Inject Custom CSS and JavaScript

Follow

Volker Weinreich

May 29, 2020 14:22

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

0

• 

  Volker Weinreich June 18, 2020 07:54

  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',

              linkClass: 'article__content__toc__link',
              activeLinkClass: 'article__content__toc__link--active',
  scrollSmooth: true,
              scrollSmoothDuration: 500,
  headingsOffset: 1,
              collapseDepth: 2,
              });
    }, 500);
  });

   

  Cheers,

  David

  1

  Comment actions Permalink

Please sign in to leave a comment.