Skip to Content Skip to Navigation
NY.gov Portal State Agency Listing

New York State Department of Labor User Experience (UX) Guide

username@domain.com | logout

Notifications

Overview

The Notification widget was created to provide a secondary method of display small but relevant information to a user. It is considered secondary as it is not to be used when an action requires a users immediate attention. If information needs to be presented to a user and it must be focused on; consider other alternative such as Modal windows or directing users to another page.

Please note: Notifications only work in browsers Internet Explorer 7+

The notification widget provides two forms of Notifications: Persistent and Automatic Fade-Out. The default settings for a notification is Automatic Fade-Out after 5 seconds. Persistent notifications, as it name implies, will not automatically fade away. In both forms of Notifications, users are provided with a way to close notifications manually .

Implementation

A developer will need some basic knowledge of jQuery to understand how to implement notifications.

The notification function starts with the jQuery function .uxNotice(), called upon the target triggering jQuery object. Refer to the table later in the documentation for the details on the parameters that the function can accept.

Basic Notification

The sample Javascript snippet below will create a basic notification. This example will show when a link with the class of basic-note is clicked.

<script>
	$('.basic-note').click(function(){
		$(this).uxNotice({
			title: "Basic Notification",
			message: "This is the message you want to show. 
						You can close me if you want or I will fade away on my own."
		});
	});
</script>

The above example in action: Basic Notification

Persistent Notification

The sample Javascript snippet below will create a persistent notification. This example will show when a link with the class of persist-note is clicked.

<script>
	$('.persist-note').click(function(){
		$(this).uxNotice({
			title: "Persistent Notification",
			message: "This is the message you want to show. 
						I will stay here; till you close me.",
			type: "persist"
		});
	});
</script>

The above example in action: Persistent Notification

A Persistent Notification will stay on the screen, and will remain within the background "tray" which will not fade away automatically.

Customizing Notification

All aspects of the notification component is controlled via the notification plug-in options. This allows for the most flexibility while ensuring style and functionality consistency. The table below outlines all of the current notification options and the requirements for using the component.

Notification Options
Option Description Requirement
title Sets the message title. Required
message Sets the message body contents Required
type Defines the notification location (free standing/inside of notification tray). Default options are free standing notifications (notifications are not wrapped in a tray like container). Optional
rollUpTimer Defines if notification will automatically fade out or not. To disable auto fade out, set option to false. NOTE: only basic message will fade out by default. Optional
outTimer Length till automatic fade out occurs (default is 5 seconds). Overriding values are in milliseconds (1000 milliseconds = 1 second). Optional
special Defines special pre-made notification items. See Special Notifications for more details. Optional

Special Notifications

Special notifications are those developed by the UX group and are created because they can used across the all applications and websites that use the UX framework. In order to active a speical type of notification add the option of special, follow by any special notification keyword listed below.

Special Notifications
Type Code Description
Google Translate gtranslate Enables Google translation option. This is screen translation done by Google Translate Service and is machine translated.

Do not use this unless you understand that Google Translation is not perfect, and that translation errors will not be an issue with your translation needs.