Inspired by a similar feature at Twitter.com, this jQuery Plugin will help you display messages at the top of your page with an assortment of options.

Download the latest version 1.3 of the plugin at http://showMessage.dingobytes.com/download/

This is my first attempt at a jQuery Plugin, so although it works fine for my liking, I am sure there are many things that can be done more effectively.

  • Message displayed at the top of page (no scrolling to view error)
  • Multiple messages can be displayed
  • Options to automatically close the message after set delay
  • Message closes with blur/’esc’ key/’close’ link

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 message is displayed through an unordered list in the div with id attribute=showMessage

#showMessage li
{
font-family: Arial, Helvetica, clean, sans-serif;
font-size: large;
font-weight: bold;
color: red;
}

Options

Here are the possible options with their default values:

thisMessage:		[''],
backgroundColor:	'#F7F7F7',
color:			'#000000',
opacity:		90,
displayNavigation:	true,
autoClose:		false,
delayTime:		5000
thisMessage (required)[Array]
The message you will be returning to the page. The message is in the form of an array.
blackgroundColor[string]
Default set to ‘#F7F7F7′. The background color of the message holder. (‘#F7F7F7′ or ‘rgb(247, 247, 247)’ or ‘white’)
color[string]
Default set to ‘#000000′. The font color in the message holder. (‘#000000′ or ‘rgb(0, 0, 0)’ or ‘black’)
opacity[integer]
Default set to 90. Opacity of the message holder. Value is an integer between 1 and 100.
displayNavigation[boolean]
Default set to true. Will display the ‘esc’ and ‘close’ information in upper right.
autoClose[boolean]
Default is set to false. When set to true, it will close the message holder after specified delay time.
delayTime[integer]
Default is set to 5000. Amount of time in milli-seconds before the message holder will close/hide (autoClose must be set to true).

Example

Simple
Just return a simple message to message holder.

jQuery.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.showMessage({
'thisMessage':		returnMessage,
'backgroundColor':	'#f7f7f7',
'color':		'black',
'opacity':		95,
'displayNavigation':	false,
'autoClose':		true,
'delayTime':		6000
});