Question

I am try to develop a status box using jquery, so I have a button and when the button gets clicked, the status box will pop up to show message like “button is clicked” and disappear after 10 seconds, but I am not sure how to do it.
I think the code might be like:

  <input type="button" id="status" value = "show status box"/>

  <script>
   $("#status").click(function(){
      //not sure what should be inside?
     }
   </script>

Answer 1

Something like this ?

html

<button id="status">show status box</button>
<div id="statusmessage"></div>

css

#statusmessage{
    position:fixed;
    bottom:0;
    padding:0 5px;
    line-height:25px;
    background-color:#eeee99;
    margin-bottom:-25px;
    font-weight:bold;
    left:0;
    right:0;
}

and jquery

$("#status").click(function() {
    $('#statusmessage').text('#status button was clicked..').animate({'margin-bottom':0},200);
    setTimeout( function(){
        $('#statusmessage').animate({'margin-bottom':-25},200);
    }, 5*1000);
});

demo at http://jsfiddle.net/s3fcy/1/