Enhancements for online documentation

Selection of JavaScript libraries and other modules that can add interesting features to online documentation (online help)—even if the used authoring tool doesn’t support these features.

For information on the indicated price levels , see Price levels.

Tables, sorting and filtering functions

Sortable tables

Price level: free (article + code)

DataTables

Can add a variety of interaction controls to tables, such as pagination, search, sorting, responsiveness, etc.

Price level: free (open source)

List.js

JavaScript that makes HTML lists, HTML tables, and other objects searchable, sortable and filterable.

Price level: free (open source)

MixItUp

jQuery plug-in for animated filtering and sorting of content.

Price level: low

table-dragger

Makes it possible to drag individual table rows or table columns to another position within a table.

Price level: free (open source)

Code samples for responsive HTML table techniques

Article with various code samples for different approaches on making tables responsive one way or the other.

Price level: free (article + code)

Code samples to make table headers and footers sticky while browsing the table

Article with live demo and code snippets.

Price level: free (article + code)

Image and animation functions

Image Map Resize

Makes it possible for users to resize images that have image maps by updating the coordinates of the image map.

Price level: free (open source)

Image Zoom

jQuery plug-in for adding various zooming functions to an image.

Price level: free (open source)

Zooming

Enlarges an image to use the full screen size when the image is clicked.

Price level: free (open source)

jfMagnify

Creates a magnifying glass that viewers can move around an entire web page (not just an image). The magnification level can be changed.

Price level: free (open source)

ImageMapster

jQuery plug-in to add various dynamic effects to image maps, such as automatic mouseover highlighting, floating tooltips, and more.

Price level: free (open source)

iTyped

Animated typing effect. Can be used as a simple eye catcher.

Price level: free (open source)

Vivify

Versatile CSS animation library.

Price level: free (open source)

How to Play Animated GIFs onClick

Article and code samples on how to start an animated GIF only after it has been clicked with the mouse.

Price level: free (article + code)

SVG Morpheus

Can morph one SVG icon to another.

Price level: free (open source)

SVG Artista

Tool to create CSS-based animations of stroke and fill in SVG images. Generates downloadable code.

Price level: free (web application)

Vivus Instant

Tool to generate stroke drawing animations from SVG images. Generates downloadable CSS code.

Price level: free (web application)

Freezeframe.js (NEW ENTRY)

Library that can be used to pauses animated GIF images. Can then enable the animation on mouse hover, mouse click, or manually.

Price level: free (open source)

Tabs

tabulous.js

iQuery plug-in for adding tabs to the content of an HTML page.

Price level: free (open source)

Easy Responsive Tabs to Accordion

iQuery plugin that transforms tabs to an accordion when the width of the display gets too small for the tabs.

Price level: free (open source)

Sticky elements

Auto Fix Anything

Fixes the position of any container element. Automatically detects when to fix/unfix the position.

Price level: free (open source)

Sticky Sidebar

Makes elements on a sidebar stay visible as long as you want.

Price level: free (open source)

Headroom.js

Makes a page header slide out of view when scrolling down and slides it back in when scrolling up.

Price level: free (open source)

Scrolling and page transition functions

Scrolling back to the top of a page

The following is a collection of JavaScripts that show a scroll back to top button when the users has scrolled down on a page.

AnimateScroll

Scrolls to any part of a page with various various easing effects.

Price level: free (open source)

Tiny Scrollbar

Can be used for making content scrollable within an area of a web page.

Price level: free (open source)

jScrollPane

Converts a browser's default scrollbars (on elements with overflow property) into an HTML structure that can be skinned with CSS.

Price level: free (open source)

Animsition

Creates CSS animated page transitions.

Price level: free (open source)

Animated Transition Effects

Small library of page transition effects.

Price level: free (article + code)

Barba.js

Creates a number of page transitions. In particular, creates a transition between web pages that works like a slider with a previous and next button.

Price level: free (open source)

Collapsible elements

jQuery collapser

Price level: free (open source)

:Nutshell (NEW ENTRY)

Creates expandable, embeddable explanations in a help topic. The explanations can basically include anything that HTML can contain.

