extend your web app

Usage no npm install needed!

<script type="module">
  import websiteUtilities from '';


Project status

npm version downloads build status code coverage dependencies development dependencies peer dependencies documentation-website

Use cases

  • Predefined scroll events
  • Client side internationalization support
  • Viewport is on top position detection
  • Triggering media-query change events
  • Handling page load animation
  • Section switching transitions
  • Simple section detection via url hashes
  • Handle google tracking.




Classical dom injection

You can simply download the compiled version as zip file here and inject it after needed dependencies:


<script src=""></script>
<script src=""></script>
<script src=""></script>
<script src=""></script>
<script src=""></script>
<!--Inject downloaded file:-->
<script src="index.compiled.js"></script>
<!--Or integrate via cdn:
<script src=""></script>

The compiled bundle supports AMD, commonjs, commonjs2 and variable injection into given context (UMD) as export format: You can use a module bundler if you want.

Package managed and module bundled

If you are using npm as package manager you can simply add this tool to your package.json as dependency:


"dependencies": {
    "website-utilities": "latest",

After updating your packages you can simply depend on this script and let a module bundler do the hard stuff or access it via an exported variable name in given context.


$ = require('website-utilities')
$.Website().isEquivalentDom('<div>', '<script>') // false

import Website from 'website-utilities'
class SpecialWebsite extends Website...
// or
import {$} from 'website-utilities'
$.Website().isEquivalentDom('<div>', '<script>') // false
class SpecialWebsite extends $.Website.class ...
// or
Website = require('website-utilities').default
value instanceof Website
// or
$ = require('website-utilities').$


Here you can see the initialisation with all available plugin options:


<script src=""></script>
<script src=""></script>
<script src=""></script>
    $(($) => $.Website({
        activateLanguageSupport: true,
        additionalPageLoadingTimeInMilliseconds: 0,
        domain: 'auto',
        domNode: {
            mediaQueryIndicator: '<div class="media-query-indicator">',
            top: '> div.navbar-wrapper',
            scrollToTopButton: 'a[href="#top"]',
            windowLoadingCover: '',
            windowLoadingSpinner: ' > div'
        domNodeSelectorPrefix: 'body.{1}',
            'scroll mousedown wheel DOMMouseScroll mousewheel keyup ' +
        language: {},
        mediaQueryClassNameIndicator: [
            ['extraSmall', 'xs'], ['small', 'sm'], ['medium', 'md'],
            ['large', 'lg']
        onViewportMovesToTop: $.noop(),
        onViewportMovesAwayFromTop: $.noop(),
        onChangeToLargeMode: $.noop(),
        onChangeToMediumMode: $.noop(),
        onChangeToSmallMode: $.noop(),
        onChangeToExtraSmallMode: $.noop(),
        onChangeMediaQueryMode: $.noop(),
        onSwitchSection: $.noop(),
        onStartUpAnimationComplete: $.noop(),
        startUpAnimationElementDelayInMiliseconds: 100,
        startUpShowAnimation: [{opacity: 1}, {}],
        startUpHide: {opacity: 0},
        switchToManualScrollingIndicator: (event:Object):boolean => (
            event.which > 0 || event.type === 'mousedown' ||
            event.type === 'mousewheel' || event.type === 'touchmove'),
        scrollToTop: {
            inLinearTime: true,
            options: {duration: 'normal'},
            button: {
                slideDistanceInPixel: 30,
                showAnimation: {duration: 'normal'},
                hideAnimation: {duration: 'normal'}
        trackingCode: null,
        windowLoadingCoverHideAnimation: [{opacity: 0}, {}],
        windowLoadingSpinner: {
            lines: 9, // The number of lines to draw
            length: 23, // The length of each line
            width: 11, // The line thickness
            radius: 40, // The radius of the inner circle
            corners: 1, // Corner roundness (0..1)
            rotate: 75, // The rotation offset
            color: '#000', // #rgb or #rrggbb
            speed: 1.1, // Rounds per second
            trail: 58, // Afterglow percentage
            shadow: false, // Whether to render a shadow
            hwaccel: false, // Whether to use hardware acceleration
            className: 'spinner', // CSS class to assign to the spinner
            zIndex: 2e9, // The z-index (defaults to 2000000000)
            top: 'auto', // Top position relative to parent in px
            left: 'auto' // Left position relative to parent in px
        windowLoadedTimeoutAfterDocumentLoadedInMilliseconds: 3000