Web Tips
Sharing our knowledge of CFML & jQuery and many other web development tips.
You are here: Home
/ Show Message- jQuery Plugin for displaying messages
Show Message- jQuery Plugin for displaying messages
11By 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
- 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
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 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 24 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"
Leave a Reply
Flickr Feed
[...] Go here to read the rest: dingobytes » Blog Archive » Show Message 1.0- jQuery Plugin for … [...]
[...] 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 [...]
Awesome job mate! Really!
My best wishes,
Cheers.
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.
Thank you for the comments, it is not often that they are constructive. I will look into implementing all of those!
Hello man
I’m having some problems with IE6. Don’t show the message, only create a red DIV on top.
Thanks
Sorry, but I won’t be supporting IE6, but feel free to edit the stylesheet in the plugins folder to hack it for IE6
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
I need action to be done after message box is displayed. Pls help
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