State preserved bottom hanging message box using jQuery

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

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

Popularity: 7% [?]

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

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

Related Posts

» Help me to become the first Blogging Idol
» How to display pop-up message on mouse clicked position using jQuery
» Flashing Alert Message Box using JQuery
» Top Floating message box using jQuery

Comments

5 Responses to “State preserved bottom hanging message box using jQuery”

  1. Hem on July 23rd, 2008 8:14 pm

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

  2. Anatolij on August 8th, 2008 9:59 am

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

  3. Roshan on August 8th, 2008 3:58 pm

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

  4. Anatolij on August 11th, 2008 3:25 am

    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. Roshan on August 11th, 2008 4:43 am

    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”);

Leave a Reply