JavaScript: Files and Libraries

To use some of the certified JavaScript (JS) files, you need to link directly to them. The rest of the code is up to you, although we provide links to some of the documentation.

If a desired functionality can be achieved with one of the included file and library, please use that one. Do not request that another, similar, library be added.

Included JavaScript Files and Libraries

These scripts that are integrated with the core Drupal application.

• jQuery (3.6.0): This core file is automatically available on all www pages; you do not have to explicitly link to it.
• jQuery Cycle (3.0.3) –jQuery plug-in that adds slideshow functionality to a page. [https://github.com/malsup/cycle]

These scripts are included with the core Drupal application, but you must explicitly link to them.

• jQuery UI (1.12.1) - jQuery UI is a set of user interface interactions, effects, widgets, and themes built on top of the jQuery. [http://jqueryui.com/]
• jQuery UI files are all available on www. Find their precise location by exploring the WebCMS GitHub repository:  (webcms/services/drupal/web/sites/all/modules/contrib/jquery_update/replace/ui/ui)
• USWDS Components, including a sortable table, tooltips, and a modal box.

Certified Third-Party JavaScript Files and Libraries

These files and libraries have been added to fulfill the needs of our content editors (more can be added as need arises). If you want to use these files, link to their locations in the Page JavaScript field in the Drupal WebCMS page editor. We have links to internal and external documentation for many of these files.

• clipboard.js (1.5.16) – copy to clipboard without Flash [https://clipboardjs.com/]
  • Link to: /sites/production/files/js-scripts/clipboard.min.js
• D3 (5) – interactive charts and graphs [http://d3js.org/]
  • Link to: /sites/all/libraries/js/d3.v5.min.js
• DataTables (1.10.16, 1.10.12, & 1.10.10) – jQuery plug-in that adds table sorting and filtering [http://datatables.net/]
  • All 1.10.10 included files are in the directories /sites/all/libraries/js/datatables/extras/ and /sites/all/libraries/js/datatables/media/
    • These files include: AutoFill, Buttons, ColReorder, FixedColumns, FixedHeader, KeyTable, Responsive, RowReorder, Scroller, Select
  • All 1.10.12 included files are in the directory sites/all/libraries/js/datatables-1.10.12/
    • ​These files include: AutoFill, Buttons, ColReorder, FixedColumns, FixedHeader, JSZip, KeyTable, pdfmake, Responsive, RowReorder, Scroller, Select
  • All 1.10.16 included files are in the directory sites/all/libraries/js/datatables-1.10.16/
    • ​These files include: AutoFill, Buttons, ColReorder, FixedColumns, FixedHeader, JSZip, KeyTable, pdfmake, Responsive, RowReorder, Scroller, Select
  • See the documentation and examples at datatables.net.
• Date and Time Utilities
  • Datetime.js: link to the following file: /sites/all/libraries/js/datetime.js
  • Moment.js: link to the following file: /sites/all/libraries/js/moment.min.js
• Highcharts JS (4.2.7) – interactive charts for your data [http://www.highcharts.com/]
  • Link to the following file: /sites/all/libraries/js/highcharts/highcharts.js
  • Other files can be found in the highcharts directory. See the documentation and examples at highcharts.com.
• Highstock JS (4.2.7)
  • Link to: /sites/all/libraries/js/highcharts/highstock_v.4.2.7.js
  • ​The available plugins include: boost, broken-axis, canvas-tools, data, drilldown, exporting, funnel, heatmap, no-data-to-display, offline-exporting, series-label, solid-gauge, treemap
• jsPDF (1.3.2) – for generating PDFs in client-side JavaScript. [https://rawgit.com/MrRio/jsPDF/master/docs/index.html]
  • Link to the following file: /sites/production/files/js-scripts/jspdf.min.js
• Modal box: please use the USWDS modal box instead, but the jQuery Colorbox (1.6.4) is included – jQuery plug-in that adds lightbox/modal windows to a page. [https://github.com/jackmoore/colorbox]
  • Link to the following file: /sites/all/libraries/colorbox/colorbox/jquery.colorbox-min.js
• jQuery Cycle 2 (2.1.6) – jQuery plug-in that adds slideshow functionality to a page (an updated version of Cycle). [https://github.com/malsup/cycle2/]
  • Link to the following file: /sites/all/libraries/cycle/jquery.cycle2.min.js
• raphaël (2.2.1) – Work with vector graphics [https://dmitrybaranovskiy.github.io/raphael/]
  • Link to the following file: /sites/all/libraries/js/raphael-min.js
• rwdImageMaps (1.6) – Allows images maps to be properly used in a responsive design. [https://github.com/stowball/jQuery-rwdImageMaps]
• Timeline (2.17) – Adds the ability to include a timeline on a page which support various media sources. [https://github.com/NUKnightLab/TimelineJS]

• ToolTip - Adds a short descriptive message that appears when a user hovers or focuses on an element. You can apply it to buttons or to links, and possibly even other elements. This is the preferred method. [https://designsystem.digital.gov/components/tooltip/]

  • The jQuery UI ToolTip is available at (not recommended, but has more features): /sites/all/modules/contrib/jquery_update/replace/ui/ui/jquery.ui.tooltip.js