Top Floating message box using jQuery

Last time, I’ve shown you how to create a alert box using jQuery. This time, I’ve come up with another tutorial to show you how to display floating message box in the top of  the browser using jQuery. The message box always get displayed at the top of the browser although you move across the document with help of scroll bar. Now, let’s kick out this tutorial for creating floating message box using jQuery.

LIVE DEMO

HTML code for floating message box using jQuery

<div id="message_box">
    <img id="close_message" style="float:right;cursor:pointer" src="12-em-cross.png" />
    The floating message goes here
</div>

<div>
  ..............
  other content goes here
  ..................
</div>

The message box which is going to float in the top of the browser is inside the div with id “message-box” and this div is defined with the class “cornerbox”. And the small image with id “close_message” to close the message box and is displayed in the right hand side by setting the float attribute of CSS to right .

CSS code for floating message box using jQuery

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

You can see that CSS code for the floating message box is straightforward and you can change the color , size etc. according to your choice. But keep in mind that, “position” property must be absolute so that this message box doesn’t distract the other boxes and “z-index” must be set higher so that the it overlaps the other content of the web page.

jQuery code for floating message box

<script type="text/javascript" language="javascript" src="jquery-1.2.6.min.js"></script>

You must notice that I’ve used jquery 1.2.6 in this example as dimension plugin of jquery is embedded in the this version of jQuery. If you use the lesser version of jQuery than 1.2.6 then must use the dimension plugin of jQuery to use this example.

//scroll the message box to the top offset of browser's scrool bar
$(window).scroll(function()
{
  $('#message_box').animate({top:$(window).scrollTop()+"px" },{queue: false, duration: 350});
});

As you can when the window gets scrolled this function is called and the box gets moved as the “top” property of message box is set to different pixel using scrollTop() function, which had been the part dimension plugin of jQuery. This function return the scroll top offset of the matched element and in our example this return the scroll top offeset of the browser’s window. Another thing you must notice in the animate function that queue is set to false which makes the animation to skip the queue and begins running immediately otherwise the animation may stuck in the queue and looks ugly.

//when the close button at right corner of the message box is clicked
$('#close_message').click(function()
{
  //the messagebox gets scrool down with top property and gets hidden with zero opacity
  $('#message_box').animate({ top:"+=15px",opacity:0 }, "slow");
});

It is the simple animation when the image with close sign is clicked, the message box slides down below and gets hidden because its opacity set to zero in the animation function.

DOWNLOAD FULL SOURCE CODE

43 thoughts on “Top Floating message box using jQuery

  1. Hem

    can we record the close click and store that in cookie and don’t display when page reloads..

  2. yes hem you can surely do that ….but u’ve to use Ajax man…

  3. thanks man.how to cookie use this it?

  4. Hem

    Roshan we can use cookie.. i have done using cookie in one of my sites..

  5. oh sorry hem…I forgot about that one you can use cookies via JavaScript to preserve the state of this message box….

    sorry for the confusion…

  6. Hi… i need this example but not buttom event asociate… You can help me? when a record in my data base is not found I need a message for the user.

    Thank u…!!!

  7. earpick

    Handy! Thanks. I knew it’d have to do something with the scroll event of the window and the scrollTop property :P. But I just love how much easier jQuery makes the workflow. The part about JS I usually dread is writing all those lines of code to pull up the values, hoping that they will be cross-browser compatible, and it makes it all that much more fun and worry-free.

  8. Rui

    Tank you for this lovely code. I need this to stop 300 px before the end of my html. Can this be achieved?

    cam u point me in the right direction?

  9. gr8 work man!! I was looking for this for a long time. thanks for this one. solved by prob!

  10. thank you!!!

    excellent using jQuery

  11. Thanks. This is very usefull

  12. Shubham

    Hi

    I tried it with wordpress. On the landing page (Home) it works fine but on other pages, it just shows the navbar which neither scrolls/ closes. DO you have any idea why it could be like that (or is it something WP specific… which I think obv is the reason)
    Just in case you have knowledge of WP – I Used the code in header.php in head tag.

    TIA

  13. How do I display this under another element position instead of the top of the page? also how do I make the element clickable only using the class name?

  14. Hi,
    Nice Jquery article :). I had problem while running the demo in the IE8 where the floating box are displaying properly on window scroll but i am not able to close the message box by pressing the close image.

    The Div tag remain there after clicking the close options.

    can you give some idea on this.

    Thanks
    Rafeek :)

  15. Nice blog..

  16. funny, but useful.

    thanks

  17. Very nice tutorial. I’m having a hard time implementing it into wordpress; however, it’s my fault and inexperience, rather than the code. Any help from respondents would be appreciated.

    Take care,

    Cristian

  18. Thk.. very good

  19. Mahesh

    Hi, I am a novice jquery developer. I like your article and wondering how can I do if I want to hide this message box when the page is loaded and only display the message box when we scroll down. Again when we scroll up to the top the message box should hide.

    Thanks,
    Mahesh

  20. Kiruba

    Thank you man. 1 hrs spend to search this link. Do some SEO, you can get more traffic when you put more keywords. it will be more easy to search for user

  21. What were the keyword initially you’ve use to search can u suggest me?? so i’ll work on that one ??

  22. Thanks. This is very usefull

  23. jap

    Roshan, can you explain how to make the message auto-hide after x seconds and to not show anymore when close image is clicked. Or anyone can explain? i think i would be i nice add-on.

  24. Nice! That’s what I’ve been looking for.

  25. Lio

    How do i change the position of the message from top to bottom of browser?

    newbie here

  26. anu

    Nice jquery code.i am new to jquery and i wanted to implement this floating box a s a commentbox in my website.I wanted to use this floating box inside a scrolling div.so when the user scrolls the div the box should float inside the div.Is it possible.could you pls help me

  27. anu

    Oh I found the answer. replaced the Window with the name of my div. But now the question is when i add the margin top to the div the script continues to add a margin to the page and I never reach the bottom of the page. Could you pls help me

  28. Rugesie

    This just saved my butt and some much time. Thanks, If you need to have the msg box stay at the bottom of the screen and not scroll and bounce around try the changes below.

    CSS Change
    position: fixed;

    Then remove the scroll function with
    $(window).resize(function() {
    var pos=parseInt($(window).scrollTop())+parseInt($(window).height());
    $(‘#disclaimer_box’).css(“top”,pos-26+”px”);
    $(‘#disclaimer_box’).show(); //display the disclaimer box
    });

    Then the box will stay at the bottom of the screen!

  29. Hi,
    how do i make the box float to the bottom right of the screen?

  30. its wonderfull article … i need this floating jquery to create calender in my menu with some animation when user scroll window 😀

    thanks

  31. I used it on my site, tanks

  32. Thanks a lot! It helped.

  33. Thanks for it. it could helped me for academic project.

Leave a Reply

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

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>