Five Star Rating

This simple WordPress plug-in allows viewers to rate a post.

jQuery showMessage

This jQuery plug-in allows you to easily create a 'twitter-like' notification.

Web Tips

Sharing our knowledge of CFML & jQuery and many other web development tips.

Show Message- jQuery Plugin for displaying messages

11
By admin in : JQuery, Plugin, Tutorial // Jan 31 2010

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 2.1 of the plugin at http://showMessage.dingobytes.com/download/

Please see the site, as the information below is for previous versions. This has been updated!

jQuery

jQuery

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
});

About the Author

admin has written 22 articles for dingobytes.

Andrew Alba is a Software Engineer who recently relocated to Minneapolis-St Paul area after living in NW Minnesota for two decades. Andrew is currently employed with Internet Broadcasting Systems in St Paul, MN after spending almost five years with Interive Media Group in Fargo, ND. Andrew enjoys developing solutions using CFML, JavaScript, AJAX, PHP and anything else he can steal from the web.
  • Pingback: dingobytes » Blog Archive » Show Message 1.0- jQuery Plugin for … » KHMER855.COM

  • Pingback: Tweets that mention dingobytes » Blog Archive » Show Message 1.0- jQuery Plugin for displaying messages -- Topsy.com

  • Vinnie

    Awesome job mate! Really!
    My best wishes,
    Cheers.

  • http://solidgone.org/ DaveG

    Like your plugin, I use it on my project, thanks. A request, and a few notes:
    ] Any chance of providing a switch to disable the escape key? When using with jQuery UI Dialog for example, hitting escape to clear the error message also clears the dialog. I’d rather the user click the close like on showMessage, not be able to hit escape.

    ] Variable ‘t’ is declared in global space, and likely to conflict with other uses. Since it needs to be global, how about showmessages_t?

    ] When creating a jQuery plugin the function should be assigned to jQuery.fn, rather than the root jQuery.

    ] Plugin should also ‘return this’ to allow chaining, although in this case not sure chaining would be too useful.

  • http://www.albawebstudio.com admin

    Thank you for the comments, it is not often that they are constructive. I will look into implementing all of those!

  • http://wolfnime.com JC

    Hello man

    I’m having some problems with IE6. Don’t show the message, only create a red DIV on top.

    Thanks

  • http://www.albawebstudio.com admin

    Sorry, but I won’t be supporting IE6, but feel free to edit the stylesheet in the plugins folder to hack it for IE6

  • Hitman72

    Hi, I am a html/wordpress newbie. Use this plugin with “standard” html page is very simple. Now I am trying wordpress and I don’t know how integrate this amazing plugin, how and where “loading” the plugin and how insert a message in a php page :-( thank you and sorry for my poor english

  • Aaa

    aaa

  • Ivan V

    I need action to be done after message box is displayed. Pls help

  • Anonymous

    There are only to methods/functions in the plugin. If you want it AFTER the message box has opened, then you will need to put your action inside the $.fn.showMessage method. If you actually want the action to be done after the box closes, then you will need to place your code inside the $.fn.showMessage.closeMessage method.

    Hope that helps