Adding a space between the navigation buttons

A customer was developing a WebWorks Help 5.0 help system for use on a touch-screen interface. To avoid user mistakes caused by "fat fingers," the client was looking for a way to add space between the navigation buttons at the top of the content pane. This is the solution I developed:

At first, I thought that it might be more practical to increase the size of the buttons, but that would throw off the alignment of the top nav strip in the output, among other issues. I think it will be easier to just add some space between the buttons, as you originally requested.

To do this, you'll have to make a change to the JavaScript that builds the HTML for the nav buttons, and you will have to modify the HTML file that defines the individual frames containing those buttons to allow for the increased space on the right and left sides.

So, perform an override on the following file, located by default in the ePublisher installation directory, here:

..\Formats\WebWorks Help 5.0\Files\wwhelp\wwhimpl\common\scripts\controls.js

Once you have it copied into the appropriate folder in your project directory, open it in a text editor. Locate the function WWHControlEntry_GetHTML(). There, the HTML for each of the nav images in put together. First, the style attributes for the DIV containing the image is defined:

VarStyleAttribute = " style=\"font-size: 1px; line-height: 1px;\""; 

To add some space around each image, change it to something like this:

VarStyleAttribute = " style=\"font-size: 1px; line-height: 1px; padding: auto 15px;\""; 

Next, increase the width of each table cell to accommodate the new padding. Change this:

VarHTML += " <td width=\"23\">"; 

to this:

VarHTML += " <td width=\"53\">"; 

You can then save and close 'controls.js.' Next, perform an override on the HTML file containing the three frames that keep the nav buttons aligned:

Formats\WebWorks Help 5.0\Files\wwhelp\wwhimpl\common\html\pagenav.htm

Copy it into the corresponding directory in your project folder, and open it in a text- or HTML-editing application. Near the bottom, you'll find the frameset definition:

<frameset cols="87,*,160" ...

To make room for the expanded table cells, change those values to something like this:

<frameset cols="160,*,265" ...

Finally, save 'pagenav.htm' and regenerate your output to apply the changes.

CategorySolutionsOutputWebWorksHelp CategorySolutionsOverrides