Dropdown Messages

by Ben Clayton

CSS

.mpanel {
  position: absolute;
  border: 3px solid #E0E0B0;
  height: 100px;
  padding: 0px 10px;
  margin-top: -6000px;
  background-color: #FFFFC0;
  box-shadow: 5px 5px 2px #888888;
}
.msgpanelmsg {
  margin-top:20px;
}

.msgpanelclsbtn {
  color: gray;
  background: white;
  float: right;
  margin: .3em;
  padding: 5px;
  font-family: Arial;
  border-radius: 50%;
  clear:both;
}

.msgpanelclsbtn:hover {
  color: white;
  background: red;
}

JavaScript

;
(function($) {
  var opts,
    zindex,
    pleft,
    pleftDefault = 0,
    ptop,
    ptopDefault = 0;
  zindexDefault = 2000,
    nshowing = 0;

  zindex = zindexDefault;
  pleft = pleftDefault;
  ptop = ptopDefault;

  var defaults = {
    speed: 'slow',
    panelClass: 'msgpanel-info-msg',
    widthPercent: '100%',
    panelOpacity: 1
  };

  $.fn.msgpanel = function(options, text) {
    opts = $.extend({}, defaults, options);
    return this.each(function() {
      var $this;
      $(this).append($this = $("<div class='mpanel'></div>"));

      $this.addClass('msgpanel ' + opts.panelClass);
      $this.css({
        top: '0px',
        width: opts.widthPercent
      });
      if (opts.marginLeftPercent) {
        $this.css({
          'margin-left': opts.marginLeftPercent
        });
      }
      var m = $this.find('.msgpanelmsg');
      if (0 === m.length) {
        $this.attr('title', 'Click X to close');
        $this.append('<div class="msgpanelclsbtn" >X</div><div class="msgpanelmsg"></div>');
        $this.data('msgpanel', new MsgPanel($this.get(), opts));
        var mpanel = $this.data('msgpanel');
        var btn = $this.find('.msgpanelclsbtn');
        btn.bind('click', function() {
          mpanel.hidePanel();
        });
        mpanel.showPanel(text);
      }
    });
  };

  function calcHeight(el) {
    var $el = $(el);
    return $el.height() +
      parseInt($el.css('paddingTop')) +
      parseInt($el.css('paddingBottom'));
  }

  function MsgPanel(el, options) {
    var $self = this,
      showing = false;

    $self.showPanel = function(text, callopts) {
      var $el = $(el);
      $el.find('.msgpanelmsg').html(text);
      if (showing) return;
      var opts = $.extend({}, options, callopts);
      $el.css('marginTop', -(calcHeight(el)));
      // ensure that this panel stacks above other panels
      //debugger;
      $el.css({
        'z-index': ++zindex,
        'left': pleft + 'px',
        'top': ptop + 'px'
      });
      pleft...