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-timeout

Timeout in milliseconds for the Notification

Ex: data-notify-timeout="5000"
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).on( 'load', function(){
		SEMICOLON.widget.notifications({ el: jQuery("#custom-notification-message") });
	});
</script>

Last Modified: December 13, 2020

Need Help?