Top Floating message box using jQuery

Advertisement

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

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

43 Comments on “Top Floating message box using jQuery”

  • Hem wrote on 15 July, 2008, 11:48

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

  • Roshan wrote on 15 July, 2008, 16:14

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

  • sinan wrote on 15 July, 2008, 18:31

    thanks man.how to cookie use this it?

  • Hem wrote on 16 July, 2008, 8:39

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

  • Roshan wrote on 16 July, 2008, 9:47

    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…

  • William Nieva wrote on 27 October, 2008, 17:49

    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…!!!

  • earpick wrote on 2 February, 2009, 5:40

    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.

  • Rui wrote on 22 February, 2009, 23:32

    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?

  • Akshit wrote on 3 March, 2009, 9:02

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

  • mittelspiel wrote on 26 March, 2009, 7:17

    thank you!!!

    excellent using jQuery

  • Ramz wrote on 11 May, 2009, 18:23

    Thanks. This is very usefull

  • Shubham wrote on 25 May, 2009, 21:02

    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

  • Phill Pafford wrote on 28 May, 2009, 13:44

    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?

  • Rafeek wrote on 7 July, 2009, 13:06

    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 :)

  • Ikhsanblog wrote on 25 July, 2009, 10:50

    Nice blog..

  • WiserX wrote on 27 July, 2009, 17:42

    funny, but useful.

    thanks

  • cristian wrote on 6 August, 2009, 16:56

    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

  • Jimmy wrote on 9 October, 2009, 16:30

    Thk.. very good

  • Mahesh wrote on 16 December, 2009, 16:49

    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

  • Kiruba wrote on 17 December, 2009, 22:23

    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

  • Roshan wrote on 18 December, 2009, 4:14

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

  • anadikt wrote on 15 January, 2010, 21:49

    Thanks. This is very usefull

  • jap wrote on 24 January, 2010, 16:30

    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.

  • Slavi wrote on 21 February, 2010, 18:49

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

  • Lio wrote on 26 February, 2010, 23:37

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

    newbie here

  • anu wrote on 13 April, 2010, 13:12

    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

  • anu wrote on 17 April, 2010, 7:47

    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

  • Rugesie wrote on 12 June, 2010, 22:59

    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!

  • Andre wrote on 19 June, 2010, 20:54

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

  • buzzknow wrote on 6 July, 2010, 12:51

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

    thanks

  • jkeks wrote on 15 August, 2010, 2:17

    I used it on my site, tanks

  • Amit Jain wrote on 13 September, 2010, 18:24

    Thanks a lot! It helped.

  • Techie Salsan wrote on 16 March, 2011, 11:28

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

Trackbacks

  1. State preserved bottom hanging message box using jQuery
  2. 16+ Top JavaScript/Ajax Effects for Modern Web Design - aComment.net
  3. Liens pour effets Javascripts Web 2.0 | Charlie Nguyen-Duc
  4. 17 ?????????? JS/AJAX ???????? ??? ?????. ???? ??? ???????????
  5. Top JavaScript/Ajax Effects for Modern Web Design | Enetlive.net- Rich Internet Applications Blog
  6. Messaggio sempre in alto con jquery : sastgroup.com
  7. 16+ Top JavaScript/Ajax Effects for Modern Web Design | DevWebPro
  8. The Ultimate Guide To JavaScript in Web Design | AddyOsmani.com | Where Web Businesses Grow
  9. Colocar un mensaje flotante en tu blog | Paraiso Linux
  10. Anonymous

Write a Comment

 


Copyright © 2014 Roshan Bhattarai's Blog. All rights reserved.
Powered by WordPress.org, Custom Theme and ComFi.com Calling Card Company.