Notices

Last Updated: Thursday, July 24th, 2008
A script for posting quick messages to the user. Generally used for status updates tied to ajax functionality.
A script that provides a method to display messages to the user. Click for here for an example of it in action.

Requirements

The notices script uses the YUI library and needs the YAHOO, Dom, and Event files. You can include them using the tag below
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/yahoo-dom-event/yahoo-dom-event.js"></script>

Optionally Notices can also use the YUI Animation library if it’s available.

<script src="http://yui.yahooapis.com/2.5.2/build/animation/animation-min.js" type="text/javascript"></script>

Download the notices script and include it on your page
<script type="text/javascript" src="/js/jp-notices.js"></script>

How to Use

The simplest way to use this script is to use the helper functions:
  • JP.Notices.success_notice
  • JP.Notices.process_notice
  • JP.Notices.error_notice

Each of those takes one argument, the message to display. The above example was called with this code:
JP.Notices.success_notice('You have Displayed a Success Notice');

The success and error notices will automatically disappear after a bit (2.5 seconds by default), while the process notice will stay visible until it’s removed.

Examples

View additional examples of the Notices here.

Configuration Options

The notices is configured through the use of a JP.Notices.config object. If needed you can also pass a custom config object to the display function.

Configuration Attributes

Name Type Default Value Description
close_icon string null The close icon to be displayed. Generally just used in the config options passed to the display method.
duration int 2500 How long the notices should be displayed by default in milliseconds.
icon_path string '' This is the path to where the icons can be found for the ajax_loader and the close icons.
notices_div string jp-notices This is the id of the div that the notices will be placed in. If the div doesn't exist it will be created automatically.
show_close boolean true If true it will show the close icon for each individual notice, if false the icon won't be shown.
show_spinner boolean false Whether or not the spinner should be shown. Generally just used in the config options passed to the display method.

Methods

display

This function actually displays the notice and returns the id of the newly created notice.

Parameters:

  • msg - (string) The message to be displayed
  • css_class - (string) The CSS class to apply to this notice
  • duration - (int) The time in milliseconds that the notice should be visible before closing, if 0 then it will stay visible until specifically closed.
  • config - (object) a custom config object for specifying additional parameters

Returns: string (the notice id)
 

error_notice

This method displays a notice with the css class of ‘error’ and returns the id of the created notice. Only the “msg” parameter is required.

Parameters:

  • msg - (string) The message to be displayed
  • duration - (int) The time in milliseconds that the notice should be visible before closing, if 0 then it will stay visible until specifically closed.

Returns: string
 

process_notice

This method displays a notice with the css class of ‘processing’ that will be displayed until specifically removed. It returns the id of the created notice.

Parameters:

  • msg - (string) The message to be displayed

Returns: string
 

remove

This removes notice corresponding to the id passed so that notice is no longer displayed.

Parameters:

  • notice - (string) The id of the notice to be removed.

Returns: nothing
 

success_notice

This method displays a notice with the css class of ‘success’ and returns the id of the created notice. Only the “msg” parameter is required.

Parameters:

  • msg - (string) The message to be displayed
  • duration - (int) The time in milliseconds that the notice should be visible before closing, if 0 then it will stay visible until specifically closed.

Returns: string
 

Download

File File Type Description
close.gif Image The close icon for the notices.
ajax-loader.gif Image The loading icon displayed on the processing notice.
jp-notices.css CSS The default CSS for the notices. This CSS can be used or custom CSS.
jp-notices.js Javascript The Javascript file containing the notices code.

Tested On

IE 6 and 7
Firefox 2 and 3
Opera 9.5
Safari 3

License

This code is licensed under a BSD license. You can view the license here. In essence you are free to do what you want with the code.
blog comments powered by Disqus