If set, specifies the notification container. The value of appendContainer should be a String with the id of the container element preceeded by "#".

Code examples

Set the appendContainer property.

$('#jqxNotification').jqxNotification({ appendContainer: "#container" });

Get the appendContainer property.

var appendContainer = $('#jqxNotification').jqxNotification('appendContainer');

Sets or gets whether the notification will open automatically.

Code examples

Set the autoOpen property.

$('#jqxNotification').jqxNotification({ autoOpen: true }); 

Get the notificationOffset property.

var autoOpen = $('#jqxNotification').jqxNotification('autoOpen');

Sets or gets the duration of the notification animation at open.

Code examples

Set the animationOpenDelay property.

$('#jqxNotification').jqxNotification({ animationOpenDelay: "fast" }); 

Get the animationOpenDelay property.

var animationOpenDelay = $('#jqxNotification').jqxNotification('animationOpenDelay');

Sets or gets the duration of the tooltip animation at close.

Code examples

Set the animationCloseDelay property.

$('#jqxNotification').jqxNotification({ animationCloseDelay: 1000 }); 

Get the animationCloseDelay property.

var animationCloseDelay = $('#jqxNotification').jqxNotification('animationCloseDelay');

Sets or gets whether the notification will automatically close after duration equal to the autoCloseDelay property.

Code examples

Set the autoClose property.

$('#jqxNotification').jqxNotification({ autoClose: false }); 

Get the autoClose property.

var autoClose = $('#jqxNotification').jqxNotification('autoClose');

Sets or gets the duration after which the notification automatically closes (works only if the autoClose property is set to true).

Code examples

Set the autoCloseDelay property.

$('#jqxNotification').jqxNotification({ autoCloseDelay: 1000 }); 

Get the autoCloseDelay property.

var autoCloseDelay = $('#jqxNotification').jqxNotification('autoCloseDelay');

Sets or gets whether the notification blinks when opened.

Code examples

Set the blink property.

$('#jqxNotification').jqxNotification({ blink: true }); 

Get the blink property.

var blink = $('#jqxNotification').jqxNotification('blink');

Sets ot gets the notifications' offset from the window bounds.

Code examples

Set the browserBoundsOffset property.

$('#jqxNotification').jqxNotification({ browserBoundsOffset: 10 }); 

Get the browserBoundsOffset property.

var browserBoundsOffset = $('#jqxNotification').jqxNotification('browserBoundsOffset');

Sets or gets whether the notification will close if it is clicked.

Code examples

Set the closeOnClick property.

$('#jqxNotification').jqxNotification({ closeOnClick: true }); 

Get the closeOnClick property.

var closeOnClick = $('#jqxNotification').jqxNotification('closeOnClick');

Sets or gets whether the notification is disabled (it cannot be opened).

Code examples

Set the disabled property.

$('#jqxNotification').jqxNotification({ disabled: true }); 

Get the disabled property.

var disabled = $('#jqxNotification').jqxNotification('disabled');

Sets ot gets the notification's height.

Code examples

Set the height property.

$("#jqxNotification").jqxNotification({ height: 25 });

Get the height property.

var height = $('#jqxNotification').jqxNotification('height');

Sets or gets the notification's opacity when it is hovered with the mouse.

Code examples

Set the hoverOpacity property.

$('#jqxNotification').jqxNotification({ hoverOpacity: 10 }); 

Get the hoverOpacity property.

var hoverOpacity = $('#jqxNotification').jqxNotification('hoverOpacity');

Sets or gets an object which specifies a custom notification icon. The icon property is disregarded if template is set.

Object fields:

width

height

url

padding - specifies the distance from the icon to the content.

Code examples

Set the icon property.

$('#jqxNotification').jqxNotification({ icon: { width: 25, height: 25, url:
 '../../images/smiley.png', padding: 5} }); 

Get the icon property.

var icon = $('#jqxNotification').jqxNotification('icon');

