HexagonJS
About
InstallationCore ConceptsChangelog[Migration (1.x -> 2.x)]
Tutorials
Getting StartedPrint Styles
Demos
Component Demo Page
Css Components
BaseButtonBadgeError PagesFormInputsInput GroupLabelLayoutLogoNoticeSpinnerTable
Js Components
Alerts and MessagesAutocomplete PickerAutocompleteButton GroupCardCollapsibleColor PickerCrumbtrailData TableDate PickerDate Time PickerDrag ContainerDrawingDropdownDropdown ButtonExtended TableFile InputFluidForm BuilderInline EditableInline PickerInline SelectMenuMeterModalMore ButtonNotifyNumber PickerPaginatorPickerPivot TablePlotProgress BarSide CollapsibleSidebarSingle SelectSliderStepperSticky Table HeadersTabsTag InputTime PickerTime SliderTitlebarToggle ButtonToggleTooltipTreeVisualization Bar
Utilities
AnimateClick DetectorColor ScaleColorComponentEvent EmitterFast ClickFilterFormatInterpolateListMapMorph SectionMorphsPalettePointer EventsPreferencesRequestResize EventsSearch DomSelectSelectionSetSortTransitionUser Facing TextUtilView
Edit Page
Notify
Display temporary notifications to users.
Examples

HTML

<div class="notify-example" id="example"></div>
<button id="notify" class="hx-btn hx-positive">Notify</button>

JavaScript

var exampleNotificationManager = new hx.NotificationManager('#example')
hx.select('#notify').on('click', function() {
  exampleNotificationManager.notify('Clicked!')
})

CSS

.notify-example {
  position:relative;
  height: 50px;
  width: 500px;
  border:1px solid rgba(150,150,150,0.3);
  margin: 0 auto;
  background: rgba(150,150,150,0.1);
}

HTML

<div>
  <button class="hx-btn hx-info" onclick="hx.notify.info('Info');">Info</button>
  <button class="hx-btn hx-positive" onclick="hx.notify.positive('Positive');">Positive</button>
  <button class="hx-btn hx-warning" onclick="hx.notify.warning('Warning');">Warning</button>
  <button class="hx-btn hx-negative" onclick="hx.notify.negative('Negative');">Negative</button>
  <button class="hx-btn" onclick="hx.notify.loading('Loading');">Loading</button>
  <button class="hx-btn" onclick="hx.notify('Temporary');">Temporary</button>
  <button class="hx-btn" onclick="hx.notify('Permanent', {timeout: undefined});">Permanent</button>
</div>
// show an info notification that will disappear after 5 seconds by default
hx.notify.info('Hello');

// show an info notification that will disappear after 20 seconds
hx.notify.info('Hello for longer', {timeout: 20});

// show a warning notification
hx.notify.warning('Something might be broken');

// show an negative notification
hx.notify.negative('Uh oh. Something went wrong');

// show a loading notification
loadingNotification = hx.notify.loading('Doing something...');

// hide the notification when the loading is complete
onLoadingThingFinished(function() {
  loadingNotification.close();
});
Api
Change Log
Prototypes
Notification
Returned by the notification manager whenever a notification is created. This object provides a method of closing a notification once it is opened.
Methods
closeNotification
Dismisses the notification, and causes it to be removed from the notification list.
Returns
Notification
This Notification
pinNotification
Makes the notification stick around until it is unpinned.
Returns
Notification
This Notification
unpinNotification
Unpins a notification - causing it to disappear shortly after.
Returns
Notification
This Notification
hx.NotificationManager
One of these can be created as a separate object if desired.
The inbuilt notification manager can be accessed through the hx.notify functions, e.g. 
hx.notify('Message')
hx.notify.loading('Loading...')
Constructors
hx.NotificationManagerselectorString / Element
Create a new notification manager inside the given container.
Arguments
selectorString / Element
The selector to append the notification container to.
Default: 'body'
Methods
defaultTimeouttimeoutNumberNumber
A method for getting or setting the default timeout for notifications added to the current notification manager.
Arguments
timeoutNumber
The default time out in seconds. Supplying undefined will revert the default back to its original value (5 seconds)
Returns
Number
The default timeout when the timeout option is not specified.
infomessageString / Selection / HTMLElement / ObjectoptionsObjectNotification
Shows an information notification using the inbuilt notification manager and returns a Notification object. An alias for the inbuilt notification manager's info method.
Arguments
messageString / Selection / HTMLElement / Object
The message to display in the notification.
It can be either a String, Selection or HTMLElement by default. The text or element will be inserted into the notification content. 
// String
hx.notify('Message to display')

