State preserved bottom hanging message box using jQuery

Last time, I’ve made the top floating message box using jquery. And a lot of people has asked me how can I preserve the state of that message box so that when it is closed.It won’t be open to for some time interval. Today, I’ve come with state preserved bottom hanging message box. When you close the message box, it’s state is preserved in cookie created using JavScript so that this message box won’t show up for certain hours.

View Live Demo

I’m 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 code.

CSS code for state preserved hanging message

#message_box { 
position: absolute;
left: 0px;
z-index: 10;
background:#ffc;
padding:5px;
border:1px solid #CCCCCC;
text-align:center;
width:99%;
display:none;
color:#0000FF;
font: bold 12px Verdana, Arial, Helvetica, sans-serif;
}

The element with id “message_box” is made hidden first with it’s position set to “absolute” for making it hanging. Other attribute you can change according to your need.

JavaScript Code for state preserved hanging message box

As this time, I’ve come up with the state preserved solution. I’ve used JavaScript for setting and getting value from cookie. I’ve used two functions getCookie() directly taken from w2school’s JavaScript cookie tutorial.But I’ve modified the setCookie() functions where you can set the cookie expirty time in number of hours Here is that function,

//function to set the cookie name, values and expiry time in hours
function setCookie(c_name,value,expireHours)
{
  var exhour=new Date(); //create the current date object
  exhour.setHours(exhour.getHours()+1); //setting hours
  document.cookie=c_name+ "=" +escape(value)+
  ((expireHours==null) ? "" : ";expires="+exhour.toGMTString());
}

Now, let’s dig through the jQuery code to provide the state preserved bottom hanging message box.

//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");
   setCookie('show_message','no',1); //cookies is set to "no" value
});

As you can see above, when the cross icon is clicked the message box gets hidden and furtheremroe, it sets a cookie “show_message” with value “no” which expires in one hour. Now, look at the jquery code,

if(getCookie('show_message')!='no')
{
  var pos=parseInt($(window).scrollTop())+parseInt($(window).height());
  $('#message_box').css("top",pos-26+"px");
  $('#message_box').show(); //display the message box

  //scroll the message box to the top offset of browser's scrool bar
  $(window).scroll(function()
  {
    var pos=parseInt($(window).scrollTop())+parseInt($(window).height());
    $('#message_box').animate({top:pos-26+"px" },{queue: false, duration: 500});
  });
}

As, you can see there is condition to show the message box and  code inside scroll event to execute. If the cookie is not set then the message box gets displayed and it will be shown to the bottom of the page according to the requirement.

Download Full Source Code

10 thoughts on “State preserved bottom hanging message box using jQuery

  1. Hem

    This is exactly how i have done in one of my sites

  2. Anatolij

    Nice :) i;ve been writing the timline class to make such animation :) bu after reading this post i;ll use this technique :)

  3. @Anatolij – Nice to hear that you’re going to use this code..

  4. Anatolij

    I’m creating the error box in the bottonm of the page, but if i change the height of the box (error appending automaticali) i need to be aligned to bottom, can it be solved by using bottom proporty animation?

  5. If you’ve increased the height of the box then increase the value in the above line..try to use differnt value instead of 26

    $(‘#message_box’).css(“top”,pos-26+”px”);

  6. Jay

    Hiya … thanks so much for this tutorial. Its a great little script and this website is full of fab tutorials.

    I was wondering though whether this script can be customised so that the speed of the actual bar slows down. To be honest what Im after is a fixed bar along the bottom of the screen so when you scroll down the page the bar is constantly there and doesnt need to be animated.

    Is this at all customisable in the script?

    Again … thanks for the great work.

  7. thank you it’s so cool on style and coding thank you

  8. Hi Roshan… Im ordinary using an old javascript to make this hanging message box and the result is it doesn’t work correctly in IE (I hate this browser). Thanks Alot for the code, I’m gonna use it for my home projects, cool stuff..

  9. Thanks, this script is very useful. This is a great site.

  10. Vijay

    I found a problem with this script while trying in all popular browsers, the position of the float bar/panel remains unchanged when I restore the browser using its Maximize/Restore button. To see this problem first restore the browser using Maximize button then scroll to middle of the page and then suddenly Maximize the window of the browser, you will find the float bar’s position unchanged.

    Does anybody have solution for this problem?

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>