Dialog Start tour

Plugin update

x
This plugin will be updated, we are going to add more features and option to it. Dont worry all our updates are free and stay free. All of the updates/changes are logged so that you know what to update and what not.

eNotify

eNotify is a powerfull notification plugin that allows you to show growls, notification and pre-loaders.

eGrowl

Powerfull growl notifications.

Usage plugin

How to use our custom made jQuery plugins.

Markup
$.e_notify.growl({
     title: 'Sticky growl',
     text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vel arcu est. Suspendisse laoreet nisl nec magna feugiat.',
     image: 'images/growl-1.jpg',
     position: 'right-top',
     delay: 0,
     time: 2500,
     speed: 400,
     effect: 'fade',
     sticky: true,
     closable: true,
     maxOpen:3,
     className:'',
     onShow: function(){},
     onHide: function(){}
});

Plugin options

Most of our custom made jQuery plugins have options/settings.

Plugin options Type Required Desctription Since
title string yes* This is the title of the growl. 1.0
text string yes* This is the text of the growl. 1.0
image string no This is an optional image. The size of the image is 40 x 40. 1.0
position string yes This is the position of the growl. You can choose from 4 different positions, right-top, right-bottom, left-top, left-bottom. 1.0
delay number(integer) no Show a growl with a delay. 1.0
time number(integer) yes** This is the time that a growl is visible. 1.0
speed number(integer) yes This is the speed of the of the effect. 1.0
effect string yes The type of effect. 1.0
sticky boolean no You can set a growl to sticky mode, this means the growl wont be removed after xxx seconds. 1.0
closable boolean yes Allow users to remove the growl. 1.0
maxOpen number(integer) no You can set per growl the number of open growls per placeholder(position). 1.0
className string no You can style the growl by using a custom classname. 1.0
onShow function no Run a function on show of a growl. 1.0
onHide function no Run a function on hide of a growl(auto hide or manual removing). 1.0
* a growl always needs a title or text, the rest can be removed. ** the time isn't required if you set the option 'sticky' to true.

eLoader

Basic pre-loader indicator.

Usage plugin

How to use our custom made jQuery plugins.

Markup
$.e_notify.loader({
     image: 'images/loaders/type2/light/32.gif',
     position: 'center',
     imageSize: '32 | 32',
     delay: 0,
     time: 1200,
     speed: 100,
     opacity: 0.5,
     onShow: function(){},
     onHide: function(){}
});

Plugin options

Most of our custom made jQuery plugins have options/settings.

Plugin options Type Required Desctription Since
image string no You can choose your own loader image. 1.0
position string yes This is the position of the growl. You can choose from 5 different positions, right-top, right-bottom, left-top, left-bottom, center. 1.0
imageSize string yes This is the dimension of the image 'height | width'. 1.0
delay number(integer) no Show the loader with a delay. 1.0
time number(integer) yes This is the time that the loader is visible. 1.0
speed number(integer) yes This is the speed of the of the effect. 1.0
opacity number(float) yes This is the opacity of the overlay background. 1.0
onShow function no Run a function on show of the loader. 1.0
onHide function no Run a function on hide of the loader. 1.0

eNotification

Basic notification messages.

Usage plugin

How to use our custom made jQuery plugins.

Markup
$.e_notify.notification({
     text: 'This notification message, has the custom class called "notification-warning".',
     position: 'top',
     target: '',
     delay: 0,
     time: 2500,
     speed: 500,
     effect: 'slide',
     sticky: true,
     closable: true,
     className:'notification-warning',
     onShow: function(){},
     onHide: function(){}
});

Plugin options

Most of our custom made jQuery plugins have options/settings.

