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:
- Locate and open the skin file used for the HTML5 target
- Click on the "Toolbar" tab.
- 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.
- Click on the Styles tab and find the new custom button name under "Toolbar Button" group.
- The custom button properties need to be customized with an icon and/or background color
- 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.
- Save the changes
- Re-build the HTML5 target to check the functionality of the new button.
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';
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 |