// Selection
message = hx.detached('div').text('Text to display')
hx.notify(message)

// HTMLElement
message = document.createElement('div')
message.appendChild(document.createTextNode('Text To Display'))
hx.notify(message)
When using an Object as the message, a renderer must be provided in the options. 
var options = {
  renderer: function (element, message) {
    hx.select(element)
      .add(hx.detached('div').text(message.header))
      .add(hx.detached('div').text(message.body))
  }
}

var message = {
  header: 'Notification Header',
  body: 'Notification Body'
}

hx.notify(message, options)
options
The options to use when setting up the notification.
The default value for the options object is: 
{
  icon: 'fa fa-info',
  cssclass: 'hx-info',
  pinnable: true
}
Properties
cssclassString
The css class or classes to give the notification.
iconString
The icon to display in the notification (expects a font awesome fa- icon).
pinnableBoolean
Whether or not the pin icon should be shown to allow the user to pin/unpin the notification.
rendererelementHTMLElementmessageString / Object
The renderer to use when creating the notification.
It is not required when using a String, HTMLElement or Selection and is undefined by default.
It must be provided when passing in a message Object otherwise the notification will fail to render.
Arguments
elementHTMLElement
The notification content element to populate.
messageString / Object
The message passed into the notification.
timeoutNumber
How long (in seconds) the notification should hang around for before it dismisses itself.
If passed in as undefined, the notification will not close automatically and will be shown as 'pinned' if the notification is pinnable.
If not provided, this will use the timeout as provided by `hx.notify.defaultTimeout()`
Returns
Notification
The newly created Notification
loadingmessageString / Selection / HTMLElement / ObjectNotification
Shows a loading notification using the inbuilt notification manager and returns a Notification object. An alias for the inbuilt notification manager's loading method.
Arguments
messageString / Selection / HTMLElement / Object
The message to display in the notification.
It can be either a String, Selection or HTMLElement by default. The text or element will be inserted into the notification content. 
// String
hx.notify('Message to display')

// Selection
message = hx.detached('div').text('Text to display')
hx.notify(message)

// HTMLElement
message = document.createElement('div')
message.appendChild(document.createTextNode('Text To Display'))
hx.notify(message)
When using an Object as the message, a renderer must be provided in the options. 
var options = {
  renderer: function (element, message) {
    hx.select(element)
      .add(hx.detached('div').text(message.header))
      .add(hx.detached('div').text(message.body))
  }
}

var message = {
  header: 'Notification Header',
  body: 'Notification Body'
}

hx.notify(message, options)
Returns
Notification
The newly created Notification
negativemessageString / Selection / HTMLElement / ObjectoptionsObjectNotification
Shows a negative notification using the inbuilt notification manager and returns a Notification object. An alias for the inbuilt notification manager's negative method.
Arguments
messageString / Selection / HTMLElement / Object
The message to display in the notification.
It can be either a String, Selection or HTMLElement by default. The text or element will be inserted into the notification content. 
// String
hx.notify('Message to display')

// Selection
message = hx.detached('div').text('Text to display')
hx.notify(message)

// HTMLElement
message = document.createElement('div')
message.appendChild(document.createTextNode('Text To Display'))
hx.notify(message)
When using an Object as the message, a renderer must be provided in the options. 
var options = {
  renderer: function (element, message) {
    hx.select(element)
      .add(hx.detached('div').text(message.header))
      .add(hx.detached('div').text(message.body))
  }
}

var message = {
  header: 'Notification Header',
  body: 'Notification Body'
}

hx.notify(message, options)
options
The options to use when setting up the notification.
The default value for the options object is: 
{
  icon: 'fa fa-error',
  cssclass: 'hx-negative',
  pinnable: true
}
Properties
cssclassString
The css class or classes to give the notification.
iconString
The icon to display in the notification (expects a font awesome fa- icon).
pinnableBoolean
Whether or not the pin icon should be shown to allow the user to pin/unpin the notification.
rendererelementHTMLElementmessageString / Object
The renderer to use when creating the notification.
It is not required when using a String, HTMLElement or Selection and is undefined by default.
It must be provided when passing in a message Object otherwise the notification will fail to render.
Arguments
elementHTMLElement
The notification content element to populate.
messageString / Object
The message passed into the notification.
timeoutNumber
How long (in seconds) the notification should hang around for before it dismisses itself.
If passed in as undefined, the notification will not close automatically and will be shown as 'pinned' if the notification is pinnable.
If not provided, this will use the timeout as provided by `hx.notify.defaultTimeout()`
Returns
Notification
The newly created Notification
notifymessageString / Selection / HTMLElement / ObjectoptionsObjectNotification
Shows a notification using the inbuilt notification manager and returns a Notification object. An alias for the inbuilt notification manager's notify method.
Arguments
messageString / Selection / HTMLElement / Object
The message to display in the notification.
It can be either a String, Selection or HTMLElement by default. The text or element will be inserted into the notification content. 
// String
hx.notify('Message to display')

