Edit online

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:
  1. If you have not already created a Publishing Template, see How to Create a Publishing Template.
  2. 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
  3. In the js folder, create a file named custom.js.
  4. As a starting point, you can copy the following content to the custom.js file:
    $(document).ready(function () {
    // Your JQuery code.
});
  5. 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.
  6. 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>
  7. 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>
  8. Run the transformation with your publishing template selected.