Keeping a DIV Closed for a duration

Question

I have this markup with me

<div id="message">
    <h2>Some Heading</h2>
    <span>
            <img src=""  alt="close"></img> 
    </span>
</div>

When I click on the image, the DIV disappears

$("#message").click(function() {
        $(this).fadeOut("slow");
});

But when I refresh the page, it appears again. Now I found out that the jquery-cookie plugin is the way to go to make sure the DIV doesn't appear again but I am unable to wire it up with this example.

I basically want to set the cookie to hide the div for 7 days. After 7 days when someone visits the page, show the div again.

Any ideas?

Here's a fiddle http://jsfiddle.net/8gaGm/1/

score 1 · Accepted Answer · answered May 07 '14 at 02:16

1

The jQuery cookie plugin isn't necessary for this. To change the time limit on the expiration change the 86400000*7 to whatever you want. It's time in miliseconds (86400000 is one day times 7).

Add display:none; to the #message CSS.

Javascript:

var cookies = document.cookie;

if(cookies.search('hideMessage=1') === -1){
    $("#message").show();
}

$("#message").click(function() {
    $(this).fadeOut("slow");
    document.cookie = 'hideMessage=1; expires='+(new Date(Date.now()+(86400000*7)).toUTCString());
});

DEMO

answered May 07 '14 at 02:16

Adam Merrifield

10,307
4
41
58

Brilliant Adam. I would love a plugin free approach. – user3279259 May 07 '14 at 02:30
Just one follow up question. What if I have to close it for ever as long as the cookie resides on the user's machine? – user3279259 May 07 '14 at 02:46
@user3279259 If you want to store a cookie *forever* you would just have to set that number really really high. So just do something like `Date.now()+(86400000*365*3)` would be 3 years in the future. Which *realistically* wouldn't ever really happen. (obviously this is possible but highly unlikely) – Adam Merrifield May 07 '14 at 02:53
**UPDATE** If you want to set the cookie to the max date possible then use `new Date(2147483646999)`. This would set the date to the max int value of a 32bit operating system's Epoch Time. You can read more [here](http://stackoverflow.com/questions/16626875/google-chrome-maximum-cookie-expiry-date), [here](http://en.wikipedia.org/wiki/2147483647), and [here](http://en.wikipedia.org/wiki/Year_2038_problem). – Adam Merrifield May 07 '14 at 03:11

score 0 · Answer 2 · answered May 07 '14 at 02:06

0

An alternative to using cookies, if your browser requirements allow for it, is using HTML5 local storage to store a date that you can use to make the decision about wheather or not to show the div.

Link: http://diveintohtml5.info/storage.html

answered May 07 '14 at 02:06

TGH

38,769
12
102
135

Nice suggestions but ppl may not be using a HTML5 browser, so I am stuck with the cookie option – user3279259 May 07 '14 at 02:09

score 0 · Answer 3 · answered May 07 '14 at 02:16

Try

I use https://github.com/carhartl/jquery-cookie Jquery cookie plugin

It is a some idea , Set $.cookie('the_cookie', 'the_value', { expires: 7 }); when onclick the div and on document load check if cookie set or not.

E.g

$(function() {
  // check cookie set or not, if set hide div else show div
  if( $.cookie('message_cookie') != 'undefined' ) {
    $("#message").hide();
  } else {
    $("#message").show();
  }

  $("#message").click(function() {
    $(this).fadeOut("slow");
    //set a cookie
    $.cookie('message_cookie', '1', { expires: 7 });
  });
});

Keeping a DIV Closed for a duration

3 Answers3