Funktionserweiterungen für Onlinedokumentation
Auswahl an JavaScript-Bibliotheken und anderen Modulen, mit deren Hilfe Sie eine Onlinedokumentation (Online-Hilfe) mit interessanten Zusatzfunktionen aufwerten können – auch dann, wenn das verwendete Redaktionssystem diese Funktionen nicht unterstützt.
Informationen zu den angegebenen Preisklassen ● ● ● ● ● ● finden Sie unter Preisklassen.
Tabellen, Sortier- und Filterfunktionen
Sortable tables
Preisklasse: ● kostenlos (Artikel + Code)
https://kryogenix.org/code/browser/sorttable/
DataTables
Kann Tabellen mit einer Vielzahl an Interaktionsmöglichkeiten versehen, wie z. B. Paginierung, Suche, Sortierung, responsive Darstellung usw.
Preisklasse: ● kostenlos (Open Source)
List.js
JavaScript, das HTML-Listen, HTML-Tabellen und andere Objekte durchsuchbar, sortierbar und filterbar macht.
Preisklasse: ● kostenlos (Open Source)
MixItUp
jQuery-Plugin zum animierten Filtern und Sortieren von Inhalten.
Preisklasse: ● niedrig
https://www.kunkalabs.com/mixitup/
table-dragger
Ermöglicht es, einzelne Tabellenzeilen oder Tabellenspalten an eine andere Position innerhalb einer Tabelle zu ziehen.
Preisklasse: ● kostenlos (Open Source)
https://github.com/sindu12jun/table-dragger
Code samples for responsive HTML table techniques
Artikel mit verschiedenen Codebeispielen für unterschiedliche Ansätze, um Tabellen auf die eine oder andere Weise responsive zu machen.
Preisklasse: ● kostenlos (Artikel + Code)
https://speckyboy.com/responsive-html-table-techniques/
Code samples to make table headers and footers sticky while browsing the table
Artikel mit Live-Demo und Codeschnipseln.
Preisklasse: ● kostenlos (Artikel + Code)
https://css-tricks.com/making-tables-with-sticky-header-and-footers-got-a-bit-easier/
Funktionen für Bilder und Animationen
Image Map Resize
Ermöglicht es den Benutzern, die Größe von Bildern mit Image Maps zu ändern, wobei die Koordinaten der Image Map angepasst werden.
Preisklasse: ● kostenlos (Open Source)
https://github.com/davidjbradshaw/image-map-resizer
Image Zoom
jQuery-Plugin zum Hinzufügen verschiedener Zoom-Funktionen zu einem Bild.
Preisklasse: ● kostenlos (Open Source)
https://www.elevateweb.co.uk/image-zoom/
Zooming
Vergrößert ein Bild auf die volle Bildschirmgröße, wenn das Bild angeklickt wird.
Preisklasse: ● kostenlos (Open Source)
https://kingdido999.github.io/zooming/
jfMagnify
Erzeugt eine Lupe, die der Betrachter auf einer ganzen Webseite (nicht nur auf einem Bild) bewegen kann. Die Vergrößerungsstufe lässt sich ändern.
Preisklasse: ● kostenlos (Open Source)
https://github.com/fonstok/jfMagnify
ImageMapster
jQuery-Plugin zum Hinzufügen verschiedener dynamischer Effekte zu Image Maps, wie z. B. automatisches Hervorheben bei Mouseover, schwebende Tooltips und mehr.
Preisklasse: ● kostenlos (Open Source)
http://www.outsharked.com/imagemapster/
iTyped
Animierter Schreibmaschineneffekt. Kann als einfacher Blickfang dienen.
Preisklasse: ● kostenlos (Open Source)
https://github.com/luisvinicius167/ityped
Vivify
Vielseitige CSS-Animationsbibliothek.
Preisklasse: ● kostenlos (Open Source)
https://github.com/Martz90/vivify
How to Play Animated GIFs onClick
Artikel und Codebeispiele dafür, wie sich ein animiertes GIF erst dann starten lässt, wenn es mit der Maus angeklickt wurde.
Preisklasse: ● kostenlos (Artikel + Code)
https://www.hongkiat.com/blog/on-click-animated-gif/
SVG Morpheus
Kann ein SVG-Symbol in ein anderes wandeln.
Preisklasse: ● kostenlos (Open Source)
https://github.com/alexk111/SVG-Morpheus
SVG Artista
Werkzeug zur Erstellung CSS-basierter Animationen von Strichen und Füllungen in SVG-Bildern. Erzeugt herunterladbaren Code.
Preisklasse: ● kostenlos (Webanwendung)
Vivus Instant
Werkzeug zur Erzeugung von Strichanimationen aus SVG-Bildern. Erzeugt herunterladbaren CSS-Code.
Preisklasse: ● kostenlos (Webanwendung)
https://maxwellito.github.io/vivus-instant/
Freezeframe.js
Bibliothek zum Anhalten animierter GIF-Bilder. Sie können dann die Animation bei Maus-Hover, Mausklick oder manuell aktivieren.
Preisklasse: ● kostenlos (Open Source)
https://github.com/ctrl-freaks/freezeframe.js/
Registerkarten
tabulous.js
iQuery-Plugin zum Hinzufügen von Registerkarten zum Inhalt einer HTML-Seite.
Preisklasse: ● kostenlos (Open Source)
https://github.com/aaronlumsden/tabulous.js
Easy Responsive Tabs to Accordion
iQuery-Plugin, das Registerkarten in ein Akkordeon umwandelt, wenn die Breite der Anzeige zu klein für die Registerkarten wird.
Preisklasse: ● kostenlos (Open Source)
https://github.com/samsono/Easy-Responsive-Tabs-to-Accordion
Fixieren von Elementen
Auto Fix Anything
Fixiert die Position eines beliebigen Containerelements. Erkennt automatisch, wann die Position fixiert/aufgelöst werden muss.
Preisklasse: ● kostenlos (Open Source)
https://github.com/peachananr/autofix_anything
Sticky Sidebar
Sorgt dafür, dass Elemente in einer Sidebar so lange sichtbar bleiben wie gewünscht.
Preisklasse: ● kostenlos (Open Source)
https://abouolia.github.io/sticky-sidebar/
Headroom.js
Lässt den Seiten-Header beim Scrollen nach unten aus dem Blickfeld verschwinden und beim Scrollen nach oben wieder hineingleiten.
Preisklasse: ● kostenlos (Open Source)
https://github.com/WickyNilliams/headroom.js
Funktionen für Bildlauf und Seitenübergang
Scrolling back to the top of a page
Sammlung von JavaScripts, die eine Schaltfläche zum Zurückblättern nach oben anzeigen, wenn der Benutzer auf einer Seite nach unten gescrollt hat.
https://github.com/markgoodyear/scrollup
https://github.com/fatrex/jquery-goup
https://codyhouse.co/gem/back-to-top/
AnimateScroll
Blättert zu einem beliebigen Teil einer Seite mit verschiedenen Bremseffekten.
Preisklasse: ● kostenlos (Open Source)
https://plugins.compzets.com/animatescroll/
Tiny Scrollbar
Kann verwendet werden, um Inhalte innerhalb eines Bereichs einer Webseite scrollbar zu machen.
Preisklasse: ● kostenlos (Open Source)
https://baijs.com/tinyscrollbar/
jScrollPane
Konvertiert die Standard-Scrollbars eines Browsers (bei Elementen mit Overflow-Eigenschaft) in eine HTML-Struktur, die mit CSS gestaltet werden kann.
Preisklasse: ● kostenlos (Open Source)
https://github.com/vitch/jScrollPane
Animsition
Erzeugt CSS-animierte Seitenübergänge.
Preisklasse: ● kostenlos (Open Source)
https://git.blivesta.com/animsition/
Animated Transition Effects
Kleine Bibliothek mit Seitenübergangseffekten.
Preisklasse: ● kostenlos (Artikel + Code)
https://codyhouse.co/gem/animated-transition-effects/
Barba.js
Erzeugt eine Reihe von Seitenübergängen. Erstellt insbesondere einen Übergang zwischen Webseiten, der wie ein Schieberegler mit einer Vor- und einer Zurück-Schaltfläche funktioniert.
Preisklasse: ● kostenlos (Open Source)
Zusammenklappbare Elemente
jQuery collapser
Preisklasse: ● kostenlos (Open Source)
https://github.com/vaakash/jquery-collapser
:Nutshell
Erzeugt expandierbare Erklärungen in einem Hilfe-Topic. Diese Erklärungen können grundsätzlich alles enthalten, was HTML enthalten kann.
Preisklasse: ● kostenlos (Open Source)
https://github.com/ncase/nutshell
Inhaltsverzeichnisse und Navigationsbäume
jquery.toc
Erzeugt ein statisches Inhaltsverzeichnis aus dem Inhalt einer Seite.
Preisklasse: ● kostenlos (Open Source)
Tocify
Erzeugt ein Inhaltsverzeichnis auf der Grundlage der Überschriften einer Seite. Kann mit Bootstrap oder jQueryUI gestaltet werden.
Preisklasse: ● kostenlos (Open Source)
http://gregfranko.com/jquery.tocify.js/
Tocbot
Erzeugt ein Inhaltsverzeichnis auf der Grundlage der Überschriftenstruktur eines HTML-Dokuments. Keine Abhängigkeiten von anderen Bibliotheken, wie z. B. jQuery.
Preisklasse: ● kostenlos (Open Source)
https://tscanlin.github.io/tocbot/
pagemap
Fügt ein kleines Sticky-Bild einer Webseite in der oberen rechten Ecke als Navigationshilfe ein.
Preisklasse: ● kostenlos (Open Source)
Lösungen für eine Sticky-Scroll-Spy-Navigation auf einer Web-Seite
https://www.bram.us/2020/01/10/smooth-scrolling-sticky-scrollspy-navigation/
https://lab.hakim.se/progress-nav/
mmenu
Preisklasse: ● niedrig
Responsive sidebar navigation
Preisklasse: ● kostenlos (Freeware)
https://codyhouse.co/gem/responsive-sidebar-navigation/
Pushy
Preisklasse: ● kostenlos (Open Source)
FlexNav
Preisklasse: ● kostenlos (Open Source)
https://github.com/mrjasonweaver/flexnav
Sidr
Preisklasse: ● kostenlos (Open Source)
https://github.com/artberri/sidr
SmartMenus
Preisklasse: ● kostenlos (Open Source)
Fixed Nav
Responsives, festes und touch-freundliches Menü sowie animierter Bildlauf für Single-Page-Websites.
Preisklasse: ● kostenlos (Open Source)
https://github.com/adtile/fixed-nav
Anchorific
Erzeugt automatisch ein synchronisiertes Menü für einseitige Websites.
Preisklasse: ● kostenlos (Open Source)
https://github.com/renettarenula/anchorific.js
okayNav
Einfaches Menü, das eine „Mehr“-Schaltfläche anzeigt, wenn nicht genügend Platz für alle Einträge vorhanden ist.
Preisklasse: ● kostenlos (Open Source)
https://github.com/VPenkov/okayNav
Toolbar.js
jQuery-Plugin, das Tooltip-artig eingeblendete Symbolleisten erstellt.
Preisklasse: ● kostenlos (Open Source)
https://paulkinzett.github.io/toolbar/
Syntax-Highlighting für Quellcode-Beispiele
Prism
Preisklasse: ● kostenlos (Open Source)
highlight.js
Preisklasse: ● kostenlos (Open Source)
SyntaxHighlighter
Preisklasse: ● kostenlos (Open Source)
https://github.com/syntaxhighlighter
code-prettify
Preisklasse: ● kostenlos (Open Source)
https://github.com/googlearchive/code-prettify
Diverse spezielle Anwendungen
Responsive elements
Ermöglicht die Anpassung jedes Elements an die Größe der Fläche, die es einnimmt.
Preisklasse: ● kostenlos (Open Source)
https://github.com/kumailht/responsive-elements
keyscss
Stylesheet für die Darstellung von Tasten. Hervorragend geeignet, um z. B. Tastenkombinationen zu dokumentieren.
Preisklasse: ● kostenlos (Open Source)
https://github.com/michaelhue/keyscss
Rough Notation
Erstellt animierte handgezeichnete Anmerkungen auf Webseiten, wie Unterstreichungen, Kästen, Hervorhebungen usw.
Preisklasse: ● kostenlos (Open Source)
https://github.com/rough-stuff/rough-notation
8 Horizontal Rules and Dividers Enhanced with CSS
Artikel mit Codebeispielen für gestaltete horizontale Linien.
Preisklasse: ● kostenlos (Artikel + Code)
https://speckyboy.com/horizontal-rules-dividers-css/
validate.js
Schlanke Bibliothek zur Formularvalidierung.
Preisklasse: ● kostenlos (Open Source)
https://rickharrison.github.io/validate.js/
Hovercard
jQuery-Plugin, mit dem Sie Informationen in schwebenden Popup-Fenstern anzeigen können.
Preisklasse: ● keine Preise veröffentlicht
https://designwithpc.com/Plugins/Hovercard
WeasyPrint
Erzeugt PDF aus HTML. Kann mit CSS formatiert werden.
Preisklasse: ● kostenlos (Open Source)
Articulate.js
jQuery-Plugin, das Abschnitte einer Webseite unter Verwendung der Web Speech API vorliest.
Preisklasse: ● kostenlos (Open Source)
https://github.com/acoti/articulate.js
share-this
Wenn ein Benutzer einen Text auf einer Seite auswählt, erscheint ein Popup-Fenster. Der Benutzer kann dann den ausgewählten Text per E-Mail oder über soziale Netzwerke weitergeben oder eine Notiz zu dem ausgewählten Text erstellen.
Preisklasse: ● kostenlos (Open Source)
https://github.com/MaxArt2501/share-this
10 Unique Animated Underline Text Effects with CSS
Diverse Codeschnipsel.
Preisklasse: ● kostenlos (Artikel + Code)
https://speckyboy.com/underline-text-effects-css/
Styling Links with Real Underlines
Codeschnipsel für die anspruchsvolle Gestaltung von Links.
Preisklasse: ● kostenlos (Artikel + Code)
https://css-tricks.com/styling-links-with-real-underlines/
HTML Lists with Style
Verschiedene Codeschnipsel für anspruchsvolle Listenstile.
Preisklasse: ● kostenlos (Artikel + Code)
https://speckyboy.com/html-lists-style/
CSS Line Hover Styles for Links
Sammlung dezenter, ausschließlich mit CSS erstellten Hover-Animationen für Links.
Preisklasse: ● kostenlos (Artikel + Code)
https://tympanus.net/codrops/2021/02/10/simple-css-line-hover-animations-for-links/
darkmode.js
Ergänzt eine Option zum Umschalten zwischen einem dunklen Modus (Nachtmodus) und dem normalen Modus einer HTML-Seite.
Preisklasse: ● kostenlos (Open Source)
clipboard.js
Kopiert den Text eines bestimmten HTML-Elements in die Zwischenablage. Kann z. B. verwendet werden, um das Kopieren von dokumentierten Codebeispielen zu erleichtern.
Preisklasse: ● kostenlos (Open Source)
https://github.com/zenorocha/clipboard.js
Fluid Typography
Kleines Tool, das Ihnen hilft, CSS-Code zu erstellen, um Text an die aktuelle Fenstergröße anzupassen.
Preisklasse: ● kostenlos (Webanwendung)
https://fluid-typography.netlify.app
Haben Sie von diesem Guide profitiert?
Vielleicht unterstützten Sie im Gegenzug dessen weitere Pflege und erwerben die PDF-Version (ca. 150 Seiten, €9,90) oder eines meiner Bücher?
Danke!
Diese Seite wurde zuletzt aktualisiert: 06/2023
Möchten Sie von wichtigen Updates erfahren? Folgen Sie mir auf LinkedIn.
Lust auf mehr? Siehe weitere Tools und Webseiten zum Thema Technische Dokumentation.
Rechtliche Hinweise:
Diese Seite enthält möglicherweise bezahlte, als solche gekennzeichnete Werbeanzeigen. Die verlinkten Webseiten und deren Herausgeber stehen ansonsten in keiner geschäftlichen Beziehung zu indoition Ingenieurbüro für Technische Kommunikation Marc Achtelig und geben nicht dessen Meinung wieder. Copyright verlinkter Inhalte bei deren jeweiligen Rechteinhabern. Beachten Sie die auf den verlinkten Seiten angegebenen Lizenzbedingungen! Mögliche Angaben zu Preisen und Lizenzen auf dieser Seite dienen lediglich der Vorabinformationen und sind ohne Gewähr.