Hide div using cookies

Hi there,

I am trying to display a div popup which the user can close and then will hide for 24 hours, but not having much luck.

This is what I have so far:


<script>
$(document).ready(function() {

  // If the 'hide cookie is not set we show the message
  if (!readCookie('hide')) {
        $('#offerbox').show();
  }

  // Add the event that closes the popup and sets the cookie that tells us to
  // not show it again until one day has passed.
  $('#close').click(function() {
        $('#offerbox').hide();
        createCookie('hide', true, 1)
        return false;
  });

});

// ---
// And some generic cookie logic
// ---
function createCookie(name,value,days) {
  if (days) {
        var date = new Date();
        date.setTime(date.getTime()+(days*24*60*60*1000));
        var expires = "; expires="+date.toGMTString();
  }
  else var expires = "";
  document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
  var nameEQ = name + "=";
  var ca = document.cookie.split(';');
  for(var i=0;i < ca.length;i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
  }
  return null;
}

function eraseCookie(name) {
  createCookie(name,"",-1);
}
</script>


<div id="offerbox">
<a href="Javascript:void(0)" id="close">close</a>
content here
</div>


<script>
$(document).ready(function(){
 $(window).scroll(function(){
  // get the height of #wrap
  var h = $('#wrapper').height();
  var y = $(window).scrollTop();
  if( y > (h*.25) && y < (h*.75) ){
   // if we are show keyboardTips
   $("#offerbox").fadeIn("1000");
  } else {
   $('#offerbox').fadeOut('1000');
  }
 });
})


</script>

ID offerbox id the box div.

Any ideas what i’m doing wrong?

Thanks

You currently have an IF statement that checks if the cookie exists and if it doesn’t you show the close button but that would be the wrong behavior as the button should always be visible but hidden when the page loads given the cookie is set still, see the below.

$(function() {
    
    // If the 'hide cookie is not set we show the message 
    [COLOR="#FF0000"]if (readCookie('hide')) {
        $('#offerbox').hide(0);
    }[/COLOR]
    
    // Add the event that closes the popup and sets the cookie that tells us to 
    // not show it again until one day has passed.
    $('#close').click(function(e) {
        e.preventDefault();
        $('#offerbox').hide();
        createCookie('hide', true, 1);
    });
    
});