How to add a Custom Button to Open Topic from Project in HTML5 output

 Article #: GEN1006Z  Product: Flare Version: All

Summary:

The steps for how to create a custom button to open a topic from the project are listed below. This solution is for the HTML5 output.

Full Description:

  1. Locate and open the skin file used for the HTML5 target
  2. Click on the "Toolbar" tab.
  3. Create a custom button name such as "gotoTopic" and use the arrow to move it to the "Selected" column. Custom buttons can be created by clicking on the wrench icon that has a green plus on the corner.
  4. Click on the Styles tab and find the new custom button name under "Toolbar Button" group.
  5. The custom button properties need to be customized with an icon and/or background color
  6. The onclick code needs to be as follows where 'Topic.htm' needs to be replaced with the file name of the topic that should be opened.
  7. location.href='#Topic.htm';

    Note: The information after the # character needs to be the path to the topic. If Topic.htm is right under the content folder, then the code would be location.href='#Topic.htm'; However, if there is another level under the Content folder, then it would be need to be included such as location.href='#subfolder/Topic.htm';

  8. Save the changes
  9. Re-build the HTML5 target to check the functionality of the new button.

Other useful onclick JavaScript:

Function JavaScript
Open URL in new window

window.open('http://www.madcapsoftware.com');

Close the entire Help System window

top.close();

Go back to previous page (similar to browser back button)

window.history.back();

Go forward one page (similar to browser forward button)

window.history.forward();

Attribution:

Last updated:

March 2, 2013

Author:

Lori Okamoto

Contributions by:

MadCap Users Forum