Creating a floating message box using jQuery

782 views
asked May 9, 2012 in General by Susan3 (880 points)
hi all
I want to display floating message box on the top of the browser using jQuery. I want the message box to always be displayed at the top of the browser even if I scroll down. Can anyone help please?

1 Answer

0 like 0 dislike
answered May 9, 2012 by SmartHost (9,060 points)
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>

jQuery code for floating message box
//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});
});
...