Price level: free (open source)

TOCs and navigation trees

jquery.toc

Creates a static table of contents from the content of a page.

Price level: free (open source)

Tocify

Creates a table of contents based on the headings on an page. Can be themed with Bootstrap or jQueryUI.

Price level: free (open source)

Tocbot

Builds a table of contents based on the heading structure of an HTML document. No dependencies on other libraries, such as jQuery.

Price level: free (open source)

pagemap

Adds a small sticky image of a web page to the upper right corner as a navigation aid.

Price level: free (open source)

Solutions for sticky scroll spy navigation on a web page

mmenu

Price level: low

Responsive sidebar navigation

Price level: free (freeware)

Pushy

Price level: free (open source)

FlexNav

Price level: free (open source)

Sidr

Price level: free (open source)

SmartMenus

Price level: free (open source)

Fixed Nav

Responsive, fixed and touch friendly menu and animated scrolling for single-page websites.

Price level: free (open source)

Anchorific

Automatically generates a synchronized menu for single-page websites.

Price level: free (open source)

okayNav

Simple menu that displays a “more button” when there is not enough place for all items.

Price level: free (open source)

Toolbar.js

jQuery plugin that creates toolbars that appear in a tooltip-like manner.

Price level: free (open source)

Syntax highlighting for source code examples

Prism

Price level: free (open source)

highlight.js

Price level: free (open source)

SyntaxHighlighter

Price level: free (open source)

code-prettify

Price level: free (open source)

Miscellaneous special applications

Responsive elements

Makes it possible for any element to adapt to the size of the area it occupies.

Price level: free (open source)

keyscss

Stylesheet for rendering keys. Great for documenting keyboard shortcuts, for example.

Price level: free (open source)

Rough Notation

Creates animated hand-drawn style annotations on web pages, such as underlines, boxes, highlighting, etc.

Price level: free (open source)

8 Horizontal Rules and Dividers Enhanced with CSS

Article with code samples for styled horizontal rules.

Price level: free (article + code)

validate.js

Lightweight form validation library.

Price level: free (open source)

Hovercard

jQuery plugin that lets you display information in floating popup windows.

Price level: not published

WeasyPrint

Generates PDF from HTML. Can by styled with CSS.

Price level: free (open source)

Articulate.js

jQuery plugin that reads sections of a web page aloud, using the Web Speech API.

Price level: free (open source)

share-this

When a user selects some text on a page, a popup window appears. The user can then share the selected text via email or via various social networks, or take a note relating to the selected text.

Price level: free (open source)

10 Unique Animated Underline Text Effects with CSS

Various code snippets.

Price level: free (article + code)

Styling Links with Real Underlines

Code snippets for advanced link styling.

Price level: free (article + code)

HTML Lists with Style

Various code snippets for advanced list styles.

Price level: free (article + code)

CSS Line Hover Styles for Links

Collection of subtle CSS-only line hover animations for links.

Price level: free (article + code)

darkmode.js

Adds on option to toggle between a dark-mode (night-mode) and the normal mode of an HTML page.

Price level: free (open source)

clipboard.js

Copies the text of a particular HTML element to the clipboard. Can be used, for example, to make copying documented code samples easy.

Price level: free (open source)

Fluid Typography

Tiny tool that helps you create the css code for making text scale with the current window size.

Price level: free (web application)

Did you benefit from this guide?
In return, please support its ongoing maintenance and purchase the PDF version (approx. 140 pages, €9.90).

Thank you.

Order the Technical Documentation Tool and Web Guide

This page was last updated 01/2023
Want to be notified of important updates? Follow me on LinkedIn.

Want more? See Overview: Technical Documentation Tool and Web Guide.

Legal Notes:
This page may contain paid advertisements, which are marked as such. Apart from this, the linked websites and their publishers are not associated with or endorsed by indoition Technical Communication Services Marc Achtelig, and do not reflect the opinion of indoition Technical Communication Services Marc Achtelig. Copyright of linked materials by their respective copyright holders. Note the license terms given on the linked pages! Any pricing and licensing information given on this page is only for prior information and without guarantee.