// Selection
message = hx.detached('div').text('Text to display')
hx.notify(message)

// HTMLElement
message = document.createElement('div')
message.appendChild(document.createTextNode('Text To Display'))
hx.notify(message)
When using an Object as the message, a renderer must be provided in the options. 
var options = {
  renderer: function (element, message) {
    hx.select(element)
      .add(hx.detached('div').text(message.header))
      .add(hx.detached('div').text(message.body))
  }
}

var message = {
  header: 'Notification Header',
  body: 'Notification Body'
}

hx.notify(message, options)
options
The options to use when setting up the notification.
Properties
cssclassString
The css class or classes to give the notification.
iconString
The icon to display in the notification (expects a font awesome fa- icon).
pinnableBoolean
Whether or not the pin icon should be shown to allow the user to pin/unpin the notification.
rendererelementHTMLElementmessageString / Object
The renderer to use when creating the notification.
It is not required when using a String, HTMLElement or Selection and is undefined by default.
It must be provided when passing in a message Object otherwise the notification will fail to render.
Arguments
elementHTMLElement
The notification content element to populate.
messageString / Object
The message passed into the notification.
timeoutNumber
How long (in seconds) the notification should hang around for before it dismisses itself.
If passed in as undefined, the notification will not close automatically and will be shown as 'pinned' if the notification is pinnable.
If not provided, this will use the timeout as provided by `hx.notify.defaultTimeout()`
Returns
Notification
The newly created Notification
positivemessageString / Selection / HTMLElement / ObjectoptionsObjectNotification
Shows a positive notification using the inbuilt notification manager and returns a Notification object. An alias for the inbuilt notification manager's positive method.
Arguments
messageString / Selection / HTMLElement / Object
The message to display in the notification.
It can be either a String, Selection or HTMLElement by default. The text or element will be inserted into the notification content. 
// String
hx.notify('Message to display')

// Selection
message = hx.detached('div').text('Text to display')
hx.notify(message)

// HTMLElement
message = document.createElement('div')
message.appendChild(document.createTextNode('Text To Display'))
hx.notify(message)
When using an Object as the message, a renderer must be provided in the options. 
var options = {
  renderer: function (element, message) {
    hx.select(element)
      .add(hx.detached('div').text(message.header))
      .add(hx.detached('div').text(message.body))
  }
}

var message = {
  header: 'Notification Header',
  body: 'Notification Body'
}

hx.notify(message, options)
options
The options to use when setting up the notification.
The default value for the options object is: 
{
  icon: 'fa fa-check',
  cssclass: 'hx-positive',
  pinnable: true
}
Properties
cssclassString
The css class or classes to give the notification.
iconString
The icon to display in the notification (expects a font awesome fa- icon).
pinnableBoolean
Whether or not the pin icon should be shown to allow the user to pin/unpin the notification.
rendererelementHTMLElementmessageString / Object
The renderer to use when creating the notification.
It is not required when using a String, HTMLElement or Selection and is undefined by default.
It must be provided when passing in a message Object otherwise the notification will fail to render.
Arguments
elementHTMLElement
The notification content element to populate.
messageString / Object
The message passed into the notification.
timeoutNumber
How long (in seconds) the notification should hang around for before it dismisses itself.
If passed in as undefined, the notification will not close automatically and will be shown as 'pinned' if the notification is pinnable.
If not provided, this will use the timeout as provided by `hx.notify.defaultTimeout()`
Returns
Notification
The newly created Notification
warningmessageString / Selection / HTMLElement / ObjectoptionsObjectNotification
Shows a warning notification using the inbuilt notification manager and returns a Notification object. An alias for the inbuilt notification manager's warning method.
Arguments
messageString / Selection / HTMLElement / Object
The message to display in the notification.
It can be either a String, Selection or HTMLElement by default. The text or element will be inserted into the notification content. 
// String
hx.notify('Message to display')

// Selection
message = hx.detached('div').text('Text to display')
hx.notify(message)

// HTMLElement
message = document.createElement('div')
message.appendChild(document.createTextNode('Text To Display'))
hx.notify(message)
When using an Object as the message, a renderer must be provided in the options. 
var options = {
  renderer: function (element, message) {
    hx.select(element)
      .add(hx.detached('div').text(message.header))
      .add(hx.detached('div').text(message.body))
  }
}

