2

I am trying to set up a cookie using jQuery Cookie so that an alert will be displayed for new visitors and when you click the "close" button it will set a cookie and prevent the alert div from displaying. I also want to make the cookie expire after 24 hours.

I have played around with some code and gotten it to work, however, the way I have it right now, the alert div is shown by default and only hidden once you click close. This is fine, but when the cookie exists, the alert displays for a split second before being hidden.

How would I modify the following code so that I can hide the div by default and if the cookie doesn't exist it will be shown, but then if they hit the close button, it will generate a cookie and hide the alert for 24 hours?

if ($.cookie('alert')) $('.alert-box').hide();
else {
    $(".close").click(function() {
        $( ".alert-box" ).slideUp( "slow", function() { });
        $.cookie('alert', true);
    });
}
zvisofer
  • 1,346
  • 18
  • 41
user13286
  • 3,027
  • 9
  • 45
  • 100

1 Answers1

8

You can hide the alert-box by default with CSS and use JavaScript to show it when there's no cookie:

CSS:

.alert-box {
    display: none;
}

JavaScript:

// if no cookie
if (!$.cookie('alert')) {
    $( ".alert-box" ).show();
    $(".close").click(function() {
        $( ".alert-box" ).slideUp( "slow" );
        // set the cookie for 24 hours
        var date = new Date();
        date.setTime(date.getTime() + 24 * 60 * 60 * 1000); 
        $.cookie('alert', true, { expires: date });
    });
}
Skwal
  • 2,160
  • 2
  • 20
  • 30
  • How do I apply your code for my question here: http://stackoverflow.com/questions/25674877/how-to-use-session-cookie-to-open-close-a-slide-in-div – SearchForKnowledge Sep 05 '14 at 15:03