Sets or gets the offset between notifications.

Code examples

Set the notificationOffset property.

$('#jqxNotification').jqxNotification({ notificationOffset: 10 }); 

Get the notificationOffset property.

var toggled = $('#jqxNotification').jqxNotification('notificationOffset');

Sets or gets the notification's opacity.

Code examples

Set the opacity property.

$('#jqxNotification').jqxNotification({ opacity: 1 }); 

Get the notificationOffset property.

var opacity = $('#jqxNotification').jqxNotification('opacity');

Sets the part of the browser window where the notifications will be positioned. The position property is disregarded if appendContainer is set.

Possible Values:

'top-left'

'top-right'

'bottom-left'

'bottom-right'

Code examples

Set the position property.

$('#jqxNotification').jqxNotification({ position: 'top-left' }); 

Get the position property.

var position = $('#jqxNotification').jqxNotification('position');

Sets or gets a value indicating whether widget's elements are aligned to support locales using right-to-left fonts.

Code example

Set the rtl property.

$('#jqxNotification').jqxNotification({ rtl : true }); 

Get the rtl property.

var rtl = $('#jqxNotification').jqxNotification('rtl'); 

Sets or gets whether to show the notification's close button.

Code examples

Set the showCloseButton property.

$('#jqxNotification').jqxNotification({ showCloseButton: false }); 

Get the showCloseButton property.

var showCloseButton = $('#jqxNotification').jqxNotification('showCloseButton');

Sets or gets the notification template.

Possible Values:

'info'

'warning'

'success'

'error'

'mail'

'time'

null

If template is set to null, the theme setting is applied to the notification. In that case, the notification icon can be set with the icon property.

Code examples

Set the template property.

$('#jqxNotification').jqxNotification({ template: 'mail' }); 

Get the template property.

var template = $('#jqxNotification').jqxNotification('template');

Sets the widget's theme.

jQWidgets uses a pair of css files - jqx.base.css and jqx.[theme name].css. The base stylesheet creates the styles related to the widget's layout like margin, padding, border-width, position. The second css file applies the widget's colors and backgrounds. The jqx.base.css should be included before the second CSS file. In order to set a theme, you need to do the following:

• Include the theme's CSS file after jqx.base.css.
  The following code example adds the 'energyblue' theme.

  
   
  <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css"
   type="text/css" /> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.energyblue.css"
   type="text/css" /> 
   

• Set the widget's theme property to 'energyblue' when you initialize it.

Sets ot gets the notification's width.

Code examples

Set the width property.

$("#jqxNotification").jqxNotification({ width: 100 });

Get the width property.

var width = $('#jqxNotification').jqxNotification('width');

This event is triggered when the notification is closed.

Code examples

Bind to the close event by type: jqxNotification.

$('#jqxNotification').on('close', function () { // Some code here. }); 

This event is triggered when the notification is clicked.

Code examples

Bind to the click event by type: jqxNotification.

$('#jqxNotification').on('click', function () { // Some code here. }); 

This event is triggered when the notification is opened.

Code examples

Bind to the open event by type: jqxNotification.

$('#jqxNotification').on('open', function () { // Some code here. }); 

Closes all notification instances.

Code examples

Invoke the closeAll method.

$('#jqxNotification').jqxNotification('closeAll'); 

Closes the last notification instances.

Code examples

Invoke the closeLast method.

$('#jqxNotification').jqxNotification('closeLast'); 

Destroys the widget.

Code examples

Invoke the destroy method.

$('#jqxNotification').jqxNotification('destroy'); 

Opens the widget.

Code examples

Invoke the open method.

$('#jqxNotification').jqxNotification('open'); 

Refreshes the widget.

Code examples

Invoke the refresh method.

$('#jqxNotification').jqxNotification('refresh'); 

Renders the widget.

Code examples

Invoke the render method.

$('#jqxNotification').jqxNotification('render');