Browse sequences in topics

Submitted by Willam van Weelden on

When you output WebHelp using the default skin, you get the links for browse sequences in your topic. When you use another skin, the browse sequence links are in the navigation pane.

Text links

With JavaScript you can dynamically add the links for the browse sequence. For example, add the links in the header of the masterpage. The following script will add simple text links for the browse sequence:

var sForward = canGo(true);//Check if there is a next page in the browse sequence
var sBackward = canGo(false);//Check if there is a previous page in the browse sequence

if(sForward == true)//If there is a next page, add a link to the next topic.
document.write('<a href="http://www.wvanweelden.eu/javascript%3Avoid%280%29%3B" onclick="onNext();">Next Topic</a>&nbsp;');
if(sBackward == true)//If there is a previous page, add a link to the previous topic.
document.write('<a href="http://www.wvanweelden.eu/javascript%3Avoid%280%29%3B" onclick="onPrev();">Previous Topic</a>');

Image links

To use images for the links, you need to do some extra work. If you simply let the script add an image, the path to the image only works for topics in your project root. Therefore you need the path to the project root so your images will display in all topics.

To get this working, you must first add the images as baggage files to your project. With the following script, you can then add the images to every page. Simply add the script in the header of footer of your masterpage. This example assumes that your images are in the directory 'images'.

Set the filename and path for the active and inactive images in the variables backsrc and forwardsrc.

var sForward = canGo(true);
var sBackward = canGo(false);
var sRelPath = _getRelativePath(document.location, gsStartPage);//Get root path
var noclick = "void(0)";
//Image links
if(sBackward == true) {
  backsrc = sRelPath+'/images/prev.png';
  backclick = "onPrev()";
} else {
  backsrc = sRelPath+'/images/prev_inactive.png';
  backclick = noclick;
}

if(sForward == true) {
  forwardsrc = sRelPath+'/images/next.png';
  forwardclick = "onNext()";
} else {
  forwardsrc = sRelPath+'/images/next_inactive.png';
  forwardclick = noclick;
}

document.write('<img src="http://www.wvanweelden.eu/%27%20backsrc%20%27" alt="Previous topic" title="Previous topic" onclick="'+backclick+'" style="cursor: pointer"/>');
document.write('<img src="http://www.wvanweelden.eu/%27%20forwardsrc%20%27" alt="Next topic" title="Next topic" onclick="'+forwardclick+'" style="cursor: pointer"/>');

Tags: