Depending on the desired functionality, adding a button to Flare’s Web outputs can be fairly easy and requires some basic JavaScript knowledge.

This blog post will outline the steps required to create a button in HTML5 output that changes text color based off of an “ID”. The JavaScript function for HTML5 and WebHelp will be provided. To create the same effect in WebHelp, use the same steps, but use the default skin and the correct script for WebHelp (below). Note, this script will not work in Chrome unless viewed from a WebServer. If you are going to test/run this script locally, run the resulting output in Internet Explorer.

Things you will need:

  • A new Flare Project with an HTML5 Target and Skin
  • Set an ID in a topic
  • Some JavaScript (See Below) for the skin file

Topic and ID:

1. Open the topic in the text editor and add id=”foo” to the <p> tag.

Adding an ID to a paragraph

2. Save all and close the topic in the Text Editor

Skin settings:

1. In the Project Organizer, open the HTML5 Skin in the Skin Editor

2. Go to the “Toolbar” Tab

3. Click the “Add custom toolbar item” button and name the button “changeColor”

4. Click the “Add item” button to move the ‘changeColor’ button to the ‘Selected’ column

The First Few Steps

5. Your ‘Selected’ column should now look like this:

Adding a button

6. Now click the “Edit” button and paste this code into it:
function changeColor()
{
frames[‘topic’].document.getElementById(“foo”).style.color=”#FF0000″;
}

7. OK and Save all

8. Go to the Styles tab and the styles dialog box

9. Scroll down to the “Toolbar Button” node and expand it

10. You should see the button that you created “changeColor”, click on it

11. Click and expand the Event node and type in the “Click” area: “changeColor()”

Second Set of Steps

12. Save all and close the Skin

Generate HTML Help and view the results using Internet Explorer. You will see a blank button that if you click, it will change the text of the paragraph to red.

End Result

The button can now be styled to include an icon, text, different colors, etc.  Just go back to the Styles Tab in the skin and edit the properties for the button as you want.

Notes:

  • Make sure that the button name is all one word (no spaces) and that the casing in the script is all the same.
  • Since browser security is different, be sure to test any custom script locally and on a WebServer in all browsers. As in this example, some scripts will not work locally but will function fine served up or altered security settings.

To do this for WebHelp, use the steps above, but you will be editing the Default Skin and adding the this JavaScript instead of the code given above.

function changeColor()
{
 self.frames['body'].document.getElementById("textColor").style.color="#FF0000";
}