var message = {
  header: 'Notification Header',
  body: 'Notification Body'
}

hx.notify(message, options)
options
The options to use when setting up the notification.
The default value for the options object is: 
{
  icon: 'fa fa-warning',
  cssclass: 'hx-warning',
  pinnable: true
}
Properties
cssclassString
The css class or classes to give the notification.
iconString
The icon to display in the notification (expects a font awesome fa- icon).
pinnableBoolean
Whether or not the pin icon should be shown to allow the user to pin/unpin the notification.
rendererelementHTMLElementmessageString / Object
The renderer to use when creating the notification.
It is not required when using a String, HTMLElement or Selection and is undefined by default.
It must be provided when passing in a message Object otherwise the notification will fail to render.
Arguments
elementHTMLElement
The notification content element to populate.
messageString / Object
The message passed into the notification.
timeoutNumber
How long (in seconds) the notification should hang around for before it dismisses itself.
If passed in as undefined, the notification will not close automatically and will be shown as 'pinned' if the notification is pinnable.
If not provided, this will use the timeout as provided by `hx.notify.defaultTimeout()`
Returns
Notification
The newly created Notification
Functions
hx.notify.defaultTimeouttimeoutNumberNumberdeprecated
Deprecated
Replaced by hx.notifyDefaultTimeout
A function for getting or setting the default time out for notifications.
Arguments
timeoutNumber
The default time out in seconds. Supplying undefined will revert the default back to its original value (5 seconds)
Returns
Number
The default timeout when the timeout parameter is not specified.
hx.notify.infomessageString / Selection / HTMLElement / ObjectoptionsObjectNotificationdeprecated
Deprecated
Replaced by hx.notifyInfo
Shows an information notification using the inbuilt notification manager and returns a Notification object. An alias for the inbuilt notification manager's info method.
Arguments
messageString / Selection / HTMLElement / Object
The message to display in the notification.
It can be either a String, Selection or HTMLElement by default. The text or element will be inserted into the notification content. 
// String
hx.notify('Message to display')

// Selection
message = hx.detached('div').text('Text to display')
hx.notify(message)

// HTMLElement
message = document.createElement('div')
message.appendChild(document.createTextNode('Text To Display'))
hx.notify(message)
When using an Object as the message, a renderer must be provided in the options. 
var options = {
  renderer: function (element, message) {
    hx.select(element)
      .add(hx.detached('div').text(message.header))
      .add(hx.detached('div').text(message.body))
  }
}

var message = {
  header: 'Notification Header',
  body: 'Notification Body'
}

hx.notify(message, options)
options
The options to use when setting up the notification.
The default value for the options object is: 
{
  icon: 'fa fa-info',
  cssclass: 'hx-info',
  pinnable: true
}
Properties
cssclassString
The css class or classes to give the notification.
iconString
The icon to display in the notification (expects a font awesome fa- icon).
pinnableBoolean
Whether or not the pin icon should be shown to allow the user to pin/unpin the notification.
rendererelementHTMLElementmessageString / Object
The renderer to use when creating the notification.
It is not required when using a String, HTMLElement or Selection and is undefined by default.
It must be provided when passing in a message Object otherwise the notification will fail to render.
Arguments
elementHTMLElement
The notification content element to populate.
messageString / Object
The message passed into the notification.
timeoutNumber
How long (in seconds) the notification should hang around for before it dismisses itself.
If passed in as undefined, the notification will not close automatically and will be shown as 'pinned' if the notification is pinnable.
If not provided, this will use the timeout as provided by `hx.notify.defaultTimeout()`
Returns
Notification
The newly created Notification
hx.notify.loadingmessageString / Selection / HTMLElement / ObjectNotificationdeprecated
Deprecated
Replaced by hx.notifyLoading
Shows a loading notification using the inbuilt notification manager and returns a Notification object. An alias for the inbuilt notification manager's loading method.
Arguments
messageString / Selection / HTMLElement / Object
The message to display in the notification.
It can be either a String, Selection or HTMLElement by default. The text or element will be inserted into the notification content. 
// String
hx.notify('Message to display')

// Selection
message = hx.detached('div').text('Text to display')
hx.notify(message)

// HTMLElement
message = document.createElement('div')
message.appendChild(document.createTextNode('Text To Display'))
hx.notify(message)
When using an Object as the message, a renderer must be provided in the options. 
var options = {
  renderer: function (element, message) {
    hx.select(element)
      .add(hx.detached('div').text(message.header))
      .add(hx.detached('div').text(message.body))
  }
}

