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
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
FooTable jQuery plugin that transforms HTML tables into expandable, responsive tables. Price: approx. $29 https://fooplugins.com/footable/ Sortable tables The following is a collection of javascripts that make tables sortable. Some of the scripts add additional features, such as filtering and highlighting rows and columns. https://codecanyon.net/item/ tquery-dynamic-tables/89478 https://kryogenix.org/code/browser/sorttable/ List.js JavaScript that makes HTML lists, HTML tables, and other objects searchable, sortable and filterable. Price: free (open source) MixItUp jQuery plug-in for animated filtering and sorting of content. Price: approx. $25 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: free (open source) |
Image Map Resize Makes it possible for users to resize images that have image maps by updating the coordinates of the image map. Price: 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: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:free (open source) https://desmonding.me/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: 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: free (open source) http://www.outsharked.com/imagemapster/ GreenSock Animation Platform (GSAP) Suite of libraries for scripted animation. Price: free for most uses; full commercial license, plug-ins and tools starting at approx. $150 per year iTyped Animated typing effect. Can be used as a simple eye catcher. Price:free (open source) https://github.com/luisvinicius167/ityped Vivify Versatile CSS animation library. Price:free (open source) |
tabulous.js iQuery plug-in for adding tabs to the content of an HTML page. Price: free (open source) https://github.com/aarondo/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: 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: 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: free (open source) http://lirancohen.github.io/stickUp/ pretty-scroll JS library to make an element follow as users scroll. Price. 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. 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. free (open source) http://webpop.github.io/jquery.pin/ Sticky Can be used to make any element on a page always stay visible. Price: free (open source) https://github.com/garand/sticky Sticky Sidebar Makes elements on a sidebar stay visible as long as you want. Price: free (open source) https://abouolia.github.io/sticky-sidebar/ FixedContent.js Mobile-friendly, jQuery plugin that persists sidebar content, navigation, etc. Price: 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: 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: 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: 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: free (open source) https://github.com/vitch/jScrollPane Animsition Creates CSS animated page transitions. Price: free (open source) http://git.blivesta.com/animsition/ Animated Transition Effects Small library of page transition effects. Price: free (tutorial with code and image samples) 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: free (open source) |
jQuery collapser Price: free (open source) |
EasyTree Creates a collapsible navigation tree. Price: free (open source) jquery.toc Creates a static table of contents from the content of a page. Price: free (open source) Navgoco Multi-level slide navigation with session storage and accordion effect. Price: free (open source) http://www.komposta.net/article/navgoco Tocify Creates a table of contents based on the headings on an page. Can be themed with Twitter Bootstrap or jQueryUI. Price: 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: 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: free (open source) |
mmenu Price: donationware Responsive sidebar navigation Price: free (freeware) for most uses https://codyhouse.co/gem/responsive-sidebar-navigation/ Pushy Price: free (open source) FlexNav Price: free (open source) https://github.com/mrjasonweaver/flexnav Sidebars Price: free (open source) https://www.adchsm.com/slidebars/ SlickNav Price: free (open source) Sidr Price: free (open source) https://github.com/artberri/sidr SmartMenus Price: free (open source) Fixed Nav Responsive, fixed and touch friendly menu and animated scrolling for single-page web sites. Price: free (open source) https://github.com/adtile/fixed-nav Anchorific Automatically generates a synchronizing menu for single-page web sites. Price: 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: free (open source) https://github.com/VPenkov/okayNav Toolbar.js jQuery plugin that creates tooltip style toolbars. Price: 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 comment script with many features and a comprehensive administration backend. Price: free (open source) MadCap Pulse Documentation-centric social collaboration platform. Creates a social layer around documentation in order to connect, collaborate and share knowledge with authors, employees and customers. Designed to be used in combination with MadCap Flare. Price: starting at approx. $200 per month https://www.madcapsoftware.com 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 a complete topic. Annotations can be tagged and filtered. Price: free (open source) |
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, PhoneGap Price: free (open source) |
Prism Price: free (open source) highlight.js Price: free (open source) SyntaxHighlighter Price: free (open source) https://github.com/syntaxhighlighter code-prettify Price: free (open source) |
Responsive elements Makes it possible for any element to adapt to the size of the area it occupies. Price: free (open source) https://github.com/kumailht/responsive-elements keyscss Stylesheet for rendering keys. Great for documenting keyboard shortcuts, for example. Price: free (open source) https://github.com/michaelhue/keyscss validate.js Lightweight form validation library. Price: free (open source) http://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: not published http://designwithpc.com/Plugins/Hovercard WeasyPrint Generates PDF from HTML. Can by styled with CSS. Price: free (open source) Articulate.js jQuery plugin that reads sections of a web page aloud, using the Web Speech API. Price: 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: free (open source) https://github.com/MaxArt2501/share-this 10 Unique Animated Underline Text Effects with CSS Various code snippets. Price: free (check terms of each snippet) https://speckyboy.com/underline-text-effects-css/ Styling Links with Real Underlines Code snippets for advanced link styling. Price: free https://css-tricks.com/styling-links-with-real-underlines/ HTML Lists with Style Various code snippets for advanced list styles. Price: free (check terms of each snippet) https://speckyboy.com/html-lists-style/ darkmode.js Adds on option to toggle between a dark-mode (night-mode) and the normal mode of an HTML page. Price: free (open source) |
Did you benefit from this guide? Did it save you some time compared to search via Google or other search engines? Please help me to keep the guide free and up to date also in the future. Buy a copy of the PDF version (approx. 120 pages).
Thank you.
This page was last updated 01/2020
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.