You can set up Custom Notifications for your Website to get the attention of your Visitors. A Sample Code to trigger a Notification:
<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>
Setting | Description |
---|---|
|
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: |
|
Defines the Type/Color of the Notification Message. Definable Options are as follows Option(s): info, error, success, warning Ex: |
|
Timeout in milliseconds for the Notification Ex: |
|
Sets the Content of the Notification Message in HTML. Ex: |
|
Shows a Close Button in the Notification Box. Option(s): true or false Ex: |
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: December 13, 2020