Notifications

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

Code Example

<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: Option(s): top-right, top-left, bottom-right, bottom-left, top-full-width, bottom-full-width Ex: `data-notify-position="top-right"`
`data-notify-type`	Defines the Type/Color of the Notification Message. Definable Options are as follows Option(s): info, error, success, warning Ex: `data-notify-type="info"`
`data-notify-msg`	Sets the Content of the Notification Message in HTML. Ex: `data-notify-msg="<i class=icon-info-sign></i> Welcome to Canvas Demo!"`
`data-notify-close`	Shows a Close Button in the Notification Box. Option(s): true or false Ex: `data-notify-close="true"`

Custom Notification

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.widget.notifications(); Function only accepts jQuery 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">
	jQuery(window).load( function(){
		SEMICOLON.widget.notifications( jQuery('#custom-notification-message') );
	});
</script>

Last Modified: February 7, 2020