Hide elements for current visit only

Question

I need to display a banner that sticks to the bottom of the browser. So I used these codes:

$(document).ready(function(){
  $('#footie').css('display','block');
  $('#footie').hide().slideDown('slow');
  $('#footie_close').click(function(){
    $('#footie_close').hide();
    $('#footie').slideUp('slow'); 
  }); 
});

And here's the HTML:

<div id="footie">
  {banner here}
  <a id="footie_close">Close</a>
</div>

I added the close link there to let user have the option to close the banner. How ever, when user navigates to next page, the banner shows up again. What can I do to set the banner to remained hidden just for this visit? In other words, as long as the browser remained open, the banner will not show up again. But if user returns to the same website another time, the banner should load again.

Thanks in advance for any help!

Answer 1

Set a cookie to indicate that the banner has been dismissed, e.g. hide_banner = 1. Upon subsequent visits, if the cookie is set, then do not show the banner.

Answer 2

Try using this jquery plugin: http://plugins.jquery.com/project/Cookie

You should be able to do something like this (note this code hasn't been tested):

$(document).ready(function(){
  if($.cookie("hidefootie") {
    $('#footie').css('display','block');
    $('#footie').hide().slideDown('slow');
    $('#footie_close').click(function(){
      $('#footie_close').hide();
      $('#footie').slideUp('slow'); 
      $.cookie("hidefootie", "true");
    }); 
  }
});