jQuery Plugin – Feedback

Feedback is a jQuery plugin that lets you send Feedback messages to a user after any event you choose.

(new version – 1.2.0 – as of Sept 24, 2010).

Updated Jan 22, 2010 – new version:

  • Corrects bug with ‘above’ and ‘below’ properties
  • Allows better alignment of message when using ‘above’ or ‘below’ properties with no ‘left’ or ‘right’ property.
Updated Sept 24, 2010 – new version (1.2.0)
  • Added class of ui-feedback to feedback container. This

This gives you the ability to turn off existing feedback messages by using this selector:

jQuery(".ui-feedback").hide();

You might want to do this if multiple feedback messages potentially overlap one another.

You can use it for custom error message handling, for example. So if you write some custom script to perform either a client or server-side validation, you can use Feedback to send an error message. Or, you can send informational messages. It uses the jQuery UI plugin to determine the default styles of the informational and error messages, so it is dependent on that plugin. It has properties that make it easy to position a feedback message next to an existing page element. For example, to place it to the right of an input field, just specify a property of right: true. Here’s a sample implementation:
$("#msg_btn").click(function() {
$(this).feedback("This is an informational message!", {duration: 3000, right: true});
});

This example uses a button with an id of ‘msg_btn’. When you click it, the info message appears to the right of the button and stays there for 3 seconds, then fades out.

The example page shows you a few implementations, and lists the actual code used.

Here is a list of all the properties for feedback:

Property Default Value Valid Values Purpose
type “info” “info” or “error” Type of message. “info” uses jQuery UI default info message style, ‘error’ uses jQuery UI default error message style. See jQueryUI or themeroller for examples.
infoIcon “ui-icon-info” Any. Class for info message icon. “ui-icon-info” is used by default if you specify type: “info”. This is the appropriate jQuery UI class for info message icons
infoClass “ui-state-highlight ui-corner-all” Any. Class for info message. “ui-state-highlight ui-corner-all” are used by default if you specify type: “info”. This is the appropriate jQuery UI class for info messages.
errorIcon “ui-icon-alert” Any. Class for error message icon. “ui-icon-alert” is used by default if you specify type: “error”. This is the appropriate jQuery UI class for error message icons
errorClass “ui-state-error ui-corner-all” Any. Class for error message. “ui-state-error ui-corner-all” are used by default if you specify type: “error”. This is the appropriate jQuery UI class for error messages.
duration “2000” 0-90000. Duration in milliseconds (eg: 2000 = 2 seconds). The message fades away at the end of this time period.
left “false” “true” or “false” Position message to left of reference element – true or false.
right “false” “true” or “false” Position message to right of reference element – true or false.
above “false” “true” or “false” Position message above reference element – true or false. If you specify above: true and do not include right :true or left:true then the message left-aligns with the target jQuery object.
below “false” “true” or “false” Position message below reference element – true or false. If you specify below: true and do not include right :true or left:true then the message left-aligns with the target jQuery object.
offsetX “0” value in pixels Offset on x-axis. If you specify left:true then a positive value moves the message further left. If you specify right: true then a positive value moves the message further right.
offsetY “0” value in pixels Offset on y-axis. If you specify above:true then a positive value moves the message up higher. If you specify bottom: true then a positive value moves the message further down.
feedbackClass “ui-feedback” CSS class of each feedback object CSS class added to each feedback message container HTML element. Useful for turning off all previous feedback messages via a line of code such as this: jQuery(“.ui-feedback”).hide(); If the value “ui-feedback” conflicts with some other UI component you can override this class name with this option.

Example Installation

This plugin depends on the jQuery UI, so you can use it with any page designs that take advantage of all the other jQuery UI components to have a consistent look. If you don’t know how to use or configure jQuery UI, go to Themeroller for info. Here is an example implementation, which includes the appropriate stylesheet for the jQuery UI Lightness theme, the jQuery core, the jQuery UI core, and the plugin source:

<link href="jquery/ui/css/ui-lightness/jquery-ui-1.7.1.custom.css" type="text/css" rel="stylesheet" />
<script src="jquery/core/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="jquery/ui/jquery-ui-1.7.1.custom.min.js" type="text/javascript" ></script>
<script src="jquery/plugins/feedback/jquery.feedback-1.2.0.js" type="text/javascript" ></script>

14 thoughts on “jQuery Plugin – Feedback

  1. Pingback: links for 2009-08-01 « sySolution

  2. Pingback: Feedback jQuery Plugin | Squico

  3. Pingback: New Version of jQuery Feedback Plugin released

  4. Pingback: 50 Fundamental jQuery Controls, Components and Plugins « lcs

  5. Pingback: 50 Fundamental jQuery Controls, Components and Plugins

  6. Pingback: Fundamental jQuery Controls, Components and Plugins « Ulancer

  7. Pingback: How to access cross-domain data with AJAX using JSONP, jQuery and PHP

  8. Pingback: 50 Fundamental jQuery Controls, Components and Plugins « Nap5teR

  9. Matthew

    I had a conflict using the plugin when the prototype library is loaded, even with jQuery.noconflict() called. The first two lines of the plugin should actually look like
    (function( $ ) {
    $.fn.feedback = function(msgtext, options) {

    This solves the problem. Thanks for the plugin!

  10. Pingback: 50 Basic jQuery Controls Plug-ins and Elements | DesDevWeb

  11. Pingback: The most common applications 50 web design jQuery plugin download Web Page Design | Web Page Design Templates | Html5 Template

Leave a Reply

Your email address will not be published. Required fields are marked *