Plugin options Type Required Desctription Since
text string yes The text of the notification. 1.0
position string yes* This is the position of the notification. You can choose from 2 different positions, top, bottom. 1.0
target string no Instead of using a position you can use a target, this alows you to add a notification anywhere you want. 1.0
delay number(integer) no Show the notification with a delay. 1.0
time number(integer) yes This is the time that a notification is visible. 1.0
speed number(integer) yes This is the speed of the of the effect. 1.0
effect string yes This is the effect of the notification. 1.0
sticky boolean no You can set the notification to sticky mode, this means the notification wont be removed after xxx seconds. 1.0
closable boolean yes Allow users to remove the notification. 1.0
className string no You can style the notification by using a custom classname. We have already made the custom classes: notification-success, notification-warning, notification-info, notification-error, notification-msg, notification-success-widget, notification-warning-widget, notification-info-widget, notification-error-widget, notification-msg-widget. Notifications do have a default class. 1.0
onShow function no Run a function on show of the notification. 1.0
onHide function no Run a function on hide of the notification. 1.0
* you dont have to use the position option if you use a target.

eClear

Remove all open, growls or notifications.

Usage plugin

How to use our custom made jQuery plugins.

Markup
$.e_notify.clear({
	type: 'notification',
	beforeClear: function(){},
	afterClear: function(){}
});

Plugin options

Most of our custom made jQuery plugins have options/settings.

Plugin options Type Required Desctription Since
type string no Choose what to delete, you can choose beteen, notification and growl. 1.0
beforeClear function no Run a function before removing. 1.0
afterClear function no Run a function after everything is removed. 1.0

Dialogs

Small and big notification messages. These dialogs arn't powerd by any jQuery plugin.

Basic

Small standard notification messages.

How to use

How to use HTML elements.

Markup
<div class="dialog warning">
    <img src="images/icons/dialogs/warning-16.png" alt=""/>                                        
    <p>This is an warning message</p>
    <span>x</span>
</div>

Inline

Small standard inline notification messages. Basic colors.

How to use

How to use HTML elements.

Markup
<div class="dialog-inline warning">
    <img src="images/icons/dialogs/warning-16.png" alt=""/>                                        
    <p>This is an warning message</p>
    <span>x</span>
</div>

Big size

Big notification messages.

How to use

How to use HTML elements.

Markup
<div class="dialog-big warning">
    <h3>This is an warning message</h3>
    <span>x</span>
    <div>
    put the extra text here
    </div>
</div>

Big size inline

Big inline notification messages.

How to use

How to use HTML elements.

Markup
<div class="dialog-big-inline warning">
    <h3>This is an warning message</h3>
    <span>x</span>
    <div>
    put the extra text here
    </div>
</div>

Custom colors and icons

Small standard notification messages with custom colors and icons.

How to use

How to use HTML elements.

Markup
<div class="dialog custom-red">
    <img src="images/icons/plix-16/black/grid-16.png" alt=""/>
    <p>This is an custom message...</p>
    <span>x</span>
</div>

Usage classes

Defined classes related to a piece of code or plugin.

Available class Element Desctription Since
dialog div Main dialog class 1.0
dialog-inline div Main inline dialog class 1.0
dialog-big div Main big dialog class 1.0
dialog-big-inline div Main big inline dialog class 1.0
warning div Type of dialogs, these are used for the basic colors 1.0
info div Type of dialogs, these are used for the basic colors 1.0
message div Type of dialogs, these are used for the basic colors 1.0
error div Type of dialogs, these are used for the basic colors 1.0
success div Type of dialogs, these are used for the basic colors 1.0
custom-red div Custom color: red 1.0
custom-green div Custom color: green 1.0
custom-orange div Custom color: orange 1.0
custom-blue div Custom color: blue 1.0
custom-purple div Custom color: purple 1.0
custom-black div Custom color: black 1.0
custom-grey div Custom color: grey 1.0

Third-party plugins

Third-party plugins are not documented here because they have there own documentation.

UI Dialogs

jQuery UI dialogs.

This is a third party plugin, for information about how to use this plugin and examples please visit this site.