var message = {
  header: 'Notification Header',
  body: 'Notification Body'
}

hx.notify(message, options)
Returns
Notification
The newly created Notification
hx.notify.negativemessageString / Selection / HTMLElement / ObjectoptionsObjectNotificationdeprecated
Deprecated
Replaced by hx.notifyNegative
Shows a negative notification using the inbuilt notification manager and returns a Notification object. An alias for the inbuilt notification manager's negative method.
Arguments
messageString / Selection / HTMLElement / Object
The message to display in the notification.
It can be either a String, Selection or HTMLElement by default. The text or element will be inserted into the notification content. 
// String
hx.notify('Message to display')

// Selection
message = hx.detached('div').text('Text to display')
hx.notify(message)

// HTMLElement
message = document.createElement('div')
message.appendChild(document.createTextNode('Text To Display'))
hx.notify(message)
When using an Object as the message, a renderer must be provided in the options. 
var options = {
  renderer: function (element, message) {
    hx.select(element)
      .add(hx.detached('div').text(message.header))
      .add(hx.detached('div').text(message.body))
  }
}

var message = {
  header: 'Notification Header',
  body: 'Notification Body'
}

hx.notify(message, options)
options
The options to use when setting up the notification.
The default value for the options object is: 
{
  icon: 'fa fa-error',
  cssclass: 'hx-negative',
  pinnable: true
}
Properties
cssclassString
The css class or classes to give the notification.
iconString
The icon to display in the notification (expects a font awesome fa- icon).
pinnableBoolean
Whether or not the pin icon should be shown to allow the user to pin/unpin the notification.
rendererelementHTMLElementmessageString / Object
The renderer to use when creating the notification.
It is not required when using a String, HTMLElement or Selection and is undefined by default.
It must be provided when passing in a message Object otherwise the notification will fail to render.
Arguments
elementHTMLElement
The notification content element to populate.
messageString / Object
The message passed into the notification.
timeoutNumber
How long (in seconds) the notification should hang around for before it dismisses itself.
If passed in as undefined, the notification will not close automatically and will be shown as 'pinned' if the notification is pinnable.
If not provided, this will use the timeout as provided by `hx.notify.defaultTimeout()`
Returns
Notification
The newly created Notification
hx.notify.positivemessageString / Selection / HTMLElement / ObjectoptionsObjectNotificationdeprecated
Deprecated
Replaced by hx.notifyPositive
Shows a positive notification using the inbuilt notification manager and returns a Notification object. An alias for the inbuilt notification manager's positive method.
Arguments
messageString / Selection / HTMLElement / Object
The message to display in the notification.
It can be either a String, Selection or HTMLElement by default. The text or element will be inserted into the notification content. 
// String
hx.notify('Message to display')

// Selection
message = hx.detached('div').text('Text to display')
hx.notify(message)

// HTMLElement
message = document.createElement('div')
message.appendChild(document.createTextNode('Text To Display'))
hx.notify(message)
When using an Object as the message, a renderer must be provided in the options. 
var options = {
  renderer: function (element, message) {
    hx.select(element)
      .add(hx.detached('div').text(message.header))
      .add(hx.detached('div').text(message.body))
  }
}

var message = {
  header: 'Notification Header',
  body: 'Notification Body'
}

hx.notify(message, options)
options
The options to use when setting up the notification.
The default value for the options object is: 
{
  icon: 'fa fa-check',
  cssclass: 'hx-positive',
  pinnable: true
}
Properties
cssclassString
The css class or classes to give the notification.
iconString
The icon to display in the notification (expects a font awesome fa- icon).
pinnableBoolean
Whether or not the pin icon should be shown to allow the user to pin/unpin the notification.
rendererelementHTMLElementmessageString / Object
The renderer to use when creating the notification.
It is not required when using a String, HTMLElement or Selection and is undefined by default.
It must be provided when passing in a message Object otherwise the notification will fail to render.
Arguments
elementHTMLElement
The notification content element to populate.
messageString / Object
The message passed into the notification.
timeoutNumber
How long (in seconds) the notification should hang around for before it dismisses itself.
If passed in as undefined, the notification will not close automatically and will be shown as 'pinned' if the notification is pinnable.
If not provided, this will use the timeout as provided by `hx.notify.defaultTimeout()`
Returns
Notification
The newly created Notification
hx.notify.warningmessageString / Selection / HTMLElement / ObjectoptionsObjectNotificationdeprecated
Deprecated
Replaced by hx.notifyWarning
Shows a warning notification using the inbuilt notification manager and returns a Notification object. An alias for the inbuilt notification manager's warning method.
Arguments
messageString / Selection / HTMLElement / Object
The message to display in the notification.
It can be either a String, Selection or HTMLElement by default. The text or element will be inserted into the notification content. 
// String
hx.notify('Message to display')

