Notifications

x

This notice will self-destruct in 3 seconds.

Overview

Notifications are the natural extension of the notice classes. They should be used to inform the user of a changed state or new information. They can be shown by default, appear after a specified period of time, disappear after a given time, be persistent, or be closed manually.

Note Be careful not to overuse notifications. They can be extremely aggrevating to users if they are used too frequently.

Options

Notifications have two options that control when the notification appears and disappears. All options are passed in as an HTML5 data- attribute and none of them are required.

Options
Data AttributeDescription
data-closeTime The number of milliseconds before the notification is closed automatically.
data-openTime The number of milliseconds before the notification is opened automatically. The notification should be given the hidden class to hide it initially.

Usage

Notifications can be closed manually by adding the following code to the notice:

<a href="#" class="close">x</a>

If you want the notification to persist, simply omit the close link.

For the example above that appears after 3 seconds and then disappears 3 seconds later, use the following code:

<div class="warningNotice hidden" data-openTime="3000" data-closeTime="6000">
	<a href="#" class="close">x</a>
	<p>This notice will have appeared after 3 seconds. It will disappear 3 seconds later.</p>
</div>

VM UI Framework is created, owned, maintained by Virtuosi Media, Inc. © 2012-2013.