How to Use JQuery in WebHelp Responsive Output
The JQuery library that comes bundled with WebHelp is accessible in the browser's global context so that developers have access to use it.
To use the JQuery library in your WebHelp Responsive output, follow these steps:
- If you have not already created a Publishing Template, see How to Create a Publishing Template.
- Create the following items in the folder that contains your publishing
template's descriptor file (the .opt file):
- A folder named js
- A folder named fragments
- In the js folder, create a file named custom.js.
- As a starting point, you can copy the following content to the
custom.js
file:
$(document).ready(function () { // Your JQuery code. });
- In the fragments folder, create a file named
jquery-scripts.html with the following
content:
<html> <script src="${oxygen-webhelp-template-dir}/js/custom.js" defer="defer"></script> </html>
Important: Make sure that the@defer
attribute is present on the<script>
element. - Copy the js folder to the output folder during the transformation
process. For this, open the .opt file and add the following content
in the
<resources>
section (see Template Resources for more details):<fileset> ... <include name="js/**"/> ... </fileset>
- Include the jquery-scripts.html file in your WebHelp
Responsive output by opening the .opt file and add the following
content inside the
<webhelp>
element:<html-fragments> <fragment file="jquery-scripts.html" placeholder="webhelp.fragment.head"/> </html-fragments>
- Run the transformation with your publishing template selected.