slideDown popupMessage

by jpeter06

HTML

<div id="cont">
<div id="title">title</div>
<div id="buttons">ABCD</div>
</div>

<br><button onclick="ff(false)">mostrar Normal</button>
<button onclick="ff(true)">mostrar Error</button>

<div id="messagePopup" ></div>

CSS

body,html{ margin:0; padding:0;}
#cont{ background-color:lightgrey;width:100%;height:21px;}
#title{
    background-color:green;float:left;
}
#buttons{ background-color:orange; float:right}
#messagePopup{
position: absolute;
    top: 0;
    left: 30px;
    right:70px;
    overflow:hidden;
    z-index: 1000;
    height: 17px;
    font-size: 13px;
    font-family: sans-serif;
    padding-left: 4px;
    padding-top: 3px;
    display: none;}

JavaScript

function ff(esError){
    showPopupMessage("patatas fritas con chistorra y otras cosas"+ new Date(),esError);
}

function showPopupMessage(message,esError){
    $("#messagePopup").css( "color", esError?"red":"0x222222" );
	 $("#messagePopup").html(message);
    if($('#messagePopup').data('timer'))
       cancelSHow();
   $('#messagePopup').queue("fx", []);
    showM();
}

function showM() {
    $('#messagePopup').slideDown(200,function() {
    var elem = $(this);
        $('#cont').animate({opacity:0.2}, 400).animate({opacity:1}, 400);
   $.data(this, 'timer', setTimeout(function() { elem.slideUp(400); }, 4000));
  });
}

function cancelSHow() {
  clearTimeout($('#messagePopup').stop().data('timer'));
}