Flash a message to the user

by Umar

HTML

<button class="add-item">Add to Cart</button>
  
  <div id="status-area"></div>

JavaScript

$.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();
    });
    
  });
};

$('.add-item').click(function() {
  
  $('#status-area').flash_message({
    text: 'Added to cart!',
    how: 'append'
  });
});