Highlighting the TOC

Submitted by Willam van Weelden on

When you visit a topic, the TOC highlights the visited topic. Normally you can only set the background colour of this highlight, but with some changes, you can style the highlight any way you like. To do this, you have to modify your output files. This means that you need to copy the modified files in your output every time you generate your project.

Note: the highlight function for every menu (glossary, toc, index and search) is a little different.

To change the highlight, you have to change whutils.js, whthost.js and whtdhtml.htm. First, open whutils.js and search for the function HighLightElement. Once you found it, copy the function HighLightElement and the (next) function resetHighLight. Paste the functions below the current functions and rename the copied functions by adding TOC to the function name:

function HighLightElementTOC(obj,sHighLightColor,sNormalColor)
function resetHighLightTOC(sNormalColor)

On the fifth line of the function HighLightElementTOC, change the text resetHighLight to resetHighLightTOC.

Now add any markup you want below the second if. Make sure that all markup you place in the function HighLightElementTOC is undone in the function resetHighLightTOC.

function HighLightElementToc(obj,sHighLightColor,sNormalColor)
{
if(obj!=null)
{
  resetHighLightToc(sNormalColor);
  if (obj.style)
   obj.style.backgroundColor=sHighLightColor;
   obj.style.color="#fff";
   goHighLighted=obj;
}
}

function resetHighLightToc(sNormalColor)
{
if(goHighLighted!=null)
{
  if (goHighLighted.style)
   goHighLighted.style.backgroundColor=sNormalColor;
   goHighLighted.style.color="#2c2e74";
   goHighLighted=null;
}
}

Note: To change any style, you have to use the Javascript syntax. You'll find the syntax for every element on the CSS reference site at w3schools.com.

Close whutils.js and open whtdhtml.htm. Find setBackgroundcolor and set the standard background colour for your TOC. Next, go to setActiveBgColor and set the highlight colour for your TOC. Save your changes.

Open whthost.js Find gsBgColor (its a variable and at the top of the script). Give this variable the same colour as you gave setBackgroundcolor in whtdhtml.htm. Now find gsABgColor and give this variable the same value as you gave setActiveBgColor in whtdhtml.htm.

Find the function markObj and on the fift line of the function, change HighLightElement to HighLightElementTOC. Now find the function syncInit and on the sixteenth line of the function, change HighLightElement to HighLightElementTOC.

Save the file and make a backup of whutils.js, whthost.js and whtdhtml.htm. Copy these files in your output every time you generate your project.

Tags: