Highlighting the index

Submitted by Willam van Weelden on

When you click a term in the index, the selected term is highlighted by a gray background. 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, whibody.htm and whihost.js. 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 Idx to the function name:

function HighLightElementIdx(obj,sHighLightColor,sNormalColor)
function resetHighLightIdx(sNormalColor)

On the fifth line of the function HighLightElementIdx, change the text resetHighLight to resetHighLightIdx.

Before you can add the markup for the highlight, you need to address the correct element. The standard element (obj) of the function is not the element you can use to style the text. To style the text, you need to address the first child of the element obj. Add a new variable below the line obj.style.backgroundColor=sHighLightColor;

obj.style.backgroundColor=sHighLightColor;
var TextElem = obj.firstChild;

Now add any markup you want below the second if. Make sure that all markup you place in the function HighLightElementIdx is undone in the function resetHighLightIdx. When you want to change the text, start your command with TextElem, otherwise start with obj:

function HighLightElementIdx(obj,sHighLightColor,sNormalColor)
{
if(obj!=null)
{
  resetHighLightIdx(sNormalColor);
  if (obj.style)
   var TextElem = obj.firstChild ;
   TextElem.style.backgroundColor=gsIdxActiveBgColor;
   TextElem.style.color="#fff"
   goHighLighted=obj;
}
}
function resetHighLightIdx(sNormalColor)
{
if(goHighLighted!=null)
{
  if (goHighLighted.style)
   var TextElemReset = goHighLighted.firstChild ;
   TextElemReset.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.

Open whibody.htm and find gsBgColor (its a variable and at the top of the script). Give this variable the colour value for the standard background. Now find gsIdxActiveBgColor and give this variable the colour value for the highlight.

Open whihost.js and find the function clearHighLight. Rename resetHighLight to resetHighLightIdx. Now find the function findCKInDom, this is a large function. Inside this function, locate HighlightElement. Rename HighLightElement to HighLightElementIdx.

Because the index uses the function findCKInDom only when you type a keyword in the search bar, you also need to style the index for when you click a keyword.

Find the function IndexWriteClassStyle (still in whihost.js) and scroll down to the line starting with sStyle+="A:hover. Turn the line into a comment by adding two slashes (//) in front of the line:

  sStyle+="A:active {background-color:"+gsIdxActiveBgColor+";}\n";
//sStyle+="A:hover {"+getFontStyle(goIdxHoverFont)+"}\n";
  sStyle+="</STYLE>";

Now go to the line starting with sStyle+="A:active and add all your highlight styles after the opening bracket {. You enter these styles in css syntax. Now copy the line and paste is below. Rename the pseudo-class :active to :focus. It has to look something like this:

  sStyle+="A:active {color: #ff; background-color:"+gsIdxActiveBgColor+"}\n"
  sStyle+="A:focus {color: #ff; background-color:"+gsIdxActiveBgColor+"}\n"
//sStyle+="A:hover {"+getFontStyle(goIdxHoverFont)+"}\n"

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

 

Tags: