Craig Wright is an experienced technical writer based in Chesterfield, UK. He hates writing about himself in the third person, so I shall stop now.
Always interested in new content writing opportunities. Remote working preferred.
You can use JavaScript and jQuery scripts to customise your Flare HTML5 output in many different ways, including adding menus, animated sections and much more. To implement these features, you will need to need to know where your scripts can be used, which is what I'm going to cover in this article. (You'll also need to learn about the language too).
There are three different places where you can add JavaScript and jQuery code in Flare HTML5 projects: in a Master Page file, in a skin file, and in the individual topic files. Does it matter where you add your script? Yes, it does, because the location of the script affects when the script runs.
To add a script to a Master Page, you can enter the code manually by opening the Master Page file and using the Text Editor. If you want the Master Page to contain the script, enter the code inside <script> and </script> tags. If you are going to add code to use a function that is in an external script, you need to add the 'call function' part of the code in one set of <script> tags. You will then need to add the <script src> reference in a separate set of <script> tags. For example:
Note that the script in the body has to have the CDATA stuff around it. In the code in the screen shot above, the script is calling a fadeIn function with a time set to 3000ms. The code that defines what the fadeIn function does is in the jquery-1.7.2.min.js file that is referenced in the <head> section.Alternatively, you can open the Master Page and use the XML editor instead - select the Insert menu and choose the Script option. If the Insert menu is unavailable, try adding a paragraph tag to the Master Page and then it should become available. You can delete the paragraph tag in the text editor later if needed.If you use the Insert>Script technique, you will be presented with an Insert Script window. You can choose the language type and enter the code for your script there. The important thing to note here is that you will need to use the Insert Script window twice if you are referencing an external script. This is because the window isn't designed to have the Script Code and Script Link settings used at the same time.So the first time you can set the reference to the external script file - just select Insert > Script and then use the Script Link field to browse to the script file. I tend to keep all my script files in a 'Scripts' folder that I add to the 'Resources' folder. Select OK.Then you can use Insert > Script to add the script that sets the browser to run the external script ('calls' the script). When you have displayed the Insert Script window, select the Language option and choose text/javascript. Next, enter the code for your script in the Script Code text-entry area. Select OK.When you build your project, the browser will run the script whenever a new topic is loaded. You can try the script above in Flare 10+ and it will work, even if you don't have the script file that is being referenced. This is because one of the other scripts that Flare uses also contains the fadeIn function (it is actually a jQuery script).
This works in the same way as described for the Master Page (above), but you use Insert Script on the topic file instead of the Master Page. The principles of how it works are the same, the only difference is that the script will only run when the browser loads that particular page.
This is where things are different. There is no Insert>Script for the skin file, but there is a place to add custom JavaScript in the Toolbar settings of the skin file. You can display the script editor by selecting the Edit button.
Flare skin files cannot reference external scripts, so if you want the browser to run a script when the skin first loads, you will need to add all of the script in here.
There are lots of different ways to use JavaScript with Flare, and I'm not going to pretend I know them all. In fact, I've barely scratched the surface.If you have any good ideas for scripts (or even actual scripts that you are willing to share), please make a comment below.CPD: 2 hours.
Craig Wright is an experienced technical writer based in Chesterfield, UK. He hates writing about himself in the third person, so I shall stop now.
Always interested in new content writing opportunities. Remote working preferred.
_new_hue.svg.png)
Registered Number: 08029184
Straygoat logo design by Bristol graphic designer, Nik Jones.
© Straygoat Writing Services Ltd.