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)
https://kryogenix.org/code/browser/sorttable/
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
https://www.kunkalabs.com/mixitup/
table-dragger
Makes it possible to drag individual table rows or table columns to another position within a table.
Price level: ● free (open source)
https://github.com/sindu12jun/table-dragger
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)
https://speckyboy.com/responsive-html-table-techniques/
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)
https://css-tricks.com/making-tables-with-sticky-header-and-footers-got-a-bit-easier/
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)
https://github.com/davidjbradshaw/image-map-resizer
Image Zoom
jQuery plug-in for adding various zooming functions to an image.
Price level: ● free (open source)
https://www.elevateweb.co.uk/image-zoom/
Zooming
Enlarges an image to use the full screen size when the image is clicked.
Price level: ● free (open source)
https://kingdido999.github.io/zooming/
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)
https://github.com/fonstok/jfMagnify
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)
http://www.outsharked.com/imagemapster/
iTyped
Animated typing effect. Can be used as a simple eye catcher.
Price level: ● free (open source)
https://github.com/luisvinicius167/ityped
Vivify
Versatile CSS animation library.
Price level: ● free (open source)
https://github.com/Martz90/vivify
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)
https://www.hongkiat.com/blog/on-click-animated-gif/
SVG Morpheus
Can morph one SVG icon to another.
Price level: ● free (open source)
https://github.com/alexk111/SVG-Morpheus
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)
https://maxwellito.github.io/vivus-instant/
Freezeframe.js
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)
https://github.com/ctrl-freaks/freezeframe.js/
Tabs
tabulous.js
iQuery plug-in for adding tabs to the content of an HTML page.
Price level: ● free (open source)
https://github.com/aaronlumsden/tabulous.js
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)
https://github.com/samsono/Easy-Responsive-Tabs-to-Accordion
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)
https://github.com/peachananr/autofix_anything
Sticky Sidebar
Makes elements on a sidebar stay visible as long as you want.
Price level: ● free (open source)
https://abouolia.github.io/sticky-sidebar/
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)
https://github.com/WickyNilliams/headroom.js
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.
https://github.com/markgoodyear/scrollup
https://github.com/fatrex/jquery-goup
https://codyhouse.co/gem/back-to-top/
AnimateScroll
Scrolls to any part of a page with various various easing effects.
Price level: ● free (open source)
https://plugins.compzets.com/animatescroll/
Tiny Scrollbar
Can be used for making content scrollable within an area of a web page.
Price level: ● free (open source)
https://baijs.com/tinyscrollbar/
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)
https://github.com/vitch/jScrollPane
Animsition
Creates CSS animated page transitions.
Price level: ● free (open source)
https://git.blivesta.com/animsition/
Animated Transition Effects
Small library of page transition effects.
Price level: ● free (article + code)
https://codyhouse.co/gem/animated-transition-effects/
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)
https://github.com/vaakash/jquery-collapser
:Nutshell
Creates expandable, embeddable explanations in a help topic. The explanations can basically include anything that HTML can contain.
Price level: ● free (open source)
https://github.com/ncase/nutshell
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)
http://gregfranko.com/jquery.tocify.js/
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)
https://tscanlin.github.io/tocbot/
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
https://www.bram.us/2020/01/10/smooth-scrolling-sticky-scrollspy-navigation/
https://lab.hakim.se/progress-nav/
mmenu
Price level: ● low
Responsive sidebar navigation
Price level: ● free (freeware)
https://codyhouse.co/gem/responsive-sidebar-navigation/
Pushy
Price level: ● free (open source)
FlexNav
Price level: ● free (open source)
https://github.com/mrjasonweaver/flexnav
Sidr
Price level: ● free (open source)
https://github.com/artberri/sidr
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)
https://github.com/adtile/fixed-nav
Anchorific
Automatically generates a synchronized menu for single-page websites.
Price level: ● free (open source)
https://github.com/renettarenula/anchorific.js
okayNav
Simple menu that displays a “more button” when there is not enough place for all items.
Price level: ● free (open source)
https://github.com/VPenkov/okayNav
Toolbar.js
jQuery plugin that creates toolbars that appear in a tooltip-like manner.
Price level: ● free (open source)
https://paulkinzett.github.io/toolbar/
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)
https://github.com/syntaxhighlighter
code-prettify
Price level: ● free (open source)
https://github.com/googlearchive/code-prettify
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)
https://github.com/kumailht/responsive-elements
keyscss
Stylesheet for rendering keys. Great for documenting keyboard shortcuts, for example.
Price level: ● free (open source)
https://github.com/michaelhue/keyscss
Rough Notation
Creates animated hand-drawn style annotations on web pages, such as underlines, boxes, highlighting, etc.
Price level: ● free (open source)
https://github.com/rough-stuff/rough-notation
8 Horizontal Rules and Dividers Enhanced with CSS
Article with code samples for styled horizontal rules.
Price level: ● free (article + code)
https://speckyboy.com/horizontal-rules-dividers-css/
validate.js
Lightweight form validation library.
Price level: ● free (open source)
https://rickharrison.github.io/validate.js/
Hovercard
jQuery plugin that lets you display information in floating popup windows.
Price level: ● not published
https://designwithpc.com/Plugins/Hovercard
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)
https://github.com/acoti/articulate.js
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)
https://github.com/MaxArt2501/share-this
10 Unique Animated Underline Text Effects with CSS
Various code snippets.
Price level: ● free (article + code)
https://speckyboy.com/underline-text-effects-css/
Styling Links with Real Underlines
Code snippets for advanced link styling.
Price level: ● free (article + code)
https://css-tricks.com/styling-links-with-real-underlines/
HTML Lists with Style
Various code snippets for advanced list styles.
Price level: ● free (article + code)
https://speckyboy.com/html-lists-style/
CSS Line Hover Styles for Links
Collection of subtle CSS-only line hover animations for links.
Price level: ● free (article + code)
https://tympanus.net/codrops/2021/02/10/simple-css-line-hover-animations-for-links/
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)
https://github.com/zenorocha/clipboard.js
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)
https://fluid-typography.netlify.app
Did you benefit from this guide?
In return, perhaps you would like to support its ongoing maintenance and purchase the PDF version (approx. 140 pages, €9.90) or one of my books?
Thank you.
This page was last updated 06/2023
Want to be notified of important updates? Follow me on LinkedIn.
Want more? See more tools and websites for technical documentation.
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.