// Selection
message = hx.detached('div').text('Text to display')
hx.notify(message)

// HTMLElement
message = document.createElement('div')
message.appendChild(document.createTextNode('Text To Display'))
hx.notify(message)
When using an Object as the message, a renderer must be provided in the options. 
var options = {
  renderer: function (element, message) {
    hx.select(element)
      .add(hx.detached('div').text(message.header))
      .add(hx.detached('div').text(message.body))
  }
}

var message = {
  header: 'Notification Header',
  body: 'Notification Body'
}

hx.notify(message, options)
options
The options to use when setting up the notification.
The default value for the options object is: 
{
  icon: 'fa fa-warning',
  cssclass: 'hx-warning',
  pinnable: true
}
Properties
cssclassString
The css class or classes to give the notification.
iconString
The icon to display in the notification (expects a font awesome fa- icon).
pinnableBoolean
Whether or not the pin icon should be shown to allow the user to pin/unpin the notification.
rendererelementHTMLElementmessageString / Object
The renderer to use when creating the notification.
It is not required when using a String, HTMLElement or Selection and is undefined by default.
It must be provided when passing in a message Object otherwise the notification will fail to render.
Arguments
elementHTMLElement
The notification content element to populate.
messageString / Object
The message passed into the notification.
timeoutNumber
How long (in seconds) the notification should hang around for before it dismisses itself.
If passed in as undefined, the notification will not close automatically and will be shown as 'pinned' if the notification is pinnable.
If not provided, this will use the timeout as provided by `hx.notify.defaultTimeout()`
Returns
Notification
The newly created Notification
hx.notifymessageString / Selection / HTMLElement / ObjectoptionsObjectNotification
Shows a notification using the inbuilt notification manager and returns a Notification object. An alias for the inbuilt notification manager's notify method.
Arguments
messageString / Selection / HTMLElement / Object
The message to display in the notification.
It can be either a String, Selection or HTMLElement by default. The text or element will be inserted into the notification content. 
// String
hx.notify('Message to display')

// Selection
message = hx.detached('div').text('Text to display')
hx.notify(message)

// HTMLElement
message = document.createElement('div')
message.appendChild(document.createTextNode('Text To Display'))
hx.notify(message)
When using an Object as the message, a renderer must be provided in the options. 
var options = {
  renderer: function (element, message) {
    hx.select(element)
      .add(hx.detached('div').text(message.header))
      .add(hx.detached('div').text(message.body))
  }
}

var message = {
  header: 'Notification Header',
  body: 'Notification Body'
}

hx.notify(message, options)
options
The options to use when setting up the notification.
Properties
cssclassString
The css class or classes to give the notification.
iconString
The icon to display in the notification (expects a font awesome fa- icon).
pinnableBoolean
Whether or not the pin icon should be shown to allow the user to pin/unpin the notification.
rendererelementHTMLElementmessageString / Object
The renderer to use when creating the notification.
It is not required when using a String, HTMLElement or Selection and is undefined by default.
It must be provided when passing in a message Object otherwise the notification will fail to render.
Arguments
elementHTMLElement
The notification content element to populate.
messageString / Object
The message passed into the notification.
timeoutNumber
How long (in seconds) the notification should hang around for before it dismisses itself.
If passed in as undefined, the notification will not close automatically and will be shown as 'pinned' if the notification is pinnable.
If not provided, this will use the timeout as provided by `hx.notify.defaultTimeout()`
Returns
Notification
The newly created Notification
hx.notify.defaultTimeouttimeoutNumberNumber
A function for getting or setting the default time out for notifications.
Arguments
timeoutNumber
The default time out in seconds. Supplying undefined will revert the default back to its original value (5 seconds)
Returns
Number
The default timeout when the timeout parameter is not specified.
hx.notifyDefaultTimeouttimeoutNumberNumber
A function for getting or setting the default time out for notifications.
Arguments
timeoutNumber
The default time out in seconds. Supplying undefined will revert the default back to its original value (5 seconds)
Returns
Number
The default timeout when the timeout parameter is not specified.
hx.notifyInfomessageString / Selection / HTMLElement / ObjectoptionsObjectNotification
Shows an information notification using the inbuilt notification manager and returns a Notification object. An alias for the inbuilt notification manager's info method.
Arguments
messageString / Selection / HTMLElement / Object
The message to display in the notification.
It can be either a String, Selection or HTMLElement by default. The text or element will be inserted into the notification content. 
// String
hx.notify('Message to display')

