plugin to make it easy to add flash messages for user feedback

message.css

#status-area .flash_message {
    padding: 5px;
    color: green;
}

message.html

<button class="add-item">Add to Cart</button>

<div id="status-area"></div>

message.js

(function($) {
    $.fn.flash_message = function(options) {
      
      options = $.extend({
        text: 'Done',
        time: 1000,
        how: 'before',
        class_name: ''
      }, options);
      
      return $(this).each(function() {
        if( $(this).parent().find('.flash_message').get(0) )
          return;
        
        var message = $('<span />', {
          'class': 'flash_message ' + options.class_name,
          text: options.text
        }).hide().fadeIn('fast');
        
        $(this)[options.how](message);
        
        message.delay(options.time).fadeOut('normal', function() {
          $(this).remove();
        });
        
      });
    };
})(jQuery);


//Usage Examples
$('#status-area').flash_message({
  text: 'Added to cart!', // text to show
  how: 'append', // ['append', 'prepend', 'before', 'after']
  time: 1000, // how long should the message be visible
  class_name: 'success' // additional class names for CSS hooks
});