Method 2: Inserting a JavaScript Link Into a Topic

This is similar to the previous method, where you are inserting JavaScript into a single topic. However, in this case, we will not be inserting the code directly, but rather we will be linking to the script contained in another file. This might be preferred if you want to insert the same code into multiple topics, but not necessarily all of the topics in the project.

How to Create a Subfolder

We will create a subfolder just to keep our script file separate from other files in the project.

  1. In the Content Explorer, right-click the Resources folder and select New > Folder.
  2. Enter Scripts as the name of the folder and press ENTER.

How to Create a JavaScript File

  1. Open a text editor such as Notepad++.
  2. Create a new file in that editor.
  3. Copy the JavaScript code provided and paste it in the editor.

  4. Save the file to the Scripts folder that you just created (in Windows you will need to navigate to the folder where you stored the Flare project, and then to the Content > Resources > Scripts subfolder). Name the file Scroll-Button, and give it a .js extension (Scroll-Button.js). In Flare, it should look like this.

How to Insert a JavaScript Link Into a Topic

  1. Open the Attractions.htm topic. The topic opens in the XML Editor.
  2. Place your cursor in the empty paragraph at the bottom of the topic (or elsewhere if you like).
  3. Select the Insert ribbon, and near the right end of the ribbon click Script.
  4. From the Language drop-down, select text/javascript.
  5. In the Script Link field select the Scroll-Button.js file.

  6. Click OK. A small icon displays at the location where you inserted the script.

  7. Click Save the active file. to save your work.
  8. Build and view the All-About-Austin-HTML5 target.
  9. In the output, open the Attractions topic and test the scroll button just as you did with the previous method.
  10. Again, let's delete the inserted script before continuing in this tutorial. So in Flare, open the Attractions.htm topic, and delete the paragraph containing the JavaScript icon.
  11. Click Save the active file. to save your work.