// Selection
message = hx.detached('div').text('Text to display')
hx.notify(message)

// HTMLElement
message = document.createElement('div')
message.appendChild(document.createTextNode('Text To Display'))
hx.notify(message)
When using an Object as the message, a renderer must be provided in the options. 
var options = {
  renderer: function (element, message) {
    hx.select(element)
      .add(hx.detached('div').text(message.header))
      .add(hx.detached('div').text(message.body))
  }
}

var message = {
  header: 'Notification Header',
  body: 'Notification Body'
}

hx.notify(message, options)
options
The options to use when setting up the notification.
The default value for the options object is: 
{
  icon: 'fa fa-info',
  cssclass: 'hx-info',
  pinnable: true
}
Properties
cssclassString
The css class or classes to give the notification.
iconString
The icon to display in the notification (expects a font awesome fa- icon).
pinnableBoolean
Whether or not the pin icon should be shown to allow the user to pin/unpin the notification.
rendererelementHTMLElementmessageString / Object
The renderer to use when creating the notification.
It is not required when using a String, HTMLElement or Selection and is undefined by default.
It must be provided when passing in a message Object otherwise the notification will fail to render.
Arguments
elementHTMLElement
The notification content element to populate.
messageString / Object
The message passed into the notification.
timeoutNumber
How long (in seconds) the notification should hang around for before it dismisses itself.
If passed in as undefined, the notification will not close automatically and will be shown as 'pinned' if the notification is pinnable.
If not provided, this will use the timeout as provided by `hx.notify.defaultTimeout()`
Returns
Notification
The newly created Notification
hx.notifyLoadingmessageString / Selection / HTMLElement / ObjectNotification
Shows a loading notification using the inbuilt notification manager and returns a Notification object. An alias for the inbuilt notification manager's loading method.
Arguments
messageString / Selection / HTMLElement / Object
The message to display in the notification.
It can be either a String, Selection or HTMLElement by default. The text or element will be inserted into the notification content. 
// String
hx.notify('Message to display')

// Selection
message = hx.detached('div').text('Text to display')
hx.notify(message)

// HTMLElement
message = document.createElement('div')
message.appendChild(document.createTextNode('Text To Display'))
hx.notify(message)
When using an Object as the message, a renderer must be provided in the options. 
var options = {
  renderer: function (element, message) {
    hx.select(element)
      .add(hx.detached('div').text(message.header))
      .add(hx.detached('div').text(message.body))
  }
}

var message = {
  header: 'Notification Header',
  body: 'Notification Body'
}

hx.notify(message, options)
Returns
Notification
The newly created Notification
hx.notifyNegativemessageString / Selection / HTMLElement / ObjectoptionsObjectNotification
Shows a negative notification using the inbuilt notification manager and returns a Notification object. An alias for the inbuilt notification manager's negative method.
Arguments
messageString / Selection / HTMLElement / Object
The message to display in the notification.
It can be either a String, Selection or HTMLElement by default. The text or element will be inserted into the notification content. 
// String
hx.notify('Message to display')

// Selection
message = hx.detached('div').text('Text to display')
hx.notify(message)

// HTMLElement
message = document.createElement('div')
message.appendChild(document.createTextNode('Text To Display'))
hx.notify(message)
When using an Object as the message, a renderer must be provided in the options. 
var options = {
  renderer: function (element, message) {
    hx.select(element)
      .add(hx.detached('div').text(message.header))
      .add(hx.detached('div').text(message.body))
  }
}

var message = {
  header: 'Notification Header',
  body: 'Notification Body'
}

hx.notify(message, options)
options
The options to use when setting up the notification.
The default value for the options object is: 
{
  icon: 'fa fa-error',
  cssclass: 'hx-negative',
  pinnable: true
}
Properties
cssclassString
The css class or classes to give the notification.
iconString
The icon to display in the notification (expects a font awesome fa- icon).
pinnableBoolean
Whether or not the pin icon should be shown to allow the user to pin/unpin the notification.
rendererelementHTMLElementmessageString / Object
The renderer to use when creating the notification.
It is not required when using a String, HTMLElement or Selection and is undefined by default.
It must be provided when passing in a message Object otherwise the notification will fail to render.
Arguments
elementHTMLElement
The notification content element to populate.
messageString / Object
The message passed into the notification.
timeoutNumber
How long (in seconds) the notification should hang around for before it dismisses itself.
If passed in as undefined, the notification will not close automatically and will be shown as 'pinned' if the notification is pinnable.
If not provided, this will use the timeout as provided by `hx.notify.defaultTimeout()`
Returns
Notification
The newly created Notification
hx.notifyPositivemessageString / Selection / HTMLElement / ObjectoptionsObjectNotification
Shows a positive notification using the inbuilt notification manager and returns a Notification object. An alias for the inbuilt notification manager's positive method.
Arguments
messageString / Selection / HTMLElement / Object
The message to display in the notification.
It can be either a String, Selection or HTMLElement by default. The text or element will be inserted into the notification content. 
// String
hx.notify('Message to display')

