www.webdeveloper.com
Results 1 to 8 of 8

Thread: How can I set a cookie to expire after x days with this code I have.

  1. #1
    Join Date
    Mar 2011
    Posts
    25

    How can I set a cookie to expire after x days with this code I have.

    So I have this code (which I did not make) which basically makes a container with an X, so when I press the X, the div container closes. However, when you refresh the page, the div container will reappear again.

    How can I make it so when the person presses the X button, the person will never see the div container ever again (or for a set amount of time like 30 days) on that page?

    I want to take it one step further, if possible, and make it so when the person presses the X button, he/she will never see the div container again throughout my site, as I plan on implementing the same div container throughout my site.

    Hope this isn't too confusing, and that someone can help me out. Thanks.


    HTML Code:
    <div id="bottom_ad">
    <div id="close_ad" onclick="close_bottom_ad();">X</div>
    <!-- Ad Content -->
    </div>
    CSS
    Code:
    #bottom_ad
    {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 80px;
    background: #000;
    }
    #close_ad
    {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 15px;
    height: 15px;
    color: #fff;
    }
    JavaScript (Place at bottom of file, before </body> tag.)
    Code:
    <script type="text/javascript">
    // I may have sorta kinda taken this function from W3Schools. :S
    function getCookie(c_name)
    {
    var i,x,y,ARRcookies=document.cookie.split(";");
    for (i=0;i<ARRcookies.length;i++)
    {
    x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
    y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
    x=x.replace(/^\s+|\s+$/g,"");
    if (x==c_name)
    {
    return unescape(y);
    }
    }
    }

    var ad_cookie = getCookie("closedAd");

    if (ad_cookie != null && ad_cookie != "")
    {
    document.getElementById("bottom_ad").style.display="none";
    }

    function close_bottom_ad()
    {
    document.getElementById("bottom_ad").style.display="none";
    document.cookie = "closedAd=true;";
    }
    </script>

  2. #2
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,264
    You have to use the function setCookie !
    HTML Code:
    function close_bottom_ad(){
       document.getElementById("bottom_ad").style.display="none";
       setCookie("closedAd",true,30);}
    Don't lose too many time for test with this kind of script (witch shows that the duration may be reduced to milliseconds)...

  3. #3
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,674
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <style type="text/css">
    /*<![CDATA[*/
    #bottom_ad
    {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 80px;
    background: #000;
    }
    #close_ad
    {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 15px;
    height: 15px;
    color: #fff;
    }
    
    /*]]>*/
    </style>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    function close_bottom_ad(days){
     document.getElementById("bottom_ad").style.display="none";
     document.cookie='bottom_ad=true;expires='+(new Date(new Date().getTime()+days*86400000).toGMTString())+';path=/';
    }
    
    function cookie(nme){
     var re=new RegExp(nme+'[^;]+','i');
     if (document.cookie.match(re)){
      return document.cookie.match(re)[0].split("=")[1];
     }
     return null
    }
    
    
    /*]]>*/
    </script>
    </head>
    
    <body>
    <div id="bottom_ad">
    <div id="close_ad" onclick="close_bottom_ad(1);">X</div>
    <!-- Ad Content -->
    </div>
    
    <script  type="text/javascript">
    /*<![CDATA[*/
    
    if  (cookie('bottom_ad')){
     document.getElementById("bottom_ad").style.display="none";
    }
    /*]]>*/
    </script></body>
    
    </html>
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  4. #4
    Join Date
    Mar 2011
    Posts
    25
    Hey guys, thanks for the response. I'll try it soon, and I'm sure it'll work. Once again, thanks!

  5. #5
    Join Date
    Mar 2011
    Posts
    25
    007Julien, can you show me how to put it into the actual code though?

    vwphillips, the code doesn't work at all . Nothing shows up. If I put the
    <script type="text/javascript">
    /*<![CDATA[*/

    if (cookie('bottom_ad')){
    document.getElementById("bottom_ad").style.display="none";
    }
    /*]]>*/
    </script>
    on the head however, I get the same result as my original post. Which is a container that can be X'd and nothing more. It doesn't not show for a set number of days after a person has hit X.

  6. #6
    Join Date
    Sep 2008
    Location
    Jackson MS
    Posts
    373
    These are the cookie functions I use in my guitar chords site.
    Code:
    function setCookie(c_name,value,expiredays)
    {
       var exdate=new Date();
       exdate.setDate(exdate.getDate()+expiredays);
       document.cookie=c_name+ "=" +escape(value)+
       ((expiredays==null) ? "" : ";expires="+exdate.toUTCString());
    }
    
    function getCookie(c_name)
    {
    if (document.cookie.length>0)
      {
      c_start=document.cookie.indexOf(c_name + "=");
      if (c_start!=-1)
        {
        c_start=c_start + c_name.length+1;
        c_end=document.cookie.indexOf(";",c_start);
        if (c_end==-1) c_end=document.cookie.length;
        return unescape(document.cookie.substring(c_start,c_end));
        }
      }
    return "";
    }
    HTH

  7. #7
    Join Date
    Dec 2010
    Posts
    207
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>TEST</title>
    <style>
    #bottom_ad
    {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 80px;
    background: #000;
    }
    #close_ad
    {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 15px;
    height: 15px;
    color: #fff;
    }
    </style>
    
    </head>
    <body>
    <div id="bottom_ad">
    <div id="close_ad" onclick="close_bottom_ad();">X</div>
    AD CONTENT
    </div>
    
    <script type="text/javascript">
    function readCookie( cName )
    {
      var v;
    
      return decodeURIComponent( ( v = ( document.cookie || "" ).match( "(^|\\s)" + cName + "=([^;$]+)" ) ) ? v[ 2 ] : "" );
    }
    
    function setCookie( cName, cValue, life, cPath, cDomain, cSecure )
    {
     var dt = new Date(), 
         expSecs = ( expSecs = life.toString().match( /\bsecs\s*=\s*(\d+)/i ) ) ? Number( expSecs[ 1 ] ) : 0,
         params = ( life ? ( ";expires=" + new Date( expSecs ? ( dt.setTime( dt.getTime() + expSecs * 1000 ) )                                                          : ( dt.setDate( dt.getDate() + life) ) ).toUTCString() ) : "" )
                + ( cPath ? (";path=" + cPath) : "" )
                + ( cDomain ? ";domain=" + cDomain : "" )
                + ( cSecure ? ";secure" : "" );
    
     document.cookie = cName + "=" + encodeURIComponent( cValue ) + params;
    
     return readCookie( cName );
    }
    
    if( readCookie( "closedAd" ) )
    {
      document.getElementById("bottom_ad").style.display="none";
    }
    
    function close_bottom_ad()
    {
      document.getElementById("bottom_ad").style.display="none";
      setCookie( "closedAd", "true", 30 );
    }
    </script>
    
    </body>
    </html>


    Q: I found this code...
    A: Then find its author.

  8. #8
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,264
    vwphillips : There are 11 characters with special meanings in regular expression : the opening square bracket [, the backslash \, the caret ^, the dollar sign $, the period or dot ., the vertical bar or pipe symbol |, the question mark ?, the asterisk or star *, the plus sign +, the opening round bracket ( and the closing round bracket ). These special characters are often called "metacharacters" and strictly speaking you have to put an antislash before this characters in nme.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles