Notifications

The template includes a complete and powerful notification functionality, with several options to customize the look and feel, and the ability to use browser's desktop notifications when available. Try the notification builder below or use the options reference to use it:

Notification builder

Methods

notify(title, message, options, rotate)

Display a notification. If the page is not yet ready, delay the notification until it is ready.

Parameters

@var string title the title - can be omitted
@var string message a text or html message to display
@var object options an object with any options for the message - optional (see defaults for more details)
@var boolean rotate force deletion of older element before inserting new one - optional (internal mostly, but can be used if relevant)

Return

@return void

notify.hasNotificationAPI()

Check if the Notification API is available

Return

@return boolean true if available, else false

notify.isNotificationPermissionSet()

Check if the Notification API permission is set

Return

@return boolean true if available, else false

notify.hasNotificationPermission()

Check if the Notification API permission is granted

Return

@return boolean true if available, else false

notify.showNotificationPermission(target, callback)

Display a message asking the user to grant permission to use the notification API
Note: require the developr.message lib is required if target is not defined

Parameters

@param jQuery|string target the element which will be clicked to trigger the notification, or a string for a message that will be created on top of #main
@param function callback a function to be called when the permission is set, granted or not (optional)

Return

@return void

Options reference

system

Use system notification if available, else fallback on standard notifications
Type: boolean
Default: false

vPos

Vertical position ('top' or 'bottom')
Type: string
Default: 'top'

hPos

Horizontal position ('left', 'center' or 'right')
Note: ignored in mobile screens (the notification takes the full screen width)
Type: string
Default: 'right' ('left' for RTL)

classes

Extra classes (colors...)
Type: array
Default: []

link

Link on the notification
Type: string
Default: ''

title

Title on hover
Type: string
Default: ''

icon

Icon path
Type: string
Default: ''

iconOutside

Icon should show out of the notification block? (ignored for mobile layouts)
Type: boolean
Default: true

closeButton

Add a close button to the notification
Type: boolean
Default: true

showCloseOnHover

Show the close button only on hover
Type: boolean
Default: true

autoClose

Notice will close after (closeDelay) ms
Type: boolean
Default: true

closeDelay

Delay before notification closes
Type: int
Default: 8000

delay

Delay before showing the notification
Type: int
Default: 0

groupSimilar

Group similar notifications in a stack
Type: boolean
Default: true

stickGrouped

Prevent autoClose on grouped notifications
Type: boolean
Default: false

textOneSimilar

Text when one similar notification is found
Type: boolean
Default: 'One similar notification'

textSeveralSimilars

Text when several similar notifications are found
Note: use %d in your string to get the final count
Type: boolean
Default: '%d similar notifications'

limit

Maximum number of notifications displayed at the same time in one stack
Note: use 0 for no limit, but use with caution!
Type: int
Default: 7

rotate

Force rotation (remove older messages) when reaching limit
Type: boolean
Default: false

textOneMore

Text when one similar notification is found
Type: boolean
Default: 'One more notification'

textSeveralMore

Text when several similar notifications are found
Note: use %d in your string to get the final count
Type: boolean
Default: '%d more notifications'

releaseLimit

Number of notifications released when clicking on an similiar/archive block
Note: use 0 for no limit, but use with caution!
Type: int
Default: 5

top

Options for top notifications
Type: object
Default: {}

bottom

Options for bottom notifications
Type: object
Default: {}

left

Options for left notifications
Type: object
Default: {}

center

Options for center notifications
Type: object
Default: {}

right

Options for right notifications
Type: object
Default: {}

topleft

Options for top left notifications
Type: object
Default: {}

topcenter

Options for top center notifications
Type: object
Default: {}

topright

Options for top right notifications
Type: object
Default: {}

bottomleft

Options for bottom left notifications
Type: object
Default: {}

bottomcenter

Options for bottom center notifications
Type: object
Default: {}

bottomright

Options for bottom right notifications
Type: object
Default: {}

onDisplay

Callback when the notification is shown
Type: function
Default: null

onClick

Callback when the notification is clicked
Type: function
Default: null

onClose

Callback when the notification is closed
Type: function
Default: null

onError

Callback (if using the Notification API system only) if the notification triggers an error.
By default, the lib will fallback on a standard notification, the callback may return false to prevent this.
Type: function
Default: null