Enhancements for Help
Selection of JavaScript libraries and other modules that can add interesting features to online help systems—even if the used help authoring tools don’t support these features. (Tip: You can also just use this overview to simply collect some ideas on how to enhance the online help systems you create.)
On this page:
Tables, sorting, and filtering
Scrolling and page transitions
Navigation menus (responsive; also usable on mobile devices)
Tools for transforming mobile help into native mobile apps
Syntax highlighting for source code examples
Miscellaneous other applications
For information on the indicated price levels , see Price Levels.
Sortable tables Price level: free (article + code snippets) 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 the 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 snippets) 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 snippets) https://css-tricks.com/making-tables-with-sticky-header-and-footers-got-a-bit-easier/ |
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 image zooming functions to a image. Price level: free (open source) https://www.elevateweb.co.uk/image-zoom/ Zooming Enlarges images to use the full screen size when an 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). Users can also change the magnification level. 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 snippets) 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 (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) |
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 |
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 stickUp Fixes an element to the top of the browser window, always keeping it in view. Also has some additional features for one-pager layouts. Price level: free (open source) https://lirancohen.github.io/stickUp/ pretty-scroll JS library to make an element follow as users scroll. Price level: free (open source) https://github.com/appleple/pretty-scroll Sticky-Kit Sticks elements inside of their parent elements. Only sticks an item if this item doesn’t take up the entire height of its parent. Sticky elements taller than the viewport can scroll independently up and down. Price level: free (open source) jQuery.Pin Can pin any element to the top of a container. For small screen-sizes, the pinning can be disabled. Price level: free (open source) https://webpop.github.io/jquery.pin/ Sticky Can be used to make any element on a page always stay visible. Price level: free (open source) https://github.com/garand/sticky 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/ FixedContent.js Mobile-friendly, jQuery plugin that persists sidebar content, navigation, etc. Price level: free (open source) https://github.com/jeremychurch/FixedContent.js 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 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 scolled down on a page. https://github.com/markgoodyear/scrollup https://github.com/dnlnrs/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. Supports scrolling by wheel, thumb, track, or touch. 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 snippets) 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) |
jQuery collapser Price level: free (open source) |
EasyTree Creates a collapsible navigation tree. Price level: free (open source) 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 Twitter 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) Some solutions for sticky scroll spy navigation on a web page https://www.bram.us/2020/01/10/smooth-scrolling-sticky-scrollspy-navigation/ |
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 web sites. Price level: free (open source) https://github.com/adtile/fixed-nav Anchorific Automatically generates a synchronizing menu for single-page web sites. 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 tooltip style toolbars. Price level: free (open source) |
Commenting systems can be used to add social features to online help systems, such as user comments and ratings. You can use the commenting systems with all help authoring tools that let you modify the topics' HTML templates or embed HTML code snippets. So you don’t necessarily have to use a help authoring tool with a built-in commenting feature. Commentics Advanced PHP-based commenting system with many features and a comprehensive administration backend. Price level: free (open source) HashOver PHP comment system that allows also anonymous comments. Comments can be stored in either flat-file formats like XML or JSON, or in an SQL database. Price level: free (open source) https://www.barkdull.org/software/hashover Annotator JavaScript library to add annotation functionality to text on a web page. Other than with typical commenting systems, the comments relate to specific text sections, not to an entire topic. Annotations can be tagged and filtered. Price level: free (open source) Talkyard Can be used as a simple commenting system, but also in many additional ways to connect users and staff (knowledge base, forum, chat). Can be self-hosted (free) or hosted by the provider. Price level: diverse Some commercially hosted services |
If you create a native app from the WebHelp that a help authoring tools creates, users don’t need an internet connection when viewing the content. Apache Cordova Price level: free (open source) Capacitor Price level: free (open source) |
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) |
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 snippets) 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 plug-in that enables you to display related or additional information with the hovered label, link, or any HTML element. 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. (Note: In Europe, check for GDPR compliance.) 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 snippets) https://speckyboy.com/underline-text-effects-css/ Styling Links with Real Underlines Code snippets for advanced link styling. Price level: free (article + code snippets) 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 snippets) 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 snippets) 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) |
Did this guide help you? Then I would be glad if you purchase the PDF and EPUB version of the guide to support its further maintenance (approx. 130 pages).
Thank you.
This page was last updated 05/2022
Legal Notes:
This page may contain paid advertisements, which are marked as such. Apart from this, the linked web sites 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.