Adding a Home button to the WebWorks Help 5.0 Page Navigation Tools
Here's how to add a Home button to the page navigation toolbar in a WebWorks Help 5.0 system.
An example of this can be seen here:
http://download.autodesk.com/us/maya/2008help/wwhelp/wwhimpl/js/html/wwhelp.htm
To add the button, you need to create overrides for the following files:
wwhelp\wwhimpl\common\scripts\controls.js
In this file, you need to modify some JavaScript.wwhelp\wwhimpl\common\html\pagenav.htm
In this file, you need to modify the width of a frame in the HTML frameset.
Refer to the ePublisher Pro online help for instructions on how to create overrides.
Open your override version of controls.js
Locate this line:
function WWHControls_LeftHTML()
Scroll through the WWHControls_LeftHTML() function until you find these lines:
// Emit HTML for controls
//
VarHTML += this.fTopSpacerHTML();
if (VarEnabledControls.length > 0)
{
VarHTML += "<table border=\"0\" cellspacing=\"0\" cellpadding=\"0\">\n";
VarHTML += " <tr>\n";
VarHTML += " <td><div><img src=\"" + WWHFrame.WWHHelp.mHelpURLPrefix + "wwhelp/wwhimpl/common/images/spc_tb_l.gif" + "\" alt=\"\"></div></td>\n";
for (VarMaxIndex = VarEnabledControls.length, VarIndex = 0 ; VarIndex < VarMaxIndex ; VarIndex++)
{
VarHTML += VarEnabledControls[VarIndex].fGetHTML();
if ((VarIndex + 1) < VarMaxIndex)
{
VarHTML += " <td><div><img src=\"" + WWHFrame.WWHHelp.mHelpURLPrefix + "wwhelp/wwhimpl/common/images/spc_tb_m.gif" + "\" alt=\"\"></div></td>\n";
}
}
VarHTML += " </tr>\n";
VarHTML += "</table>\n";
}
}
return VarHTML;
}Immediately before the for command, add these lines to the WWHControls_LeftHTML() function:
VarHTML += "<td width=\"23\"><a href=\"" + WWHFrame.WWHHelp.mHelpURLPrefix + "MYFILENAME.html\" target=\"_top\" title=\"Home\"><img src=\"" + WWHFrame.WWHHelp.mHelpURLPrefix + "wwhelp/wwhimpl/common/images/MYHOMEICON.gif\" border=\"0\" height=\"21\" width=\"23\" alt=\"Home\" /></a></td>";
VarHTML += "<td><div><img src=\"" + WWHFrame.WWHHelp.mHelpURLPrefix + "wwhelp/wwhimpl/common/images/spc_tb_m.gif" + "\" alt=\"\"></div></td>\n";-- and change the MYFILENAME.html and MYHOMEICON.gif text in the lines as needed.
MYFILENAME.html is the filename for the help topic to which you want to link. In the example linked at the beginning of this article, they are using index.html to link to the help system's default page.
If you want to link to a page outside of your help system, such as a website, change --
<a href=\"" + WWHFrame.WWHHelp.mHelpURLPrefix + "MYFILENAME.html\" target=\"_top\"
-- to --
<a href=\"http://www.example.com\" target=\"_blank\"
-- where www.example.com is your URL. Clicking the home button will open the target site in a new browser window.- MYHOMEICON.gif is the filename for the image you want to use for the home button. In your override directory, create a wwhelp/wwhimpl/common/images/ folder structure and place your home icon in the images folder. Also, adjust the height, width, and alt attributes to match the height and width of your icon and the alternate text for the image.
The first line inserts your Home icon and link.
The second line inserts a space between the Home icon and the next button.
The edited function should look like this:
// Emit HTML for controls
//
VarHTML += this.fTopSpacerHTML();
if (VarEnabledControls.length > 0)
{
VarHTML += "<table border=\"0\" cellspacing=\"0\" cellpadding=\"0\">\n";
VarHTML += " <tr>\n";
VarHTML += " <td><div><img src=\"" + WWHFrame.WWHHelp.mHelpURLPrefix + "wwhelp/wwhimpl/common/images/spc_tb_l.gif" + "\" alt=\"\"></div></td>\n";
VarHTML += "<td width=\"23\"><a href=\"" + WWHFrame.WWHHelp.mHelpURLPrefix + "index.html\" target=\"_top\" title=\"Home\"><img src=\"" + WWHFrame.WWHHelp.mHelpURLPrefix + "wwhelp/wwhimpl/common/images/homeicon.gif\" border=\"0\" height=\"21\" width=\"23\" alt=\"Home\" /></a></td>";
VarHTML += "<td><div><img src=\"" + WWHFrame.WWHHelp.mHelpURLPrefix + "wwhelp/wwhimpl/common/images/spc_tb_m.gif" + "\" alt=\"\"></div></td>\n";
for (VarMaxIndex = VarEnabledControls.length, VarIndex = 0 ; VarIndex < VarMaxIndex ; VarIndex++)
{
VarHTML += VarEnabledControls[VarIndex].fGetHTML();
if ((VarIndex + 1) < VarMaxIndex)
{
VarHTML += " <td><div><img src=\"" + WWHFrame.WWHHelp.mHelpURLPrefix + "wwhelp/wwhimpl/common/images/spc_tb_m.gif" + "\" alt=\"\"></div></td>\n";
}
}
VarHTML += " </tr>\n";
VarHTML += "</table>\n";
}
}
return VarHTML;
}Save the override file. Make sure you have created the wwhelp/wwhimpl/common/images/ folder structure in your override directory and have placed your home button image in the images directory.
Open your override version of pagenav.htm
Locate this line:
<frameset cols="87,*,160" border="0" frameborder="0" framespacing="0" onkeydown="WWHPageNavFrame_HandleKeyDown((document.all||document.getElementById||document.layers)?event:null);" onkeypress="WWHPageNavFrame_HandleKeyPress((document.all||document.getElementById||document.layers)?event:null);" onkeyup="WWHPageNavFrame_HandleKeyUp((document.all||document.getElementById||document.layers)?event:null);">
Change the 87 in the frameset cols specification to a width that allows for your new button and the space between it and the following button.
Save the override files.
Regenerate your help output and test it -- the home icon should now appear in the topic toolbars.
You should note some limitations to this approach:
adding the Home button in this way hardcodes the button into the toolbar. You cannot turn the button on or off from the ePubPro Target menu > Target Settings function. You can modify your template to control the button from the ePubPro Target Settings, but doing so is a little more complicated.
- the ALT text for the Home icon is hardcoded into the controls.js file. If you translate your help system, you will need to edit the ALT text in your translated help output. This is not difficult to do, but it is something you'll need to remember to do.