// Selection
message = hx.detached('div').text('Text to display')
hx.notify(message)

// HTMLElement
message = document.createElement('div')
message.appendChild(document.createTextNode('Text To Display'))
hx.notify(message)
When using an Object as the message, a renderer must be provided in the options. 
var options = {
  renderer: function (element, message) {
    hx.select(element)
      .add(hx.detached('div').text(message.header))
      .add(hx.detached('div').text(message.body))
  }
}

var message = {
  header: 'Notification Header',
  body: 'Notification Body'
}

hx.notify(message, options)
options
The options to use when setting up the notification.
The default value for the options object is: 
{
  icon: 'fa fa-check',
  cssclass: 'hx-positive',
  pinnable: true
}
Properties
cssclassString
The css class or classes to give the notification.
iconString
The icon to display in the notification (expects a font awesome fa- icon).
pinnableBoolean
Whether or not the pin icon should be shown to allow the user to pin/unpin the notification.
rendererelementHTMLElementmessageString / Object
The renderer to use when creating the notification.
It is not required when using a String, HTMLElement or Selection and is undefined by default.
It must be provided when passing in a message Object otherwise the notification will fail to render.
Arguments
elementHTMLElement
The notification content element to populate.
messageString / Object
The message passed into the notification.
timeoutNumber
How long (in seconds) the notification should hang around for before it dismisses itself.
If passed in as undefined, the notification will not close automatically and will be shown as 'pinned' if the notification is pinnable.
If not provided, this will use the timeout as provided by `hx.notify.defaultTimeout()`
Returns
Notification
The newly created Notification
hx.notifyWarningmessageString / Selection / HTMLElement / ObjectoptionsObjectNotification
Shows a warning notification using the inbuilt notification manager and returns a Notification object. An alias for the inbuilt notification manager's warning method.
Arguments
messageString / Selection / HTMLElement / Object
The message to display in the notification.
It can be either a String, Selection or HTMLElement by default. The text or element will be inserted into the notification content. 
// String
hx.notify('Message to display')

// Selection
message = hx.detached('div').text('Text to display')
hx.notify(message)

// HTMLElement
message = document.createElement('div')
message.appendChild(document.createTextNode('Text To Display'))
hx.notify(message)
When using an Object as the message, a renderer must be provided in the options. 
var options = {
  renderer: function (element, message) {
    hx.select(element)
      .add(hx.detached('div').text(message.header))
      .add(hx.detached('div').text(message.body))
  }
}

var message = {
  header: 'Notification Header',
  body: 'Notification Body'
}

hx.notify(message, options)
options
The options to use when setting up the notification.
The default value for the options object is: 
{
  icon: 'fa fa-warning',
  cssclass: 'hx-warning',
  pinnable: true
}
Properties
cssclassString
The css class or classes to give the notification.
iconString
The icon to display in the notification (expects a font awesome fa- icon).
pinnableBoolean
Whether or not the pin icon should be shown to allow the user to pin/unpin the notification.
rendererelementHTMLElementmessageString / Object
The renderer to use when creating the notification.
It is not required when using a String, HTMLElement or Selection and is undefined by default.
It must be provided when passing in a message Object otherwise the notification will fail to render.
Arguments
elementHTMLElement
The notification content element to populate.
messageString / Object
The message passed into the notification.
timeoutNumber
How long (in seconds) the notification should hang around for before it dismisses itself.
If passed in as undefined, the notification will not close automatically and will be shown as 'pinned' if the notification is pinnable.
If not provided, this will use the timeout as provided by `hx.notify.defaultTimeout()`
Returns
Notification
The newly created Notification
Classes
hx-notification
The class applied to notifications when they are created. This should not be applied manually, however there are several additional classes that can be added when creating the notifications using the cssclass parameter of the temporary and permanent notification functions.
Extra Classes
hx-info
The class to add to style the notification with the theme's info color.
hx-loading
The class to add to style the notification with the theme's loading color.
hx-negative
The class to add to style the notification with the theme's negative color.
hx-positive
The class to add to style the notification with the theme's positive color.
hx-warning
The class to add to style the notification with the theme's warning color.