Notifications

You can set up Custom Notifications for your Website to get the attention of your Visitors. A Sample Code to trigger a Notification:

Usage

<a href="#" class="btn btn-info" data-notify-type="info" data-notify-msg="<i class=icon-info-sign></i> Welcome to Canvas Demo!" onclick="SEMICOLON.widget.notifications(this); return false;">Show Info</a>

Settings

Setting	Description
`data-notify-position`	Defines the Position of the Notification Message. Definable Options are as follows: Example: `top-right`
`data-notify-type`	Defines the Type/Color of the Notification Message. Definable Options are as follows Example: `info`
`data-notify-timeout`	Timeout in milliseconds for the Notification Example: `5000`
`data-notify-msg`	Sets the Content of the Notification Message in HTML. Example: `data-notify-msg="<i class=icon-info-sign> Welcome to Canvas Demo!"`
`data-notify-close`	Shows a Close Button in the Notification Box. Example: `true`

Extras

You can also Trigger a Custom Notification on a User Defined Action such as Form Submission or Window Load. Here is a Sample Code to achieve this:

Note: Remember, SEMICOLON.Modules.notifications(); Function accepts JS Selector to get executed properly. So you can turn any HTML Element with a Unique ID to a Notification Element using the Settings mentioned above and call the Notification Function on its HTML ID Selector.

<div id="custom-notification-message" data-notify-position="top-right" data-notify-type="info" data-notify-msg='<i class="icon-info-sign"></i> Welcome to Canvas Demo!'></div>

<script type="text/javascript">
	window.addEventListener( 'load', function(){
		SEMICOLON.Modules.notifications(document.querySelector('#custom-notification-message'));
	});
</script>