Download

Get download more information- http://showMessage.dingobytes.com/download/

Install

You can install showMessage jQuery Plugin by including the script somewhere in the page AFTER jQuery. This plugin should work on jQuery version 1.3.2+.

<script type="text/javascript" src="/path/to/jquery.showMessage.min.js"
charset="utf-8"></script>
			

If you wish to style the text, the responses are displayed through an unordered list in the div with id attribute showMessage. Further more you can apply the class of your choice to the notification toolbar.

.notification
{
	font-family: Arial, Helvetica, clean, sans-serif;
	font-size: large;
	font-weight: bold;
	background-color: rgb(247, 247, 247);
	color: red;
}
.success
{
	font-family: Arial, Helvetica, clean, sans-serif;
	font-size: large;
	font-weight: bold;
	background-color: #acfa58;
	color: black;
}
.fail
{
	font-family: Arial, Helvetica, clean, sans-serif;
	font-size: large;
	font-weight: bold;
	background-color: #fe2e2e;
	color: white;
}
			

Options

Here are the possible options with their default values:

	thisMessage:		[''],
	className:		'notification',
	position:		'top',
	zIndex:			1001,
	opacity:		90,
	useEsc:			true,
	displayNavigation:	true,
	autoClose:		false,
	delayTime:		5000,
	closeText:		'close',
	escText:		'Esc Key or'
			

thisMessage (required)[array]

The message you will be returning to the page. The message is in the form of an array.

className[string]

Default set to 'notification'. Customize the style for the notification bar here.

position[string]

Default set to 'top'. Position of the notification bar. Value can be either 'top' or 'bottom' only.

zIndex[integer]

Default set to 1001. z-index of the notification bar. Value is an integer greater then one.

opacity[integer]

Default set to 90. Opacity of the notification bar. Value is an integer between 1 and 100.

useEsc[boolean]

Default set to true. Will bind the 'Esc' keydown event to window to close the notificaton bar.

displayNavigation[boolean]

Default set to true. Will display the navigation close text information in upper right.

autoClose[boolean]

Default is set to false. When set to true, it will close the notification bar after specified delay time.

delayTime[integer]

Default is set to 5000. Amount of time in milli-seconds before the notification bar will close/hide (autoClose must be set to true).

closeText[string]

Default is set to 'close'. Text that you want the notification to display in upper right to close window.

escText[string]

Default is set to 'Esc Key or'. Text that you want the notification to display in upper right to close window with 'Esc' key.

Example

Simple

Just return a simple message to notification bar.

jQuery('body').showMessage({
	'thisMessage':['<mg src="/images/accept.png" alt="accept"/>successful!']
});
					

Advanced

This should look a lot like Twitter.

var returnMessage = ['Account was created successfully!','Thank you.'];

jQuery('body').showMessage({

		'thisMessage':		returnMessage,
		'className':		'success',
		'opacity':		95,
		'displayNavigation':	false,
		'autoClose':		true,
		'delayTime':		6000

});