jQuery.showMessage

This jQuery plugin is useful for displaying text, images, or both in a notification box that floats overtop of web page. We built this plugin using the jQuery library and have licensed the plugin under both MIT and GPL licenses.

Download .zip Download .tar.gz

Easy To Use

This plugin is easy to use and features several options to allow you to customize it for your site. We have taken user input and developed this plugin to be as robust as possible.

Options

API Methods

We have introduced API methods that can be used to interact with jQuery.showMessage. Currently there is only a close method, but if we have more interest we will continue to build in more.

Demo

A first attempt at a jQuery plugin. This jQuery plugin was inspired by a similar effect seen on the Twitter.com site.

Try it

How To Use

Download the plugin, unzip the contents, and include showMessage script and stylesheet in your document. This is a jQuery plugin, so make sure you also have loaded the jQuery library.

1. Include your JavaScript.

You will need to load jQuery and this plugin JavaScript. You can load jQuery directly from your host or you can use a CDN.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery.showmessage.min.js"></script>

2. Include your CSS

You can style the text, or the responses that 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.

<link type="text/css" href="/assets/css/showMessage.css" rel="stylesheet" media="screen" />

3. Define your message

Your message can be plain text, html, images or any combination of all three. The message should be pushed to the plugin via an array. Here is an example of how to define an array for the message.

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

4. Call the showMessage() method

You can attach the notification to the document, and element on the page or use a attribute of an element to attach notification to a specific element.

The following attached the notification to the document.

jQuery(document).showMessage({
	thisMessage: returnMessage,
	className: success,
	opacity: 95,
	displayNavigation: false,
	autoClose: true,
	delayTime: 6000
});

You can customize the plugin by passing options as a key/value object to showmessage() method.

Key	Value	Default Value	Description
thisMessage	Array	Empty Array	The message you will be returning to the page. The message is in the form of an array.
className	String	'notification'	Customize the style for the notification bar here.
position	String	'fixed'	Notification bar css position. Use any of the valid position property values ['fixed','absolute','static','relative','inherit'].
zIndex	Integer	1001	The z-index of the notification bar. Value is an integer greater then one.
opacity	Integer	90	Opacity of the notification bar. Value is an integer between 1 and 100.
location	String	'top'	Position of the notification bar. Value can be either 'top' or 'bottom' only.
useEsc	Boolean	true	Will bind the 'Esc' keydown event to window to close the notificaton bar.
displayNavigation	Boolean	true	Will display the navigation close text information in upper right.
autoClose	Boolean	false	When set to true, it will close the notification bar after specified delay time.
delayTime	Integer	5000	Amount of time in milli-seconds before the notification bar will close/hide (autoClose must be set to true).
closeText	String	'close'	Text that you want the notification to display in upper right to close window.
escText	String	'Esc Key or'	Text that you want the notification to display in upper right to close window with 'Esc' key.

We have just started working on public functions to help you utilize the plugin in a number of different scenarios. These functions can be called as a property of the $.showMessage object. To use from inside the iframe -

<a href="javascript:parent.$.showMessage.close();">Close message</a>

Name	Description
close	`$.showMessage.close()` This will close the notification and clear 'autoClose' if it exists

Examples

We have created a few examples of how the plugin can be used below

1. Use an event, any event really.

Call the method with an event like a click!.

Click Me

jQuery('#clickMe').click(function() {
	$('body').showMessage({thisMessage: ['Hey! Something bit me!']});
	return false;
});

2. Form validation.

You can validate a form (client side or server side) using JavaScript and an Asynchronous call.

jQuery('#joeForm').on('submit', function() {
	var rMessage = [],rClass='success';
	if (jQuery('input[name="joeName"]').val() === 'Joe') {
		rMessage.push('You know Joe!');
	} else {
		rMessage.push('Bahnt! Enter Joe foo!');
		rClass='fail';
	}
	jQuery('body').showMessage({thisMessage: rMessage, className: rClass});
	return false;
});

3. Open inside another element.

You can open the notification on just about any element. This example shows how we can display message in a modal window.

Note that the modal window we opened has an attribute id="testModal".

Test

jQuery('#modalBtn').click(function() {
	jQuery('#testModal').showMessage({thisMessage: ['You opened my modal!'], position: 'absolute'});
	return false;
});

4. Use it as a tooltip.

You can attach the notification to the document, and element on the page or use a attribute of an element to attach notification to a specific element.

Mouse over the link to view an excessively pretentious tooltip.

jQuery('a.sMtooltip').mouseenter(function() {
	returnMessage = [jQuery(this).attr('title')];
	$.showMessage({
		thisMessage: returnMessage,
		className: 'success',
		opacity: .95,
		displayNavigation: false,
		autoClose: true,
		delayTime: 3000
	});
	return false;
}).click(function() {return false;});

Change Log

2012-09-28 v3.1

Serious rewrite to fix the following errors
Incorrect merge of plugin defaults
Validation errors
Javascript errors

2012-04-04 v3.0

Complete rewrite to better harness jQuery methods and create API for ease of use.
Replaced position option to reflect CSS style position attribute.
Former position attribute name changed to location. Options remain ['top','bottom']

2011-04-18 v2.4

Found warning for unscoped variable 'event'. Changed line 60 to read keycode = window.event.keyCode;
Added some different styles to the notification windows.

2010-12-20 v2.3

Plug-in was overwriting the selected element with 'body' element (was accidently hard coded and never properly removed).
Added another option for z-index. Ran into an issue where notification was being placed behind a light box. The new option will give more flexibility to and allow the plug-in to determine various z-index.

2010-11-23 v2.2

Minor change as per recommendation by Sebastian Kun (http://www.arcestra.com/).
Added options for better 'internationalization' of navigation text. Sebastian added two more options for closeLink text and closeText text.
Removed the jquery.showMessage.pack.js option

2010-05-06 v2.1

Minor change to option.position. Changed order so looking for top position else set to bottom.
Issue with IE7+ if there is no doctype declared (shame on you, since DOCTYPES are vital to the proper functioning of web standards in browsers), we have changed insertion of #showMessage to either .prepend() or .append() depending on if position is top or bottom.

2010-04-05 v2.0

Received a request to make some improvements to the plugin from DaveG. Thank you much for the constructive comments DaveG.
Added new option useEsc to allow the 'esc' key to be optional (boolean true|false).
Changed the global variable t to be included in the function and renamed to showMessage_t.
Extended the plugin to use the jQuery.fn (does not return a value so this may not be chainable).