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 26 articles for dingobytes.

Andrew Alba is a Software Engineer who resides in the Minneapolis-St Paul since 2010. Andrew has almost a decade and a half of web development and advertising experience. Andrew is currently employed with The Lacek Group in Minneapolis, MN after spending almost three years with Internet Broadcasting in St Paul, MN and five years with Interive Media Group in Fargo, ND. Andrew enjoys developing solutions using CFML, JavaScript/AJAX, Java, PHP and anything else he can steal from the web.

11 Responses to "Show Message- jQuery Plugin for displaying messages"

  1. dingobytes » Blog Archive » Show Message 1.0- jQuery Plugin for … » KHMER855.COM February 1, 2010 12:08 am

    […] Go here to read the rest: dingobytes » Blog Archive » Show Message 1.0- jQuery Plugin for … […]

  2. Tweets that mention dingobytes » Blog Archive » Show Message 1.0- jQuery Plugin for displaying messages -- Topsy.com February 3, 2010 12:27 pm

    […] This post was mentioned on Twitter by Angela Young, Larry King. Larry King said: dingobytes » Blog Archive » Show Message 1.0- jQuery Plugin for … http://bit.ly/aQpJX3 #jQuery […]

  3. Vinnie March 19, 2010 10:11 am

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

  4. DaveG April 1, 2010 2:34 pm

    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.

  5. admin April 1, 2010 4:01 pm

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

  6. JC June 24, 2010 10:51 am

    Hello man

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

    Thanks

  7. admin June 24, 2010 11:01 am

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

  8. Hitman72 August 5, 2011 7:59 am

    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

  9. Aaa October 5, 2011 7:36 am

    aaa

  10. Ivan V December 17, 2011 4:37 am

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

  11. Anonymous December 17, 2011 11:45 am

    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

Leave a Reply

 
You must be logged in to post a
video comment.