Top Floating message box using jQuery

Posted on July 13, 2008 
Filed Under css, how-to, jquery, tutorial

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

Popularity: 24% [?]

Enter your email address and get free tutorials, tips and tricks of PHP, Ajax, JavaScript and CSS directly delivered to you email inbox:


Follow me on twitter at http://twitter.com/roshanbh.

Related Posts

» State preserved bottom hanging message box using jQuery
» Flashing Alert Message Box using JQuery
» How to display pop-up message on mouse clicked position using jQuery
» Solving Floating point number precision lost problem in PHP

Comments

11 Responses to “Top Floating message box using jQuery”

  1. Hem on July 15th, 2008 11:48 am

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

  2. Roshan on July 15th, 2008 4:14 pm

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

  3. sinan on July 15th, 2008 6:31 pm

    thanks man.how to cookie use this it?

  4. Hem on July 16th, 2008 8:39 am

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

  5. Roshan on July 16th, 2008 9:47 am

    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. State preserved bottom hanging message box using jQuery on July 23rd, 2008 11:46 am

    [...] not going to post the HTML code, it is same the previous post of floating message box using jQuery. You can refer to that article for HTML [...]

  7. 16+ Top JavaScript/Ajax Effects for Modern Web Design - aComment.net on August 6th, 2008 2:31 pm

    [...] Top Floating message box using jQuery - This effect will be useful for advertising, hot news, [...]

  8. Liens pour effets Javascripts Web 2.0 | Charlie Nguyen-Duc on August 7th, 2008 10:15 am

    [...] Top Floating message box using jQuery [...]

  9. 17 ?????????? JS/AJAX ???????? ??? ?????. ???? ??? ??????????? on August 7th, 2008 4:41 pm

    [...] Top Floating message box using jQuery - ?????? ????? ???????????? ??? ?????????? ???????, ??????? ???????? ? ?????? ????????? ??? ??????????? ?????. [...]

  10. Top JavaScript/Ajax Effects for Modern Web Design | Enetlive.net- Rich Internet Applications Blog on August 8th, 2008 1:49 am

    [...] Top Floating message box using jQuery - This effect will be useful for advertising, hot news, [...]

  11. Messaggio sempre in alto con jquery : sastgroup.com on September 10th, 2008 3:11 pm

    [...] web: http://roshanbh.com.np/…using-jquery.html Share and Enjoy: These icons link to social bookmarking sites where readers can share and [...]

Leave a Reply