jQuery: Floating message box which disappears in few seconds

14 / Sep / 2010 by Amit Jain 1 comments

Hi Friends,

Recently in one of the project I was working on, had a long web page and updates used to happen only through ajax calls that means no page refresh. The status messages used to appear on the top of the page, the user had no way but to scroll up to see the status message. There we thought of using floating message that always appears on the top and floats as and when page is scrolled and also disappears itself after specified amount of time. I found one blog by Roshan that helped a lot, which I tweaked a little as given below.

CSS code to be added :

#message_box {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1000;
    background: #ffc;
    padding: 5px;
    border: 1px solid #CCCCCC;
    text-align: center;
    font-weight: bold;
    width: 99%;

Html code containing message : :-

Your message goes here

Call setupMessageBox() when message is available.

Hope this helped!

~~Amit Jain~~


comments (1 “jQuery: Floating message box which disappears in few seconds”)

Leave a Reply

Your email address will not be published. Required fields are marked *