jQuery Flash Messages

by Ismail Ibraheem Shurrab

HTML

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

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

CSS

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

JavaScript

(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);

$('.add-item').click(function() {

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