The notifie library is a library written by Kinetic Data to allow for nice, on screen, mobile-friendly warnings, alerts, and confirmations. You can leverage this by calling .notifie(options) on a jQuery element, where options is a Javascript object with settings for the notifications.

Usage

Use the section below to describe how to implement the solution. Code or screenshots should be used here.

Download the library from https://github.com/KineticCommunity/Notifie
Add CSS and JS file to //libraries/jquery.notifie/ (You will have to create the jquery.notifie directory.)
Open head.jspf (Found in //common/interface/fragments/)

Import CSS file at the top of head.jspf with the other CSS files
<link rel="stylesheet" type="text/css" href="<%=bundle.bundlePath()%>libraries/jquery.notifie/jquery.notifie.css" >

Import JS file at the bottom of head.jspf with the other JS files
<script type="text/javascript" src="<%=bundle.bundlePath()%>libraries/jquery.notifie/jquery.notifie.js"></script>

Call .notifie(options) on a jQuery element, where options is a Javascript object with settings for the notifications.

Example:

$('input').notifie({ type: 'alert', severity: 'info', message: 'This is an informative notification.' });

Available Options

(All of these are optional. If you pass it, it will overwrite the default.):

Option Name	Option Type, options	Option Default	Option Description
anchor	String -> jQuery selector	null	Finds the closest element matching this selector to use as anchor of the notifications. Examples: 'div' or 'li.main'
type	String -> 'alert' or 'confirm'	alert	Defines the type of notification to display.
severity	String -> 'danger' or 'warning' or 'info' or 'success'	danger	Defines the style of the notification.
message	String	Error	Text to display inside the notification.
margin	Object -> Available properties: inherit{true\|false\|padding}, margin[#px\|#px #px\|...], margin-top[#px], margin-bottom, margin-left, margin-right	{inherit:true}	Sets the margins of the notification.
onShow	Function	function(){}	Function to call when the notification is shown. Context is the calling element.
onConfirm	Function	function(){}	Function to call when alert is closed or confirm button is pressed in confirmation notification.
onReject	Function	function(){}	Function to call when confirmation notification is closed or reject button is pressed in confirmation notification.
clearExisting	Boolean	true	If true, closes any existing notifications at this level before opening a new one.
exitEvents	String -> Javascript event name(s)	''	Applies only when 1 notification will be opened (ie: calling element or its anchor translates toa single element, not a list of elements). Events that will get added to calling element that will close the notifications. You may pass multiple events by separating them by spaces. Examples: 'click' or 'focus' or 'click focus'
textButtons	Boolean	false	If true, buttons in a confirmation notification will show text instead of icons.
confirmText	String	'OK'	If textButtons is true, this text will display on the confirm button.
rejectText	String	'Cancel'	If textButtons is true, this text will display on the reject button.
duration	Number	100	Amount of milliseconds that the animation of showing/hiding the notification should take. Setting to 0 removes the animation.
expire	Number	null	Applies only if type is alert. Amount of milliseconds that the alert will stay on screen before automatically disappearing.
disable	Boolean	true	If true, the calling element will be disabled when the notification is shown, and enabled when the notification is closed.
toggle	Boolean	false	If true and if notification at the anchor level already exists, this .notifie() call will only close that notification.
exit	Boolean	false	If true, this .notifie() call will only close the notification(s) at the anchor level.
recurseExit	Boolean	false	Applies only if exit is true. If true, closes all notifications at the anchor level and inside all children of the anchor.

Examples

Use the section for an example of the how to use the solution in this section.

Below are a series of examples and the line of javascript that created them. Note all of these notifications appeared above the header (h2) element on the page in question.

infonotif

$("h2").notifie({ type: 'alert', severity: 'info', message: 'This is an informative notification.' }); }

warningnotif

$("h2").notifie({ type: 'alert', severity: 'warning', message: 'This is an warning notification.' }); }

dangernotif

$("h2").notifie({ type: 'alert', severity: 'danger', message: 'This is an danger notification.' }); }

infoconfirm

$("h2").notifie({ type: 'confirm', severity: 'info', message: 'This is an info confirmation with default buttons.' }); }

dangerconfirm

$("h2").notifie({ type: 'confirm', severity: 'danger', message: 'This is an danger confirmation with default text buttons.', textButtons: true }); }